2016-10-15 4 views
0

국가 데이터 용 webix UI를 구성하고 있습니다.

작업 코드는 여기에 있습니다 : http://sahanaya.net/webix/flags3.html

클릭하면 데이터 테이블 행 데이터를 가져올 수 없습니다. 데이터 테이블 행을 클릭하고 국가 이름을 잡고 다른 웹 릭스 행의 하단에 관련 국가 데이터를 표시하고 싶습니다. 예 : 당신은 그것의 ID에서 선택한 항목을 얻을하는 데 필요한 다음 직접 데이터 멤버에 액세스하는Webix Datatable onclick에서 선택된 행 데이터를 가져올 수 없습니다.

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

답변

2

: 도시는, 왼쪽/오른쪽, 관광지 등

코드는 다음과 같습니다에 드라이브.

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을 확인하십시오 : 따라서 onItemClick 기능에 당신은 쓸 수 있습니다.

+0

대단히 감사합니다. :-) –

+0

언제든지 : 어떤 의문이라도 물어보십시오. – jayantish

+0

Jayantish 내가 진전함에 따라 나는 분명히 더 많은 질문을 할 것이다. 이메일을 보내시겠습니까? 또는 [email protected]에 빈 이메일을 보내 주시면 괜찮습니까? –