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

Question

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

我只想在选定行的列值可编辑时启用/禁用工具栏选项编辑。

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

你可以在这里看到演示。