我以这种方式使用它 - 至少使用复选框。我将使用“编辑”按钮设置列,如下所示:
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();
}
当然,上面的代码假定复选框位于第一列。否则,childNodes[0]
将该 chkbox setAttribute 行上的第一个调整为它所在的列,减一,因为它从零开始计数。