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

您可以在here现场观看演示。