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”类。在上面的代码中，我将具有偶数的所有行标记为“不可编辑”。在您的情况下，您可以使用任何其他更有意义的标准。

您可以直接观看演示here。