jqgrid:如何根据所选行中的列值设置工具栏选项

Question

我有一个列字段类型具有值(可编辑,只读).所有行都将填充其中一个值.

我想仅在所选行的列值可编辑时启用/禁用toolbaroption编辑.

我怎样才能在jqgrid中实现这一目标.

Answer 1

如果我理解你是正确的,你想根据所选行启用/禁用导航器的"编辑"或"删除"按钮.所以你会拥有

如果未选择任何行或所选行不可编辑或标准导航器工具栏

如果行是可编辑的.

"可编辑"或"只读"列的标准似乎是错误的,因为它是列上的条件列而不是行,但您可以轻松实现自己的自定义条件.

实施可能是

var myGrid = jQuery("#list");
myGrid.jqGrid({
    /* definition of jqGrid */
    beforeSelectRow: function(rowid) {
        var selRowId = $(this).getGridParam('selrow'),
            tr = $("#"+rowid);
        // you can use getCell or getRowData to examine the contain of
        // the selected row to decide whether the row is editable or not
        if (selRowId !== rowid && !tr.hasClass('not-editable-row')) {
            // eneble the "Edit" button in the navigator
            $("#edit_" + this.id).removeClass('ui-state-disabled');
            $("#del_" + this.id).removeClass('ui-state-disabled');
        } else {
            // unselect previous selected row
            // disable the "Edit" and "Del" button in the navigator
            $("#edit_" + this.id).addClass('ui-state-disabled');
            $("#del_" + this.id).addClass('ui-state-disabled');
        }
        return true; // allow selection or unselection
    },
    loadComplete: function() {
        // just one example how to mark some rows as non-editable is to add
        // some class like 'not-editable-row' which we test in beforeSelectRow
        $("tr.jqgrow:even",this).addClass('not-editable-row');
    }
}).jqGrid('navGrid','#pager');
// disable "Edit" and "Delete" button at the beginning
$("#edit_" + myGrid[0].id).addClass('ui-state-disabled');
$("#del_" + myGrid[0].id).addClass('ui-state-disabled');

要启用/禁用"编辑"和"删除"按钮,我们在导航器工具栏的按钮上添加/删除"ui-state-disabled"类.在上面的代码中,我将具有偶数的所有行标记为"不可编辑".在您的情况下,您可以使用任何其他更有意义的标准.

你可以在这里看到演示.