我正在为国家/地区数据构建一个 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>
最佳答案
您需要从其 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 .
关于javascript - Webix Datatable onclick 无法获取选定行数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40060070/