在jqgrid中隱藏分組標題，如果它內部的每一行都被隱藏

Question

這是Oleg回答的this question的延續。

我有2個配置文件。

我比較他們的平等，所以我有兩個選項，如圖所示（單選按鈕）a。查看所有記錄，b。查看差異

選項a。 網格顯示所有行，只是變化是不相等的值（由JSON中的isEqual=false標識），它們具有不同的顏色。

在選項b。

如果相應的行不相等（在JSON isEqual=false標識）然後行顏色在網格改變，並且等於（由isEqual=true在JSON標識）行值不被顯示（因爲這是b選項。查看差異。所以現在在一些配置（json）產品（分組）具有所有行都相等（即，isEqual=true），其中所有的行都隱藏，我希望如果行內的所有行都隱藏，然後分組也不應該是可見的。

例如：if Product分組具有隱藏所有的行，然後連Product分組應該被隱藏

的Json

的

小部分

{ 
"response": [ 
{ 
    "id": "1", 
    "elementName": "A", 
    "category": "System", 
    "subCategory": "Environment", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "firstValue": "5242880", 
     "secondValue": "5242880" 
    } 
    ] 
}, 

{ 
    "id": "23", 
    "elementName": "TERM", 
    "category": "System", 
    "subCategory": "Environment", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "firstValue": "xterm", 
     "secondValue": "xterm" 
    } 
    ] 
}, 

{ 
    "id": "33", 
    "elementName": "bitmode", 
    "category": "Product", 
    "subCategory": "Product", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "bitmode", 
     "firstValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.so\u000a", 
     "secondValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.so\u000a" 
    } 
    ] 
}, 

{ 
    "id": "36", 
    "elementName": "coredump - hard", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "hard", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "37", 
    "elementName": "coredump - soft", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "soft", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "38", 
    "elementName": "cpuspeed", 
    "category": "System", 
    "subCategory": "System", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "cpuspeed", 
     "firstValue": " 4204 \u000a", 
     "secondValue": " 4204 \u000a" 
    } 
    ] 
}, 
{ 
    "id": "39", 
    "elementName": "data - hard", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "hard", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "40", 
    "elementName": "data - soft", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "soft", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
} 
{ 
    "id": "46", 
    "elementName": "machine", 
    "category": "System", 
    "subCategory": "System", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "machine", 
     "firstValue": "000CE082D900\u000a", 
     "secondValue": "000CE082D900\u000a" 
    } 
    ] 
}, 
{ 
    "id": "47", 
    "elementName": "maxfilesperproc", 
    "category": "System", 
    "subCategory": "Kernel Parameters", 
    "isEqual": false, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "maxfilesperproc", 
     "firstValue": " 8192\u000a", 
     "secondValue": " 2000\u000a" 
    } 
    ] 
}, 
{ 
    "id": "48", 
    "elementName": "maxthreadsperproc", 
    "category": "System", 
    "subCategory": "Kernel Parameters", 
    "isEqual": false, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "maxthreadsperproc" 
    } 
    ] 
}, 
{ 
    "id": "49", 
    "elementName": "memory - hard", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "hard", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "50", 
    "elementName": "memory - soft", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": false, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "soft", 
     "firstValue": "32768 ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "51", 
    "elementName": "mempagesize", 
    "category": "System", 
    "subCategory": "Kernel Parameters", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "mempagesize", 
     "firstValue": "4096\u000a", 
     "secondValue": "4096\u000a" 
    } 
    ] 
}, 
{ 
    "id": "52", 
    "elementName": "nofiles - hard", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "hard", 
     "firstValue": "unlimited ", 
     "secondValue": "unlimited " 
    } 
    ] 
}, 
{ 
    "id": "53", 
    "elementName": "nofiles - soft", 
    "category": "System", 
    "subCategory": "Userlimit", 
    "isEqual": false, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "soft", 
     "firstValue": "8192 ", 
     "secondValue": "2000 " 
    } 
    ] 
}, 
{ 
    "id": "54", 
    "elementName": "numberofcpu", 
    "category": "System", 
    "subCategory": "System", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "numberofcpu", 
     "firstValue": " 2\u000a", 
     "secondValue": " 2\u000a" 
    } 
    ] 
}, 
{ 
    "id": "55", 
    "elementName": "osname", 
    "category": "System", 
    "subCategory": "System", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "osname", 
     "firstValue": "AIX\u000a", 
     "secondValue": "AIX\u000a" 
    } 
    ] 
}, 
{ 
    "id": "56", 
    "elementName": "release", 
    "category": "System", 
    "subCategory": "System", 
    "isEqual": true, 
    "isPrasentinXml1": true, 
    "isPrasentinXml2": true, 
    "isPrasentinXml3": false, 
    "attribute": [ 
    { 
     "name": "release", 
     "firstValue": "1\u000a", 
     "secondValue": "1\u000a" 
    } 
    ] 
} 

], 
"xls_path": "\\csm\\files\\comparefiles\\compare_output.xls" 
} 

