根據一個值的值設置多個列

Question

我可以在單元格A上使用自定義格式器來修改單元格B嗎？

Answer 1

你原來的演示http://jsfiddle.net/fo3wb58w/12/顯示你想要的。一般而言，您已經使用一個格式化函數由多列共享。如果您點擊PLA，MCO，SUP或REX列的列標題，您將看不到任何反應。問題是：您使用datatype: "local"，它保存data和_index參數中的網格的內部數據。在排序和過濾/搜索本地數據時將使用data。格式化只是顯示相應數據的形式。因此，我建議您先填寫每列的列數據，然後再格式化數據。它將保存data參數中的正確數據，並允許對數據進行排序和過濾。

演示的最簡單的修改將包括從包括localReader

localReader: { 
    repeatitems: true, 
    cell: function (item) { 
     var rowData = $.parseJSON(item.data); 
     rowData.data = item.data; // include the original data too 
     return rowData; 
    } 
} 

和修改您的自定義格式爲以下，例如，

function format (cellvalue) { 
    if (cellvalue !== undefined) { 
     return '<div class="led-box"><div class="' + 
      (cellvalue !== null ? 'led-green' : 'led-red') + 
      '"></div></div>'; 
    } else { 
     return ''; 
    } 
} 

見http://jsfiddle.net/OlegKi/fo3wb58w/14/。現在我們將填寫數據，這允許我們在那裏排序。我在演示中使用最新版本的免費jqGrid，因爲您在原始演示中使用的jqGrid 4.6具有處理localReader（具有repeatitems: true）的錯誤。

更多深修改將是http://jsfiddle.net/OlegKi/fo3wb58w/15/

var mydata = [ 
     { data: "{\"pla\":1,\"mco\":null,\"sup\":null}" }, 
     { data: "{\"pla\":null,\"mco\":1,\"sup\":1}" }, 
     { data: "{\"pla\":1,\"rex\":null}" } 
    ], 
    sortRedGreen = function (value) { 
     switch (value) { 
      case 1: 
       return 2; 
      case null: 
       return 1; 
      default: 
       return 0; 
     } 
    }, 
    formatRedGreen = function (cellvalue) { 
     if (cellvalue !== undefined) { 
      return '<div class="led-box"><div class="' + 
       (cellvalue !== null ? 'led-green' : 'led-red') + 
       '"></div></div>'; 
     } else { 
      return ''; 
     } 
    }, 
    templateRedOrGreen = { 
     width: 48, 
     sorttype: sortRedGreen, 
     stype: "select", 
     searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"}, 
     formatter: formatRedGreen 
    }; 

$("#grid").jqGrid({ 
    data: mydata, 
    autoencode: true, 
    colModel: [ 
     { name: 'data', width: 250, search: false }, 
     { label: 'PLA', name: 'pla', template: templateRedOrGreen }, 
     { label: 'MCO', name: 'mco', template: templateRedOrGreen }, 
     { label: 'SUP', name: 'sup', template: templateRedOrGreen }, 
     { label: 'REX', name: 'rex', template: templateRedOrGreen } 
    ], 
    localReader: { 
     repeatitems: true, 
     cell: function (item) { 
      var rowData = $.parseJSON(item.data); 
      rowData.data = item.data; // include the original data too 
      return rowData; 
     } 
    }, 
    iconSet: "fontAwesome", 
    caption: "Stack Overflow Example" 
}).jqGrid("filterToolbar"); 

它使用自定義功能sorttype允許分選過程中重新排序的可能值undefined，null和1。它使用filterToolbar和

stype: "select", 
searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"} 

來簡化數據的過濾。