Question

我本周第一次使用jqGrid，希望更新使用DataTables的现有网站。

除了查看分组属性时，一切都运行良好。分组结果仅使用当前页面的数据，而不是表格中的所有页面。

如何进行分组以便按字段分组显示所有组值而不仅仅显示当前页面的值？

我正在使用json源文件。

~~我尝试让代码示例在下面的小提琴中工作，但我之前没有这样做，也无法使用存储为公共保管箱链接的外部json文件。~~ 感谢@oleg，我有一个小提琴示例工作，它演示了这个问题，并且代码也已经使用列模板和jqGrid的免费版本进行了清理。

$(function() {
  "use strict";
  $.jgrid.defaults.guiStyle = "bootstrap";
  $.jgrid.defaults.iconSet = "fontAwesome";
  var template1 = {
    "groupOp": "AND",
    "rules": [{
      "field": "CustomerID",
      "op": "bw",
      "data": "W"
    }, {
      "field": "Freight",
      "op": "le",
      "data": "15"
    }]
  };

  var template2 = {
    "groupOp": "AND",
    "rules": [{
      "field": "e",
      "op": "bw",
      "data": "SEGU"
    }, {
      "field": "i",
      "op": "eq",
      "data": "2200"
    }]
  };

  $("#jqGrid").jqGrid({
      url: 'https://dl.dropboxusercontent.com/s/nh7rcwcimxljjr2/data.json',
      datatype: "json",
      cmTemplate: {
        align: "center",
        searchoptions: {
          searchOperMenu: true,
          sopt: ["bw", "ge", "le", "eq", "ne", "lt", "gt", "bn", "in", "ni", "ew", "en", "cn", "nc"]
        }
      },
      colModel: [{
        label: 'Position',
        name: 'p',
        width: 100
      }, {
        label: 'Equipment Nbr',
        key: true, // ??? only if e is unique in the input data
        name: 'e'
      }, {
        label: 'Length',
        name: 'l',
        width: 95
      }, {
        label: 'Height',
        name: 'ch',
        width: 90
      }, {
        label: 'ISO Code',
        name: 'i',
        width: 110
      }, {
        label: 'Carrier',
        name: 'c',
        width: 95
      }, {
        label: 'Bay',
        name: 'ba',
        width: 75
      }, {
        label: 'Row',
        name: 'ro',
        width: 75
      }, {
        label: 'Tier',
        name: 'ti',
        width: 75
      }, {
        label: 'Type',
        name: 'ty',
        width: 90
      }, {
        label: 'Status',
        name: 's',
        width: 90
      }, {
        label: 'Bundle?',
        name: 'b',
        width: 100
      }, {
        label: 'Attached Nbr',
        name: 'a',
      }, {
        label: 'Pos Format',
        name: 'pf',
        width: 125
      }, {
        label: 'VGM',
        name: 'wv',
        width: 100
      }, {
        label: 'Weight',
        name: 'w',
        width: 100
      }, {
        label: 'OOG',
        name: 'o',
        width: 75
      }, {
        label: 'Dimensions',
        name: 'dn',
        width: 200
      }, {
        label: 'Hazardous',
        name: 'hz',
        width: 120
      }, {
        label: 'IMDG Code',
        name: 'im',
        width: 125
      }, {
        label: 'UN Number',
        name: 'un',
        width: 125
      }, {
        label: 'Reefer',
        name: 'r',
        width: 90
      }, {
        label: 'Temp',
        name: 'tp',
      }, {
        label: 'Range',
        name: 'ra',
        width: 130
      }, {
        label: 'Description',
        name: 'd',
        width: 125
      }, {
        label: 'Handling',
        name: 'h',
        width: 125
      }, {
        label: 'Load Remarks',
        name: 'lr',
        width: 140
      }, {
        label: 'POL',
        name: 'pl',
        width: 80
      }, {
        label: 'POD',
        name: 'pd',
        width: 80
      }, {
        label: 'Optional POD',
        name: 'op',
        width: 140
      }, {
        label: 'Destination',
        name: 'de',
        width: 125
      }, {
        label: '1st POD',
        name: 'p1',
        width: 110
      }, {
        label: '2nd POD',
        name: 'p2',
        width: 110
      }, {
        label: '3rd POD',
        name: 'p3',
        width: 110
      }, {
        label: '4th POD',
        name: 'p4',
        width: 110
      }, {
        label: '5th POD',
        name: 'p5',
        width: 110
      }, {
        label: 'Transhipment Port',
        name: 'pt',
        width: 175
      }, {
        label: 'Next POD',
        name: 'np',
        width: 115
      }, {
        label: 'Ref Code',
        name: 'rc',
        width: 110
      }, {
        label: 'Ref',
        name: 'ref',
        width: 80
      }],
      viewrecords: true,
      autowidth: true,
      sortable: true,
      height: 400,
      rowNum: 17,
      shrinkToFit: false,
      loadonce: true,
      sortname: 'c',
      hoverrows: true,
      rownumbers: true,
      multiselect: true,
      multiPageSelection: true,
      pager: true,
      groupingView: {
        groupOrder: ["desc"],
        groupText: ["<b>{0}</b> - {1} record(s) found"],
        groupColumnShow: [true],
        groupCollapse: true
      },
      searching: {
        stringResult: true,
        searchOperators: true,
        multipleSearch: true,
        caption: "Advanced Query Builder",
        Find: " Filter",
        Reset: " Reset",
        multipleGroup: true,
        showQuery: true,
        //tmplNames: ["Template One", "SEGU 2200"],
        //tmplFilters: [template1, template2]
      }
    }).jqGrid('filterToolbar')
    .jqGrid("navGrid", {
      add: false,
      edit: false,
      del: false
    });

  $("#dynamicGrouping").change(function() {
    var groupingName = $(this).val();
    if (groupingName) {
      $("#jqGrid").jqGrid("setGridParam", {
          rowNum: 250
        })
        .jqGrid('groupingGroupBy', groupingName);
    } else {
      $("#jqGrid").jqGrid("setGridParam", {
          rowNum: 25
        })
        .jqGrid('groupingRemove');
    }
  });
  $("#getSelectedRows").click(function() {
    var selectedIDs = $("#jqGrid").getGridParam("selarrrow");
    alert(selectedIDs.length === 0 ? "No rows are selected" : selectedIDs.join());
  });
});

