1

免费 jqgrid 显示订单。发布的订单应该有黄色背景,并且只打开操作按钮。未发布的订单具有白色背景、标准删除和自定义发布操作按钮。

动作列的colmodel:

{"hidden":false,"label":"Activity","name":"_actions","search":false,"width":94
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":false,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=DoklstlT","afterComplete":function (response, postdata, formid) { 
summarefresh($grid);
$grid[0].focus(); 
}
}}},

发布状态由布尔 Kinnitatud 列确定:

{"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["eq","ne"],"value":":Free;true:Yes;false:No"},"dataEvents":[{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},"",{"type":"click","fn":function(e) {dataChanged(e.target)}
},{"type":"blur","fn":function(e) {summarefresh()}
}]}],

在其他网格发布状态由未发布文档未填写的 Kinkuup 列确定:

{"template":DateTemplate
,"label":null,"name":"Kinkuup","index":"Kinkuup","editoptions":{"dataInit":null,"size":10,"readonly":"readonly","disabled":"disabled"},"searchoptions":{"dataInit":initDateSearch
,"size":10,"attr":{"size":10}},"width":0,"classes":null,"hidden":true,"dataEvents":[]}],

两列都可以在网格中隐藏或可见。取决于用户的喜好。

在 loadComplete 中为所有行创建自定义操作按钮:

       loadComplete: function() {
            var iCol = getColumnIndexByName($(this),'_actions');
            $(this).children("tbody").children("tr.jqgrow")
               .children("td:nth-child("+(iCol+1)+")")
               .each(function() {

                   $("<div>",
                     {
                         title: "Confirm (F2)",
                         mouseover: function() {
                             $(this).addClass('ui-state-hover');
                         },
                         mouseout: function() {
                             $(this).removeClass('ui-state-hover');
                         },
                         click: function(e) {
                             resetSelection();
                             idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
                             $("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
                             $('#grid_postbutton').click();
                         }
                     }
                ) 
                 .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"));
                           }
                       }
                    )
                     .addClass("ui-pg-div ui-inline-open")
                     .append('<span class="fa ui-state-default fa-folder-open-o"></span>')
                     .prependTo($(this).children("div"));

               }); 

之后,使用如何使用 Fontawesome 复选框格式化程序从免费 jqgrid 中的已发布行中删除操作按钮的代码有条件地删除按钮,有条件地禁用行编辑并更改背景。

   disableRows('Kinkuup', false);
   disableRows('Kinnitatud', true);


 var disableRows = function (rowName, isBoolean) {
    var iCol = getColumnIndexByName($grid, rowName),
              cRows = $grid[0].rows.length,
              iRow,
              row,
              className,
              isPosted,
              mycell,
              mycelldata,
              cm = $grid.jqGrid('getGridParam', 'colModel'),
              iActionsCol = getColumnIndexByName($grid, '_actions'), l,
              isPostedStr;
    l = cm.length;
    for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
        row = $grid[0].rows[iRow];
        className = row.className;
        if ($(row).hasClass('jqgrow')) {
            isPostedStr = $.unformat.call($grid[0], row.cells[iCol],
          { rowId: row.id, colModel: cm[iCol] }, iCol);
            //if (cm[iCol].convertOnSave) {
            //    isPosted = cm[iCol].convertOnSave.call(this, {
            //        newValue: isPostedStr,
            //        cm: cm[iCol],
            //        oldValue: isPostedStr,
            //        id: row.id,
            //        //item: $grid.jqGrid("getLocalRow", row.id),
            //        iCol: iCol
            //    });
            //}
            isPosted = isPostedStr !== "False" && isPostedStr.trim() !== "";

            if (isPosted) {
                if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
                    // todo: how to disable actions buttons and form editing:
                    row.className = className + ' jqgrid-postedrow not-editable-row';
                    $(row.cells[iActionsCol]).attr('editable', '0');
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide();
                }
            }
        }
    }
};

如何使用免费的 jqgrid 操作选项来简化此代码?

如何创建统一的方式来隐藏标准编辑和删除以及用户定义的操作按钮?即使自定义按钮创建可以使用回调有条件地禁用,隐藏标准按钮仍然需要 DOM 修改。也许以相同的方式定义所有操作按钮。也许它可以使用现有的 rowattr 或 cellattr 回调或引入新的回调来完成。

当前行设置为仅在下面的代码中使用

row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');

这样做是否合理,以便可以完全删除 diableRows ?也许可以使用 rowattr() 来代替它。

4

1 回答 1

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定义的动作名称positiononClick回调。要定义自定义按钮的图标和标题(工具提示),应指定靠近导航栏选项的选项。指定图标类的属性将从动作名称(openpost上面的示例中)构造,并且后缀"icon"将以相同的方式定义按钮的标题属性的值。

回调isDisplayButtons允许根据行的数据和 rowid 通知 jqGrid 按钮的显示。该options参数与您从自定义格式化程序中知道的选项相同。options.rowId例如是rowid。最新版本的免费 jqGrid(4.8 后)通过包含rowData. 可以看到第二个参数isDisplayButtons已经是 了rowDataoptions.rowDatarowData数据格式的主要区别。在使用 XML 输入rowData参数的情况下,输入数据的 XML 项。另一方面,选项options.rowData是具有属性的对象,如. 特别是在使用XML 数据的使用场景中,使用namecolModelloadonce: trueoptions.rowData有优势。在上面的演示中options.rowDatarowData是相同的。

回调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');"从指定的操作按钮中移除悬停效果 ( )。
于 2015-04-19T20:00:20.700 回答