如何使用免費jqgrid屬性有條件地添加動作按鈕

Question

免費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列detemined：

{"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.className = className + ' jqgrid-postedrow not-editable-row'; 
$(row.cells[iActionsCol]).attr('editable', '0'); 

是否合理吳丹這讓diableRows可以徹底清除讀？ 也許rowattr（）可以用來代替這個。

Answer 1

我在formatter: "actions"中做了一些更改以簡化您的方案的實現。 The demo顯示如何使用新功能。它顯示了網格等上下面

演示畫面在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 } }; 
     } 
    } 
} 

Array custom定義的操作名稱，position和onClick回調。要定義圖標和自定義按鈕的標題（工具提示），應指定接近導航欄選項的選項。指定圖標類的屬性將通過動作名稱（上例中的open和post）和後綴"icon"以相同的方式構造爲按鈕的title屬性的值。

回調isDisplayButtons允許通知jqGrid基於行和rowid的數據顯示按鈕。 options參數與您從自定義格式化程序獲知的選項相同。例如options.rowId是rowid。最新版本的免費jqGrid（4.8版後）擴展了選項，其中包括rowData。您可以看到isDisplayButtons的第二個參數已經是rowData。 options.rowData和rowData之間的主要區別是數據的格式。在使用XML輸入rowData參數是輸入數據的XML項目的情況下。另一方面，選項options.rowData是對象，其性質爲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');"）。