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

Question

I am putting together a webix UI for country data. 我正在整理一个用于国家/地区数据的webix UI。

The working code is here: http://sahanaya.net/webix/flags3.html 工作代码在这里： http : //sahanaya.net/webix/flags3.html

I cannot get the datatable row data when clicked. 单击时无法获取数据表行数据。 I want to click a datatable row, grab the country name and display related country data in the bottom in another webix row. 我想单击一个数据表行，获取国家名称，并在另一个webix行的底部显示相关的国家数据。 Eg: Cities, Drives on right/left, Major Attractions etc. 例如：城市，右/左行驶，主要景点等。

Code is below: 代码如下：

<!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

You are required to get the selected item from its id and then access its data members directly. 您需要从其ID中获取所选项目，然后直接访问其数据成员。 Hence, in the onItemClick function you can write as: 因此，在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);
}

Please check the snippet here . 请在此处检查代码段。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-15 20:23:08

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-15 20:23:08

解决方案1
2 已采纳 2016-10-15 20:23:08