使用一个脚本的多个剑道网格答案

【问题标题】：multiple kendo grids using one script使用一个脚本的多个剑道网格
【发布时间】：2018-06-22 12:32:29
【问题描述】：

我正在将多个部分视图加载到同一个 cshtml 页面中。一切顺利，直到他们需要使用脚本。因为我正在使用类似的代码

var grid = $("#grid").data("kendoGrid");
var selected = grid.selected();

此代码适用于一个网格，但在多个网格就位时开始显示问题。问题是“#grid”是对剑道网格名称的引用。有没有办法让这个动态化，以便它可以被多个网格使用？

我认为当同一页面中有多个网格时会出现同样的问题，因为它无法区分要引用的网格。给网格不同的 id 会起作用，但是脚本中的代码将在 grid.selected() 上返回一个未定义的错误。

更新：

所以使用的解决方案

var grid = $(".k-grid").data("kendoGrid");

工作到一定程度。它将数据加载到网格中，但没有做任何其他事情。例如，我用于启用更新和删除按钮的部分代码在第二和第三部分视图上不起作用。

var grid = $(".k-grid").data("kendoGrid");
var selected = grid.select();
if (selected.length > 0) {
    $("#btnCopy,#btnEdit,#btnDelete").removeClass("k-state-disabled");
} else {
    $("#btnCopy,#btnEdit,#btnDelete").addClass("k-state-disabled");
}

在我选择了网格 1 上的一行后，代码才开始为网格 2 和 3 工作，这与预期不符。

【问题讨论】：

您确定每个部分页面上的按钮ID都相同吗？
我检查只是为了确定，但是是的，所有局部视图上的名称都是相同的。老实说，我正考虑将这些部分视图分成单独的页面，只是因为它不起作用......
原来问题在于 .k-grid 没有可靠地调用正确的表。当我查看第二张或第三张桌子时，它经常会调用第一张桌子。一个可行的解决方案是将我正在查看的网格保存到脚本中的一个变量中，并使用它来调用正确的数据。不幸的是，当在不同的浏览器选项卡中打开多个部分视图时，这会导致问题，但这是另一天的问题

标签： javascript kendo-grid

【解决方案1】：

您可以使用 class(.k-grid) 代替 id(#Grid)：

  var grid = $(".k-grid").data("kendoGrid");

【讨论】：

经过大量试验和错误后，我得出的结论是，这实际上并没有按预期工作。它适用于使用它的部分方法，但不适用于其他方法。我将在问题更新中包含更多信息

【解决方案2】：

我在高级程序员的帮助下找到的解决方案是将网格数据保存到这样的全局变量中。

var PartialGridData = PartialGridData || {};

之后，每当更改局部视图时，我都会设置和更改变量。

PartialGridData.selectedGrid = $("#PartialGrid1").data("kendoGrid");

其中名称#PartialGrid1 是当前网格的名称。这意味着我需要编写与网格一样多的代码，但它也解决了很多问题。之后我用它来选择正确的数据。

var grid = PartialGridData.selectedGrid;
var selected = grid.select();
if (selected.length > 0) {
    $("#btnCopy,#btnEdit,#btnDelete").removeClass("k-state-disabled");
} else {
    $("#btnCopy,#btnEdit,#btnDelete").addClass("k-state-disabled");
}

另一种选择是使用 e.sender。

function onRowSelect(e) {
    var grid = e.sender;
    var selected = grid.select();
    if (selected.length > 0) {
        $("#btnCopy,#btnEdit,#btnDelete").removeClass("k-state-disabled");
    } else {
        $("#btnCopy,#btnEdit,#btnDelete").addClass("k-state-disabled");
    }
}

这两种解决方案都有其缺点。并非所有方法都获取用于 e.sender 的变量 e，并且以未捕获的方式更改部分视图将导致全局变量不更新，因此必须对其进行检查。

【讨论】：