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

免费jqgrid显示订单。 张贴的订单应该有黄色背景，只有打开行动button。 未发布的订单有白色背景，标准删除和自定义后操作button。

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":[]}], 

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

自定义操作button在所有行的loadComplete中创build：

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

在使用Fontawesomecheckbox格式化程序的免费jqgrid中如何从发布的行中删除操作button的代码有条件地删除button之后 ，行编辑被有条件地禁用和背景更改。

  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动作选项来简化这个代码？

如何创build统一的方式来隐藏标准的编辑和删除以及用户定义的操作button？ 隐藏标准button仍然需要DOM修改，即使自定义button创build可以使用callback有条件地禁用。 也许以相同的方式定义所有的动作button。 也许它可以使用现有的rowattr或cellattrcallback或引入新的。

目前行只能在下面的代码中使用

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

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

Answer 1

我对formatter: "actions"做了一些改变formatter: "actions"以简化你的scheme的实施。 演示显示如何使用新function。 它显示如下图所示的网格

演示在colModel定义了Action列

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

它使用actionsNavOptions （可以使用formatoptions ）来configurationformatter: "actions"的选项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和onClickcallback。 要定义图标和自定义button的标题（工具提示），应该指定接近导航栏选项的选项。 指定图标类的属性将由动作名称（在上面的示例中open和post ）构造，后缀"icon"以相同的方式定义button的title属性的值。

callback函数isDisplayButtons允许通知jqGrid基于行和rowid的数据显示button。 options参数是您从自定义格式化程序中了解的相同选项。 options.rowId是rowid的例子。 免费jqGrid的最新版本（4.8后）通过包含rowData扩展了选项。 你可以看到isDisplayButtons的第二个参数已经是rowData 。 options.rowData和rowData之间的主要区别是数据的格式。 在使用XMLinput的情况下rowData参数是input数据的XML项目。 另一方面，选项options.rowData是具有像colModel name属性这样的属性的对象 。 特别是在使用loadonce: true XML数据的情况下， options.rowData的使用具有优势。 在上面的演示中， options.rowData和rowData是相同的。

callbackisDisplayButtons应该返回与动作名称相同的属性{ post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} } 。 每个这样的对象的属性都可以

• hidden: true – 意味着包括列中的button，但使其隐藏。 稍后可以显示button。 save和cancelbutton默认是隐藏的。
• display: false – 表示根本不包含button。 例如返回del: {display: false}的效果与delbutton: false类似，但del: {display: false}只能用于一行。
• noHovering: true可以用来消除hover效果（ onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');" ）从指定的操作button。