有没有办法在jqGrid中实现2个不同的编辑表单。我的意思是一个正常的通常编辑形式,另一个是更小的表单字段(自定义)。两者都在同一个navGrid中。说编辑和编辑部分。任何人都可以投光吗?非常感谢。
答案 0 :(得分:3)
navGrid
添加的“添加”和“修改”按钮调用具有不同参数的editGridRow方法作为第二个参数(properties
参数)。如果使用navGrid称为
$("#grid").jqGrid("navGrid", "#pager", {parameters}, prmEdit, prmAdd);
然后navGrid
调用
$("#grid").jqGrid("editGridRow", rowid, prmEdit);
如果用户点击“编辑”按钮并调用
$("#grid").jqGrid("editGridRow", rowid, prmAdd);
如果用户点击“添加”按钮。
同样,您可以使用navButtonAdd方法向导航器添加新的自定义按钮。例如
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
}
});
在您添加一个编辑按钮的方式中。您现在唯一需要做的就是在调用editable
之前临时更改某些列的editGridRow
属性,并在调用editGridRow
后将其重置为原始值。您可以使用setColProp方法来简化工作。例如,如果您想使myColumn
列可编辑,则可以使用
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
// make "myColumn" temporary editable
$self.jqGrid("setColProp", "myColumn", {editable: true});
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
// make "myColumn" back as non-editable
$self.jqGrid("setColProp", "myColumn", {editable: false});
}
});
我想强调的是,使用recreateForm: true
选项所有使用editGridRow
(包含navGrid
)非常重要。所以我建议您只更改选项的默认值:
$.extend($.jgrid.edit, { recreateForm: true });