0
Ich benutze jqGrid zum ersten Mal diese Woche, um eine bestehende Website mit DataTables zu aktualisieren.jqGrid Gruppierung zeigt nur Ergebnisse der aktuellen Seite
Alles funktioniert gut, außer wenn ich Gruppierungsattribute ansehe. Die gruppierten Ergebnisse verwenden nur die Daten für die aktuelle Seite, nicht alle Seiten in der Tabelle.
Wie mache ich es so, dass die Gruppierung nach einem Feld alle Gruppenwerte und nicht nur die Werte von der aktuellen Seite zeigt?
Ich benutze eine JSON-Quelldatei.
Ich habe versucht, das Codebeispiel in der folgenden Fiddle funktionieren, aber ich habe dies nicht zuvor getan und konnte es nicht mit einer externen JSON-Datei arbeiten als öffentliche Dropbox-Link gespeichert.
Dank @oleg, habe ich die Geige Beispiel funktioniert, die das Problem demonstriert, und der Code wurde auch bereinigt mit Spaltenvorlagen und die kostenlose Version von 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>
Sie können die JSON-Daten in JSFiddle Demo laden Sie die URL https://dl.dropboxusercontent.com/s/nh7rcwcimxljjr2/data.json. Ich empfehle Ihnen dringend, die Spaltenvorlage zu verwenden, um Ihren Code zu reduzieren und ihn lesbarer und wartbarer zu machen (siehe [die alte Antwort] (http://stackoverflow.com/a/6047856/315935)). Sie verwenden ** kommerzielle ** Guriddo jqGrid JS (siehe [die Preise] (http://guriddo.net/?page_id=103334)), aber es gibt eine andere Gabelung [free jqGrid] (https://github.com/free-jqgrid/jqGrid) auch (siehe [hier] (https://free-jqgrid.github.io/getting-started/index.html)): https://jsfiddle.net/OlegKi/5prjcgte/1/ – Oleg
@Oleg - Ich sehe, dass dieser Abschnitt des Codes fast das Problem behebt '$ (" # dynamicGrouping "). Change (function() { var GruppierungName = $ (this) .val(); if (GruppierungName) { $ ("# jqGrid") jqGrid ("setGridParam", {rowNum: 9999}). \t .jqGrid ('groupingGroupBy', groupingName); } else { $ ("# jqGrid") jqGrid (“. setGridParam ", {rowNum: 250}) \t .jqGrid ('GruppierungEntfernen'); } }); ' Aber wenn die Gruppierung entfernt wird, bleibt rowNum bei 9999 statt bis zu 250 zurück, so das macht den Tisch langsam – MarkT
@Oleg - ich dieses Problem behoben habe reloadGrid durch das Auslösen, wenn die Gruppierung zu entfernen . . '$ ("# dynamicGrouping") ändern (function() {var groupingName = $ (this) .val(); if (groupingName) { $ ("# jqGrid") jqGrid ("setGridParam". {rowNum: 9999}) \t .jqGrid ('groupingGroupBy', groupingName); } else { $ ("# jqGrid") jqGrid ("setGridParam", {rowNum: 250.}) \t .jqGrid (‘ groupingRemove '); \t $ (' # jqGrid '). trigger (' reloadGrid '); } }); ' – MarkT