代碼

$('#compareContent').empty(); 
     $('<div id="compareParentDiv" width="100%">'+ 
      '<table id="list2" cellspacing="0" cellpadding="0"></table>'+ 
       '<div id="gridpager3"></div></div>') 
     .appendTo('#compareContent'); 

     $("#compareParentDiv").hide(); 

     var gridDiff = $("#list2"); 
     gridDiff.jqGrid({ 
      datastr: compareData, 
      datatype: "jsonstring", 
      colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'], 
      colModel: [ 
       { name: 'elementName', index: 'elementName', key: true, width: 120 }, 
       { name: 'subCategory', index: 'subCategory', width: 1 }, 
       { name: 'firstValue', index: 'firstValue', width: 310, jsonmap:'attribute.0.firstValue' }, 
       { name: 'secondValue', index: 'secondValue', width: 310,jsonmap:'attribute.0.secondValue' }, 
       { name: 'isEqual', index: 'isEqual', width: 1,hidden:true} 
      ], 
      pager: '#gridpager3', 
      rowNum:50, 
      scrollOffset:1, 
      //viewrecords: true, 
      jsonReader: { 
       repeatitems: false, 
       page: function(){return 1;}, 
       root: "response" 
      }, 
      //rownumbers: true, 

      height: '320', 
      autowidth:true, 
      grouping: true, 

      groupingView: { 
       groupField: ['subCategory'], 
       groupOrder: ['desc'], 
       groupDataSorted : true, 
       groupColumnShow: [false], 
       //groupCollapse: true, 
       groupText: ['<b>{0}</b>'] 

      }, 

      loadComplete: function() { 
       if (this.p.datatype !== 'local') { 
        setTimeout(function() { 
         gridDiff.trigger('reloadGrid'); 
        }, 0); 
       } else { 
        $("#compareParentDiv").show(); 
       } 

       var i, names=this.p.groupingView.sortnames[0], l = names.length; 
       data = this.p.data, rows = this.rows, item; 

       for (i=0;i<l;i++) { 
        if ($.inArray(names[i],grouping) >= 0) { 
         $(this).jqGrid('groupingToggle',this.id+"ghead_"+i); 

         $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){ 
          var len = data.length, iRow; 
          for (iRow=0;iRow<len;iRow++) { 
           item = data[iRow]; 
           if (item.isEqual) { 
            $(rows.namedItem(item._id_)).hide(); 
           } 
          } 
         }); 

        } else { 
         // hide the grouping row 
         $('#'+this.id+"ghead_"+i).hide(); 
        } 
        //console.info($('#'+this.id+"ghead_"+i)); 
       } 

       /*var i, names=this.p.groupingView.sortnames[0], l = names.length, 
       data = this.p.data, rows = this.rows, item; 
       for (i=0;i<l;i++) { 
        if (names[i]==='Environment') { 
         $(this).jqGrid('groupingToggle',this.id+"ghead_"+i); 
         $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){ 
          var len = data.length, iRow; 
          for (iRow=0;iRow<len;iRow++) { 
           item = data[iRow]; 
           if (item.isEqual) { 
            $(rows.namedItem(item._id_)).hide(); 
           } 
          } 
         }); 
        } else { 
         // hide the grouping row 
         $('#'+this.id+"ghead_"+i).hide(); 
        } 
       }*/ 

       var i, names=this.p.groupingView.sortnames[0], l = names.length, 
       data = this.p.data, rows = this.rows, item; 

       l = data.length; 
       for (i=0;i<l;i++) { 
        item = data[i]; 
        if (!item.isEqual) { 
         $(rows.namedItem(item._id_)) 
          .css({ 
           "background-color": "#FFE3EA", 
           "background-image": "none" 
          }); 
        } else { 
         $(rows.namedItem(item._id_)).hide(); 
        } 
       } 
      } 
     }); 
     gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: false }); 
     gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', 
      onClickButton:function(){ 
       gridDiff[0].toggleToolbar(); 
      } 
     }); 
     gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', 
      onClickButton:function(){ 
       gridDiff[0].clearToolbar(); 
      } 
     }); 
     gridDiff.jqGrid('filterToolbar', 
       {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

Answer 1

我建議你改變一點點的方式，其中，網格行列舉在loadComplete處理程序中。我建議以here所述的方式枚舉所有網格行。

具有'jqgfirstrow'類的行將僅用於設置列的寬度。它應該被跳過。

具有'jqgroup'類的行是分組行。行的ID將根據網格標識（<table>元素的標識），文本'ghead_'以及網格參數groupingView.sortnames[0]中的索引來解釋，它們表示組的排序名稱。

典型的數據行是具有'jqgrow'類的網格行。您應該檢查行數據的isEqual屬性，並隱藏或突出顯示行。

你會發現演示here這顯示出下列結果：

的loadComplete處理器的新版本的代碼我填寫下面另外

loadComplete: function() { 
    var p = this.p, data = p.data, indexes = p._index, 
     names = p.groupingView.sortnames[0], iName, idParts, 
     rows = this.rows, cRows = rows.length, iRow, $row, rowData, 
     previousGrouppigRow = null, hasHighlitedItem = false, 
     lastCollaped = false, 
     onGroupingExpand = function() { 
      var $curRow = $(this).closest("tr.jqgroup").next(); 
      while ($curRow.hasClass('jqgrow')) { 
       rowData = data[indexes[$curRow[0].id]]; 
       if (rowData.isEqual) { 
        $curRow.hide(); 
       } 
       $curRow = $curRow.next(); 
      } 
     }; 

    if (this.p.datatype !== 'local') { 
     // reload grid to sort it 
     setTimeout(function() { 
      gridDiff.trigger('reloadGrid'); 
     }, 0); 
     return; //we need not do anything now 
    } else { 
     parentContainer.show(); 
    } 

    for (iRow = 0; iRow < cRows; iRow += 1) { 
     $row = $(rows[iRow]); 
     if ($row.hasClass('jqgroup')) { 
      $row.find("span.ui-icon").click(onGroupingExpand); 
      idParts = $row[0].id.split('ghead_'); 
      iName = idParts[idParts.length-1]; 
      if ($.inArray(names[iName], grouping) >= 0) { 
       // collape the grouping rows from the "grouping" array 
       gridDiff.jqGrid('groupingToggle', $row[0].id); 
       lastCollaped = true; 
      } 
      // the row is the group header 
      if (previousGrouppigRow !== null && hasHighlitedItem === false) { 
       // the previous group has no highlited items 
       if (!lastCollaped) { 
        // collapse the group only if it is not already collaped 
        gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id); 
       } 
       previousGrouppigRow.hide(); 
      } 
      previousGrouppigRow = $row; 
      hasHighlitedItem = false; 
     } else if ($row.hasClass('jqgrow')) { 
      rowData = data[indexes[$row[0].id]]; 
      if (!rowData.isEqual) { 
       hasHighlitedItem = true; 
       $row.css({ 
        "background-color": "#FFE3EA", 
        "background-image": "none" 
       }); 
      } else { 
       $row.hide(); 
      } 
     } 
    } 
    if (previousGrouppigRow !== null && hasHighlitedItem === false) { 
     // the previous grout has no highlited items 
     if (!lastCollaped) { 
      gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id); 
     } 
     previousGrouppigRow.hide(); 
    } 
} 

我建議你還來使用我在my previous answer末尾描述的建議。