jqgrid中的两种不同的编辑形式

时间:2013-07-05 06:21:47

标签: jqgrid

有没有办法在jqGrid中实现2个不同的编辑表单。我的意思是一个正常的通常编辑形式,另一个是更小的表单字段(自定义)。两者都在同一个navGrid中。说编辑和编辑部分。任何人都可以投光吗?非常感谢。

1 个答案:

答案 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 });