Webix Datatable onclick無法獲取選定的行數據

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);
}

請在此處檢查代碼段。

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