Question

我正在为国家/地区数据组建一个webix UI。

工作代码在这里：http://sahanaya.net/webix/flags3.html

单击时我无法获取数据表行数据。我想单击一个数据表行，获取国家/地区名称并在另一个webix行的底部显示相关的国家/地区数据。例如：城市，左右驱动器，主要景点等。

代码如下：

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
        <title>Country Data</title>
        <script type="text/javascript" src="http://cdn.webix.io/edge/webix.js"></script>
        <link rel="stylesheet" type="text/css" href="http://cdn.webix.io/edge/webix.css">

    </head>
    <body>

        <div class='sample_comment'>Country Data</div>
        <div id="testD"></div>      

        <script type="text/javascript" charset="utf-8">

        webix.ready(function(){

            gridd = webix.ui({
                rows: [
                        { view:"template", template:"some text", type:"header" },],


                container:"testD",                      

                view:"datatable",

                columns:[
                    { id:"data0",   header:"test id", css:"rank",               width:50},
                    { id:"data1",   header:["Country", {content:"textFilter"}], width:200,  sort:"string"},                 
                    { id:"data2",   header:"Flag"    ,                          width:80},
                    { id:"data3",   header:"Capital" ,                          width:80},
                    { id:"data4",   header:"Dialing Code",                      width:80},
                    { id:"data5",   header:"Area",                              width:100},
                    { id:"data6",   header:"Population",                        width:150},
                    { id:"data7",   header:"President",                         width:150},
                    { id:"data8",   header:["Languages",{content:"textFilter"}],width:150},
                    { id:"data9",   header:"Currency",                          width:250},                 
                    { id:"data10",  header:"Continent",                         width:250}, 
                ],

                select:"row",               
                autoheight:true,
                autowidth:true,

                datatype:"jsarray",
                data:[
                    [1,"Abkhazia","<img src='32/Abkhazia.png' height=32 width=32>","Sukhumi","+840", "8,660 km²","242,862 (2012)","Raul Khajimba","Abkhaz, Russian","Russian ruble, Abkhazian apsar","continent"],                  
                    [2,"Afghanistan","<img src='32/Afghanistan.png' height=32 width=32>","Kabul","+93", "652,864 km²","30.55 million (2013)","Ashraf Ghani","Pashto, Dari","Afghan afghani","continent"],                   
                    [3,"Bahamas","<img src='32/Bahamas.png' height=32 width=32>","Nassau","+840", "8,660 km²","242,862 (2012)","Raul Khajimba","Abkhaz, Russian","Russian ruble, Abkhazian apsar","continent"],                 
                    [4,"Canada","<img src='32/Canada.png' height=32 width=32>","Ottawa","+840", "9.985 million km²","242,862 (2012)","Justin Trudeau","English, French","Canadian Dollar","North America"],                 
                ],

                on:{
                    "onItemClick":function(id, e, trg){
                        //id.column - column id
                        //id.row - row id
                        var item = this.getSelectedItem(id);
                        //webix.message(id+"Click on row: " + id.row+", column: " + id.column);
                        webix.message("item:"+item);
                        console.log(id);
                        var myObject = JSON.stringify(item);
                        alert(myObject);


                    }
                }
            });                             
        });
        </script>
    </body>
</html>

Answer 1

您需要从其ID中获取所选项目，然后直接访问其数据成员。因此，在 onItemClick 函数中，您可以写为：

onItemClick:function(id){
var item = this.getItem(id);   //to get the selected item from its id
var country = item.data1;      // to access country which is data1 in your code
webix.message("country:"+ country);
}

请检查代码段here。

Webix Datatable onclick无法获取选定的行数据

1 个答案: