What is the best way to programmatically select all rows in a jqGrid that is set to multiselect?
The code could loop through all of the rows one-at-a-time and select each one, but then the checkbox in the grid header is not checked. I was thinking about just triggering the header row checkbox's clicked event, but that would make assumptions about the underlying jqGrid implementation. There must be a better way...
Thanks in advanc开发者_运维知识库e!
If you select all of the rows in a multiselect jqGrid by clicking on each one manually, the checkbox in the header doesn't get checked, so I wouldn't necessarily expect it to happen when you do it programmatically (if you use setSelected(rowid, true) for each row, it's the equivalent of clicking on each, as the "true" parameter indicates that the clicked event should be fired for each one).
So in fact, if you want all of them to get checked AND want the checkbox in the header to be checked, triggering the clicked event may be your best bet. If you dig into the source code and look at what happens when you click the checkbox, it is in fact just looping through all of the rows and setting each as selected, so I don't think you're going to do a lot better.
I think nothing is impossible,This is alternative solution. You can loop through all of the rows one-at-a-time and select each one, then the checkbox in the grid header is checked by manually. But checkbox in the grid header is unselected when at-least one check box is unselected.
colNames : [ ,'<input type="checkbox" id="cbox" onclick="UI_PaxCheckin.checkBox(this,event)" />',..]
UI_PaxCheckin.checkBox = function(obj,e) {
e = e||event;
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
var grid = $('#jqGridPax');
if(obj.checked == true){
UI_PaxCheckin.multiSelectedFlightRowID = [];
}
for ( var p = 0; p < grid[0].rows.length -1 ; p++) {
$('#chkIsSelected_' + p).prop('checked', obj.checked);
//manual checkbox click event function call
}
$('#cbox').prop('checked', obj.checked);}
Oddly, there doesn't seem to be such a function in the API. Programmatically selecting the "select all" checkbox will trigger the select all code (which you can find in grid.base.js, starting at line 1053. Unlike selecting the individual rows manually, this will correctly fire the onSelectAll event. So, yes, this makes assumptions, but not as many as the other way. :/
Yeah, it's true that this is not a very conventional approach, and is basically what you said you considered doing, but I found this was the easiest way to get all the rows selected and also have the header checkbox selected:
var grid = $("#my_grid");
grid.resetSelection();
$('#cb_my_grid').click();
var ids = grid.getDataIDs();
for (var i=0, il=ids.length; i < il; i++ )
grid.setSelection(ids[i], false);
I suppose the rows don't get selected when the header checkbox is programmatically clicked because of the jqGrid underlying implementation, like you said? I don't know the way it works underneath, but this seems to work for me on top for now.
The main reason I want to make sure the header checkbox gets selected in my grids is so the user can subconsciously determine that yes, all the rows in the grid are definitely selected right now (including ones not visible below the current scroll view), and not have to click the header checkbox just to make sure.
@Craig -- I'll have to try your method, it seems simpler and more reasonable
Programmatically selecting the "select all" checkbox NOT ALWAYS trigger the select all code. We need to set "checked" attribute before, thus correct branch of the select all method will be chosen. Here is a code I've used with grid version 3.8.1:
$("#cb_my_grid").attr("checked", true);
$("#cb_my_grid").trigger('click');
$("#cb_my_grid").attr("checked", true);
Far better solution that actually clicks the select all checkbox
gridComplete: function(){
$(this).jqGrid('resetSelection');
$(this).closest(".ui-jqgrid").find(".ui-th-column:first .cbox").click();
}
or if your grid ID is "mygrid"
$("#mygrid").jqGrid('resetSelection');
$("#cb_mygrid").click();
精彩评论