在详细单击列标题时编辑剑道网格中的主列标题
Posted
技术标签:
【中文标题】在详细单击列标题时编辑剑道网格中的主列标题【英文标题】：Edit master column Title in kendo grid on clicking column headers in detailInit 【发布时间】：2017-05-10 23:55:20 【问题描述】：以下是带有 detailInit 的剑道网格示例：
我的要求是在对特定子网格（detailInit）中的列进行排序时，其标题，即 FirstName 字段应更改如下所示：
只是应该更改特定子网格的标题。我尝试在 detailInit 的数据绑定函数中注册 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>
【问题讨论】：
【参考方案1】：至少有两种主要的方法可以做到这一点。但是，我不明白您是否愿意：
a)清除所有“更新”的文本，只允许最后一次点击
b) 跟踪所有它们，在用户对网格进行排序时放置文本
不管怎样，让我们看看这两种策略。
仅使用 jQuery
>a)
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
希望对您有所帮助！ :)
【讨论】：
以上是关于在详细单击列标题时编辑剑道网格中的主列标题的主要内容，如果未能解决你的问题，请参考以下文章