我正在使用Kendo UI Web网格。我已经将用于显示数据的自定义按钮集成到弹出窗口中。该按钮最初用于命令列。这完美无瑕。
现在我尝试将相同的按钮放在常规列中，但没有显示任何内容。甚至不会抛出错误，所以我不确定问题是什么。有什么建议吗？
来自JSBin的工作链接：
http://jsbin.com/iJunOsa/8/edit
HTML：
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/x-kendo-template" id="territoriesTemplate">
#for(var i = 0; i < Territories.length; i++){#
<span>#:Territories[i].TerritoryDescription#</span> <button id="info-btn">Info</button><br />
#}#
</script>
<script type="text/x-kendo-template" id="storesTemplate">
#for(var i = 0; i < Territories.length; i++){#
#for(var y = 0; y < Territories[i].TerritoryStores.length; y++) {#
<span>#:Territories[i].TerritoryStores[y].StoreName#</span>
#}#
#}#
</script>
<div id="grid"></div>
<script type="text/x-kendo-template" id="view">
<div id="details-container">
<label>Where is #= TerritoryDescription #?</label>
<p><strong>#= TerritoryDescription # is in blah blah blah...</strong></p>
</div>
</script>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<input type="search" class="k-textbox" placeholder="Search" id="search" style="width: 200px"></input>
</div>
</script>
</body>
</html>
使用Javascript：
var data = [
{ "EmployeeId": 1, "FirstName": "Jim", "LastName": "Jones", "Territories": [{ "Id": 1, "TerritoryDescription": "Wilton","TerritoryStores": [{ "Id": 1, "StoreName": "Navarra" }] }] }
];
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: function(e) {
e.success(data);
},
parameterMap: function (options, operation) {
if (operation !== "read") {
for(var field in options) {
if ($.isArray(options[field])){
serializeArray(field, options[field], options);
}
}
}
return options;
}
},
pageSize: 10,
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type:"number" },
FirstName: { type:"string" },
LastName: { type:"string" },
Territories: { defaultValue:[] },
TerritoryStores: { defaultValue:[] }
}
}
}
},
editable: false,
sortable: true,
pageable: {
pageSizes: [10, 25, 50, 100]
},
//height: 500,
toolbar: kendo.template( $( "#template" ).html() ),
filterable: false,
columns: [
{ field: "FirstName", title: "First Name", filterable: false, sortable: true, width: "220px" },
{ field: "LastName", title: "Last Name", filterable: false, sortable: true, width: "220px" },
{
field: "Territories",
title: "Territory",
template: kendo.template($("#territoriesTemplate").html()),
sortable: true,
width: "120px"
},
{
field: "TerritoryStores",
title: "Stores",
template: kendo.template($("#storesTemplate").html()),
sortable: false,
width: "120px"
}]
}).data("kendoGrid");
//serialize as a string
function serializeArray(prefix, array, result) {
for (var i = 0; i < array.length; i++) {
if ($.isPlainObject(array[i])) {
for (var property in array[i]) {
result[prefix + "[" + i + "]." + property] = array[i][property];
}
}
else {
result[prefix + "[" + i + "]"] = array[i];
}
}
}
//autofilter search bar
var timeout;
$("#search").bind("keydown", function() {
var input = $(this);
clearTimeout(timeout);
timeout = setTimeout(function() {
var text = input.val(),
dataSource = grid.dataSource;
if (text !== "") {
dataSource.query({
page: 1,
filter: {
field: "FirstName",
value: text,
operator: "contains"
}
});
} else if (text === "" && dataSource.filter()) {
dataSource.query({ filter: {}, page: 1, pageSize: 10 });
}
}, 500);
});
wnd = $("#details")
.kendoWindow({
modal: true,
visible: false,
resizable: false,
width: 600,
height:250
}).data("kendoWindow");
detailsTemplate = kendo.template($("#view").html());
});
$("#info-btn").bind("click", function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
wnd.setOptions({
title: dataItem.TerritoryDescription
});
});
答案 0 :(得分：1)
有很多问题;其中一些：
$("#details")为空（因此从未出现过窗口）TerritoryDescription上的dataItem，但它是嵌套属性grid但是尝试在该上下文之外访问它dataItem()上的this，但在该上下文中，this是DOM元素jQuery.on()代替bind 有些改进demo
将来您应该做些什么来诊断这些问题：注销变量并查看它们是否按预期定义（或设置断点和调试）。
答案 1 :(得分：0)
首先将文档中的下一个函数准备好了：
$("#info-btn").bind("click", function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
wnd.setOptions({
title: dataItem.TerritoryDescription
});
});
但仍然会引发一些错误。