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

时间：2015-04-19 12:33:58

标签： jquery jqgrid free-jqgrid

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

colmodel for actions列：

{"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"));

               });

使用How to remove action buttons from posted rows in free jqgrid using Fontawesome checkbox formatter中的代码有条件地删除按钮后，有条件地禁用行编辑并更改背景。

   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 is et只能在下面的代码中使用

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

解决这个问题是否合理，以便完全删除diableRows？ 也许rowattr（）可以用来代替这个。

1 个答案:

答案 0 :(得分：1)

我在formatter: "actions"中进行了一些更改，以简化您的方案的实施。 The demo显示了如何使用新功能。它显示如下图所示的网格

enter image description here

该演示将colModel中的Action列定义为

{ 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"将以相同的方式定义title的值按钮的属性。

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

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

  • hidden: true - 表示在列中包含按钮但隐藏它。之后可以显示按钮。默认情况下会隐藏save和cancel按钮。
  • display: false - 表示根本不包含该按钮。例如，返回del: {display: false}与选项delbutton: false具有相同的效果，但del: {display: false}仅适用于一行。
  • noHovering: true可用于从指定的操作按钮中删除悬停效果（onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');"）。
相关问题
最新问题