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

我有一个具有值的列字段类型(可编辑，只读)。所有行都将填充这些值之一。

仅当所选行的列值可编辑时，我才想启用/禁用工具栏选项编辑。

我怎样才能在 jqgrid 中实现这一点。

最佳答案

如果我理解您正确，您希望基于所选行启用/禁用导航器的“编辑”或“删除”按钮。这样你就会有

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

如果该行是可编辑的。

列“可编辑”或“只读”的标准似乎是错误的，因为它是列上的标准列而不是行上的标准列，但您可以轻松实现自己的自定义标准。

实现可能是

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 。

关于jqgrid:如何根据所选行中的列值设置工具栏选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5373693/