如何使用免费的jqgrid属性有条件地添加操作按钮

Question

免费的jqgrid显示订单。发布的订单应具有黄色背景，并且只能打开操作按钮。未发布的订单具有白色背景，标准删除和自定义发布操作按钮。在loadComplete中为所有行创建自定义操作按钮：                     .addClass("ui-pg-div ui-inline-post")                 .append('<span class="fa ui-state-default fa-fw fa-lock"></span>')                 .prependTo($(this).children("div"));                   $("<div>",                       {                           title: "Open (Enter)",                           mouseover: function() {                               $(this).addClass('ui-state-hover');                           },                           mouseout: function() {                               $(this).removeClass('ui-state-hover');                           },                           click: function(e) {                               openDetail($(e.target).closest("tr.jqgrow").attr("id"));                           }                       }                    )               }); 在使用如何使用Fontawesome复选框格式化程序从免费jqgrid中的已发布行中删除操作按钮中的代码有条件地删除了按钮之后，有条件地禁用了行编辑并更改了背景。如何使用免费的jqgrid actions选项简化此代码？如何创建统一的方式来隐藏标准编辑和删除以及用户定义的操作按钮？即使可以使用回调有条件地禁用自定义按钮创建，隐藏标准按钮仍需要DOM修改。也许以相同的方式定义所有动作按钮。也许可以使用现有的rowattr或cellattr回调或引入新的回调来完成。当前行et只能在下面的代码中使用读取row.className = className + ' jqgrid-postedrow not-editable-row';$(row.cells[iActionsCol]).attr('editable', '0');合理地做到这一点，以便diableRows可以完全删除吗？也许可以使用rowattr（）代替它。

Answer 1

我做了一些更改，formatter: "actions"以简化您的方案的实现。该演示演示了如何使用新功能。如下图所示显示网格

在此处输入图片说明

该演示将Action列定义colModel为

{ name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2

并且它使用actionsNavOptions（可以formatoptions替代使用）来配置以下选项formatter: "actions"：

actionsNavOptions: {

    editbutton: false,

    custom: [

        { action: "open", position: "first",

            onClick: function (options) {

                alert("Open, rowid=" + options.rowid);

            } },

        { action: "post", position: "first",

            onClick: function (options) {

                alert("Post, rowid=" + options.rowid);

            } }

    ],

    posticon: "fa-lock",

    posttitle: "Confirm (F2)",

    openicon: "fa-folder-open-o",

    opentitle: "Open (Enter)",

    isDisplayButtons: function (options, rowData) {

        if (options.rowData.closed) { // or rowData.closed

            return { post: { hidden: true }, del: { display: false } };

        }

    }

}

数组custom定义了动作名称position和onClick回调。要定义自定义按钮的图标和标题（工具提示），应在导航栏选项附近指定选项。它们指定图标类的属性将从动作名称（被构造open和post在上面的例子）和后缀"icon"以相同的方式将被定义为按钮标题属性的值。

回调isDisplayButtons允许根据行和rowid的数据通知jqGrid有关按钮的显示。该options参数与您从自定义格式化程序中了解的选项相同。options.rowId例如是rowid。最新版本的免费jqGrid（第4.8版）通过包含扩展了这些选项rowData。您可以看到的第二个参数isDisplayButtons已经是rowData。options.rowData和rowData数据格式之间的主要区别。在使用情况下，XML输入rowData参数是输入数据的XML项。另一方面，选项options.rowData是具有属性的对象，例如中的name属性colModel。尤其是在使用loadonce: trueXML数据的情况下，options.rowData有优势。在上述演示options.rowData和rowData是相同的。

回调isDisplayButtons应返回与动作名称具有相同属性的对象{ post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} }。每个此类对象的属性可以是

hidden: true-表示将按钮包括在列中，但将其隐藏。稍后可以显示该按钮。在save和cancel按钮默认隐藏。

display: false-表示完全不包含该按钮。del: {display: false}例如，返回具有与option相同的效果delbutton: false，但del: {display: false}仅适用于一行。

noHovering: true可用于onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');"从指定的操作按钮中删除悬停效果（）。