Javascript 剑道UI网格可编辑手动数据项.set（）慢/延迟

我有一个可编辑的剑道网格，它可能有一个带有复选框的列来更改布尔值。我已经使用了OnaBai提出的建议，效果非常好

唯一的问题是复选框值更改太慢。当用户单击它时，大约需要1秒来更改。我意识到

dataItem.set（）

方法是由这个延迟造成的

我的网格有大量的数据。大约30-40列和300多行。其定义如下：

$("#mainGrid").kendoGrid({
    dataSource: dataSource,

    pageable: false,
    sortable: true,

    scrollable: true,
    editable: true,
    autoBind: false,
    columnMenu: true, // Cria o menu de exibição de colunas
    height: getGridHeight(),

    toolbar: [/* hide for brevity */],
    columns: [/* hide for brevity */],
    dataBound: function() { /* hide for brevity. */},
    edit: function() { /* hide for brevity. */}
});

---

另一个细节是，当调用

dataItem.set（）

时，它调用

dataBound（）

事件，但这不会导致延迟。在此进程上未调用网格的

edit（）

方法。我不知道是否值得发布

数据源
代码。
我建议在使用复选框时使用代码库文章中的方法。它不使用模型的set方法，仍然以相同的方式工作。即使在一个页面上有2000条记录，CheckAll也能完美地工作。
我已经找到了一种替代方法来实现OnaBai的建议，而且效果更好

// This is the grid
var grid = $("#mainGrid").data("kendoGrid");

// .flag is a class that is used on the checkboxes
grid.tbody.on("change", ".flag", function (e) 
{
    // Get the record uid
    var uid = grid.dataItem($(e.target).closest("tr")).uid;

    // Find the current cell
    var td = $(e.target).parent().parent();

    // This opens the cell to edit(edit mode)
    grid.editCell(td);

    // This ones changes the value of the Kendo's checkbox, that is quickly shown, 
    // changed and then hidden again. This marks the cell as 'dirty' too.
    $(td.find("input")[0]).prop("checked", $(e.target).is(":checked") ? "checked" : null).trigger("change").trigger("blur");
}

您应该尝试以下方法：

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

我将使用“编辑”按钮将列设置为如下所示：

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

在单击第一列（我有一个带有超链接的图像）时，使用onclick函数以编程方式单击编辑按钮，单击复选框，然后单击更新按钮。可能更“老派”，但我喜欢知道它是按照我自己更新它时的顺序进行的

我传入对象（“this”），这样当它出现时，我就可以得到行和复选框，新的状态为0或1（我有一些使用它的代码，但是对于这个演示来说并不需要，所以为了简单起见，我将该部分从我的函数中去掉），以及该项的ID：

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

columns.Bound（p=>p.IsActive）.Title（“Active”）.Width（100）.ClientTemplate（“#if（IsActive==true）{##}else{#}”）；
功能更改复选框（对象、状态、id）{
var parentTr=obj.parentNode.parentNode；
$（'[id=“btnEdit”+id+'“]'）。单击（）；
parentTr.childNodes[5].childNodes[0].setAttribute（“id”，“btnUpdate”+id）；//我的更新按钮在上面的第6列中
parentTr.childNodes[0].childNodes[0].setAttribute（“id”、“chkbox_389;”+id）；
$（'[id=chkbox_'+id+']'）。单击（）。触发（“更改”）；
$（'[id=chkbox_'+id+']'）。blur（）；
var btnUpdate=$（'[id=“btnUpdate_'+id+'']”）；
$（'[id=“btnUpdate_'+id+'“]'）。单击（）；
}

当然，上面的代码假定复选框位于第一列。否则，将chkbox setAttribute行上的第一个
childNodes[0]
调整到它所在的列，减去1，因为它从零开始计数。
我做了一个类似于@DontVoteMeDown的解决方案。但是我有一个嵌套的网格（主/细节），所以我从事件参数获取父网格。另外，我只是在复选框上触发一个单击事件

$("#grid .k-grid-content").on("change", "input.chkbx", function (e) {
    // Get the parent grid of the checkbox. This can either be the master grid or the detail grid.
    var parentGrid = $(e.target).closest('div[data-role="grid"]').data("kendoGrid");
    // Get the clicked cell.
    var td = $(e.target).closest("td");
    // Enter the cell's edit mode.
    parentGrid.editCell(td);
    // Find the checkbox in the cell (which now is in "edit-mode").
    var checkbox = td.children("input[type=checkbox]");
    // Trigger a click (which will toggle check/uncheck).
    checkbox.trigger("click");
});

抱歉，但这似乎是我正在使用的方法。查看文件Index.cshtml第30行。是的，我引用的是CheckAll函数中使用的方法，您可以看到IsAdmin属性是直接分配的（不使用set方法），然后手动刷新网格。我想我得到了它。在我的例子中，赋值不是通过
set（）
，而是由数据源解析。这很有效。我仅对
单击
事件调用的代码使用
set（）
方法。请查看我的答案，并告诉我您是否同意。对我不起作用。我得到一个错误，即“模板”为null或不是对象。如果你不使用uid做任何事情，为什么还要用它呢？此外，prop是针对jQuery的更高版本的，早期IE版本不支持它，而“attr”是通用的。但是$（e.target）只有在这样的操作函数中才有效，而不是在IE（）中。设置使用
${id}
传入的
.setAttribute（'id'，id）
等属性可以通过jQuery获取对象，这是通用的。另外，在我的回答中，当我尝试将
.trigger（“change”）
与
.blur（）
混合使用时，它不喜欢。我不得不把它们分别放在不同的行中。@vapcguy，但我并没有问任何关于.NET的问题。我甚至不用它，只用javascript。所以在我的例子中，你的答案并没有进一步的帮助。呃，不管它是否在.NET/MVC/HTML中——我们在谈论上面的javascript。如果你不使用uid做任何事情，那么获取它是没有意义的
attr
与早期版本的jQuery向后兼容，而
prop
则不兼容
$（e.target）
与IE不兼容。您可以在函数中执行
.setAttribute（'id'，id）
并从
e.id
传入
id
。把
.trigger（“change”）
和
.trigger（“blur”）
放在同一行对我来说不起作用——我不知道这对你有什么影响。所有这些都是关于javascript的，我所说的一切都没有针对任何类型的案例。