以下是带有 detailInit 的剑道网格示例:
我的要求是，在对特定子网格 (detailInit) 中的列进行排序时，其标题即 FirstName 字段应如下所示更改:
只是那个特定的子网格的标题应该改变。我尝试在 detailInit 的数据绑定(bind)函数中注册 onclick 事件，但无法找到列标题并更改它:
$("th[role='columnheader']").on("click", function (ev) {
// access clicked column in sub- grid
// change master row's title
};
请有人建议我一个解决方案，因为我是剑道网格、js、HTML 的新手，所以不了解很多功能。
如有任何帮助，我们将不胜感激。
请在下面找到我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 450,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: " "
}
]
}).on("click", ".btn-refresh", function (e) {
debugger;
var childGrid = $(e.target).closest(".k-grid").data("kendoGrid");
childGrid.dataSource.read();
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 6,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
toolbar: [{ text: "Refresh", className: "btn-refresh" }],
columns: [
{ field: "OrderID", width: 70 },
{ field: "ShipCountry", title: "Ship Country", width: 100 },
{ field: "ShipAddress", title: "Ship Address" },
{
field: "ShipName", title: "Ship Name", width: 200
}
]
});
}
</script>
</body>
</html>
最佳答案
至少有两种主要方法可以做到这一点。但是，我不明白你是否想:
a) 清除所有“更新”的文本，只允许最后一次点击
b) 跟踪所有这些，在用户对网格进行排序时放置文本
无论如何，让我们看看这两种策略。
仅使用 jQuery
一)
element.on('click', "th[role='columnheader']", function(e) {
// always remove all, to put again in the right place
$("strong[attr-id=updated]").remove();
var firstNameCell = $(this)
.closest("tr.k-detail-row") // Finds the closest detail row ...
.prev("tr.k-master-row") // ... in order to get the first previous row of class "k-master-row" (which stores the FirstName)
.find("td[role='gridcell']"); // and, then, get the td gridcell
firstNameCell.append("<strong attr-id='updated'> - Address updated</strong>");
});
b)
element.on('click', "th[role='columnheader']", function(e) {
var firstNameCell = $(this)
.closest("tr.k-detail-row")
.prev("tr.k-master-row")
.find("td[role='gridcell']");
// Check if the msg already exits, to not duplicate it
if (!(firstNameCell).find('strong[attr-id=updated]').length) {
firstNameCell.append("<strong attr-id='updated'> - Address updated</strong>");
}
});
attr-id 有助于识别页面上的文本元素，一旦使用 id 不是一个好习惯(每页仅一次)。
使用 KendoUI JavaScript 对象
这不是最好的方法，因为您不能像我们使用 jQuery 方法那样append HTML。此外，每次进行排序时，您都必须刷新整个表格。
这就是为什么我只显示案例 b)
element.on('click', "th[role='columnheader']", function(e) {
var masterRow = $(this)
.closest("tr.k-detail-row")
.prev("tr.k-master-row"); // Finds the closest master row ...
var rowIndex = $("tr.k-master-row").index(masterRow); // ... gets the index of it among all the others
kendoGrid = element.data('kendoGrid');
var firstName = kendoGrid.dataSource._data[rowIndex].FirstName; // gets current name based on the index
if (!firstName.includes('Address updated')) {
selectedCell = rowIndex; // sets the index to be used when grid refreshes
kendoGrid.dataSource._data[rowIndex].FirstName = firstName + " - Address updated";
kendoGrid.refresh(); // refreshed the whole grid
}
});
仍然，为了使 KendoUI 在每次刷新其网格时扩展正确的行，您必须创建全局变量 selectedCell 并检查 dataBound 函数是否是否有值:
dataBound: function () {
if (selectedCell) {
this.expandRow(this.tbody.find("tr.k-master-row:eq(" + selectedCell + ")"));
} else {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
},
在这里，你可以看到更多关于剑道网格刷新的信息:Reloading/refreshing Kendo Grid
希望对您有所帮助! :)
关于javascript - 单击 detailInit 中的列标题编辑剑道网格中的主列标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41332571/