我自己不使用 Zend Framework。所以我的建议很常见,它们独立于您使用的框架。
在下面的示例中,我将展示如何onSelectRow
在网格上动态设置以实现对行选择的内联编辑。我想网格中已经存在其他必需的设置,如editable: true
属性colModel
和选项。editurl
所以我只显示onSelectRow
动态的设置。
第一种方法是使用setGridParam
设置onSelectRow
回调。对应的demo使用如下代码:
$(function () {
var $grid = $("#list"),
editingRowId,
myInlineEditingOptions = {
keys: true,
oneditfunc: function (id) { editingRowId = id; },
afterrestorefunc: function () { editingRowId = undefined; },
aftersavefunc: function () { editingRowId = undefined; }
};
$grid.jqGrid({
datatype: 'local',
....
editurl: 'clientArray'
});
// now we set or change onSelectRow callback AFTER jqGrid is created
$grid.jqGrid('setGridParam', {
onSelectRow: function (id) {
if (id !== editingRowId) {
if (typeof editingRowId !== "undefined") {
// save previously editing row
//$(this).jqGrid("saveRow", editingRowId, myInlineEditingOptions);
// discard changes from the previously editing row
$(this).jqGrid("restoreRow", editingRowId, myInlineEditingOptions);
}
// start inline editing. The user should save the row by pressing ENTER
$(this).jqGrid("editRow", id, myInlineEditingOptions);
}
}
});
});
在上述情况下,重要的是要提到
- 我们可以在创建 jqGrid
onSelectRow
之后设置(或更改)。
- 它只能是网格中的一个
onSelectRow
回调。设置新的onSelectRow
回调覆盖现有的回调。
最后一个限制可能非常困难。例如,您不能实现一些onSelectRow
应该为项目中的所有网格执行的默认操作,并onSelectRow
为一些额外的特定操作使用附加操作。这是引入类 jQuery 事件的主要原因,这些事件可以非常接近回调的形式使用。下一个示例演示了该技术。
下一个演示与上一个完全一样,但它使用jqGridSelectRow
事件而不是onSelectRow
回调。新技术有两个重要的优点
- 可以在创建 jqGrid 之前或之后设置
jqGridSelectRow
事件处理程序。如果使用jQuery.bind绑定事件处理程序,那么将被转换为网格的元素应该存在。如果使用更慢的jQuery.delegate、jQuery.live或jQuery.on(最后一个从 jQuery 1.7 开始存在),则可以随时绑定事件处理程序。<table>
- 可以设置多个
jqGridSelectRow
事件处理程序,所有这些事件处理程序都将在唯一的回调(如果存在)之前执行。onSelectRow
通过这种方式,您可以在事件处理程序中实现一些常见操作,jqGridSelectRow
并且可以使用额外的jqGridSelectRow
事件处理程序或onSelectRow
回调网格特定操作。对于完成操作,您可以使用onSelectRow
回调。
对应的代码如下
$(function () {
var $grid = $("#list"),
editingRowId,
myInlineEditingOptions = {
keys: true,
oneditfunc: function (id) { editingRowId = id; },
afterrestorefunc: function () { editingRowId = undefined; },
aftersavefunc: function () { editingRowId = undefined; }
};
$grid.bind("jqGridSelectRow", function (e, id) {
if (id !== editingRowId) {
if (typeof editingRowId !== "undefined") {
// save previously editing row
//$(this).jqGrid("saveRow", editingRowId, myInlineEditingOptions);
// discard changes from the previously editing row
$(this).jqGrid("restoreRow", editingRowId, myInlineEditingOptions);
}
// start inline editing. The user should save the row by pressing ENTER
$(this).jqGrid("editRow", id, myInlineEditingOptions);
}
});
$grid.jqGrid({
datatype: 'local',
....
editurl: 'clientArray'
});
});
更新:我忘了提,可以在事件绑定期间使用命名空间。这在更复杂的场景中非常有用。如果有人会使用$grid.bind("jqGridSelectRow.myNamespace", ...);
,那么您将只能使用$grid.unbind('.myNamespace');
or取消绑定自己的事件$grid.unbind('jqGridSelectRow.myNamespace');
。它不会取消绑定具有其他命名空间的其他事件。