a.soptclass {
  border: 2px;
}
th {
  background-color: #aaa;
}
.two-col {
  overflow: hidden;
  /* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
  width 49%;
}
.two-col .col1 {
  float: left;
}
.two-col .col2 {
  float: right;
}
.two-col label {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div style="margin-left:20px; margin-right:20px;">

  <div class="two-col">
    <div class="col1">
      <div class="form-group">
        <label for="dynamicGrouping">Group Data By:</label>
        <select id="dynamicGrouping" class="form-control" style="width:auto;">
          <option value="">No Grouping</option>
          <option value="c">Carrier</option>
          <option value="l">Length</option>
          <option value="h">Height</option>
          <option value="i">ISO Code</option>
          <option value="ba">Bay</option>
          <option value="s">Status</option>
          <option value="o">Is OOG?</option>
          <option value="hz">Is Hazardous?</option>
          <option value="r">Is Reefer?</option>
        </select>
      </div>
    </div>

  </div>

  <table id="jqGrid"></table>
  <br>
  <input id="getSelectedRows" class="btn btn-default" type="button" value="Get Selected Rows" />
</div>

Answer 1

此功能使分组按照我需要的方式工作。

$("#dynamicGrouping").change(function() {
        var groupingName = $(this).val();
        if (groupingName) {
            $("#jqGrid").jqGrid("setGridParam", {rowNum: 9999})
            	.jqGrid('groupingGroupBy', groupingName);
        } else {
            $("#jqGrid").jqGrid("setGridParam", {rowNum: 250})
            	.jqGrid('groupingRemove');
            	$('#jqGrid').trigger( 'reloadGrid' );
        }
    });

jqGrid分组仅显示当前页面的结果

1 个答案: