Get all row IDs in jqGrid
How can one get the ID's of every row in a grid, even across pages?
ge开发者_运维技巧tDataIDs
and getRowData
only gives the ID's of the current page.
Thanks!
It is possible only if you have local grid (datatype:'local'
or having loadonce:true
). In the case all data inclusive ids for all pages are already locally. In the case you can use _index
parameter, which will be used typically together with another more known parameter data
. With
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
you will get the _index
parameter. It is an object which has as the properties all ids of grid. So you can enumerate the ids with
var id;
for (id in idToDataIndex) {
if (idToDataIndex.hasOwnProperty(id)) {
// id is the rowid.
// to get the data you can use
// mydata[idToDataIndex[id]] where
// var mydata = $("#list").jqGrid('getGridParam','data');
}
}
In later versions of jqGrid they came out with a function that suits this situation better as it will consider any toolbar filtering that may be in place. See Oleg's example here. Thus, if you have a jqGrid (loadonce:true and/or datatype:local) the following will return all row ids (displayed in current page and beyond) which match the current filtering.
var allIdsWithFiltering = grid.jqGrid('getGridParam', 'lastSelectedData');
This returns a plain array, unlike the original answer, which returns an object with properties that must be enumerated.
There is another way of getting this data in older versions on jqgrid
:
gRowNum = grid.jqGrid('getGridParam','rowNum');
grid.setGridParam({rowNum: '9999'});
grid.trigger("reloadGrid");
myList = grid.jqGrid('getDataIDs');
grid.setGridParam({rowNum: gRowNum});
grid.trigger("reloadGrid");
Considering that Object.keys is supported since IE9, if you only need the IDs, nowadays I would use:
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
var ids = Object.keys(idToDataIndex);
$(function () {
"use strict";
$("#list").jqGrid({
colModel: [
{ name: "name", label: "Client", width: 53 },
{ name: "invdate", label: "Date", width: 90, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
searchoptions: { sopt: ["eq"] } },
{ name: "amount", label: "Amount", width: 65, template: "number" },
{ name: "tax", label: "Tax", width: 41, template: "number" },
{ name: "total", label: "Total", width: 51, template: "number" },
{ name: "closed", label: "Closed", width: 59, template: "booleanCheckbox", firstsortorder: "desc" },
{ name: "ship_via", label: "Shipped via", width: 87, align: "center",
formatter: "select",
formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" },
stype: "select",
searchoptions: { value: ":Any;FE:FedEx;TN:TNT;DH:DHL" } }
],
data: [
{ id: "10", invdate: "2015-10-01", name: "test", amount: "" },
{ id: "20", invdate: "2015-09-01", name: "test2", amount: "300.00", tax: "20.00", closed: false, ship_via: "DH", total: "320.00" },
{ id: "30", invdate: "2015-09-01", name: "test3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2015-10-04", name: "test4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2015-10-31", name: "test5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2015-09-06", name: "test6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2015-10-04", name: "test7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2015-10-03", name: "test8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2015-09-01", name: "test9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2015-09-08", name: "test10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2015-09-08", name: "test11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2015-09-10", name: "test12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
iconSet: "fontAwesome",
idPrefix: "",
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
threeStateSort: true,
sortIconsBeforeText: true,
headertitles: true,
toppager: true,
pager: true,
rowNum: 5,
viewrecords: true,
searching: {
defaultSearch: "cn"
},
caption: "The grid, which demonstrates formatters, templates and the pager"
}).jqGrid("filterToolbar");
});
$('#btnGetAllIDs').click(function() {
var idToDataIndex = $("#list").jqGrid('getGridParam','_index');
var ids = Object.keys(idToDataIndex);
console.log(ids);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<div style="margin:5px;">
<table id="list"></table>
<button id="btnGetAllIDs">GetAllIDs</button>
</div>
But please also read and upvote Oleg's answer because it has the conditions in which it's possible to do this and the important information.
Warning for jqgrid version < 4.7:
If you are dynamically removing rows from the grid (delRowData
), the _index
will still have the deleted rows. You may fix that by fixing "refreshIndex" in jqgrid.base.js
(as they did in 4.7).
精彩评论