以编程方式选择 jqGrid 中的所有行？答案

【问题标题】：Programmatically select all rows in a jqGrid?以编程方式选择 jqGrid 中的所有行？
【发布时间】：2009-10-07 15:03:04
【问题描述】：

在设置为多选的 jqGrid 中以编程方式选择所有行的最佳方法是什么？

代码可以一次循环遍历所有行并选择每一行，但是网格标题中的复选框未被选中。我正在考虑只触发标题行复选框的单击事件，但这将对底层 jqGrid 实现做出假设。一定有更好的办法……

提前致谢！

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

如果您通过手动单击每一行来选择多选 jqGrid 中的所有行，则标题中的复选框不会被选中，因此我不一定希望它在您以编程方式执行时发生（如果您对每一行使用 setSelected(rowid, true)，相当于点击每一行，因为“true”参数表示每行都应该触发 clicked 事件。

所以事实上，如果您希望所有这些都被选中并且希望标题中的复选框被选中，那么触发点击事件可能是您最好的选择。如果您深入研究源代码并查看单击复选框时会发生什么，实际上它只是遍历所有行并将每个行设置为选中状态，所以我认为您不会做得更好.

【讨论】：

感谢您的宝贵时间，看来我会采用这种方法。

【解决方案2】：

我认为没有什么是不可能的，这是替代解决方案。您可以一次遍历所有行并选择每一行，然后手动检查网格标题中的复选框。但是当至少一个复选框未选中时，网格标题中的复选框未选中。

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);}

【讨论】：

不过，您似乎在用输入类型重新发明轮子。为什么不直接使用网格中的复选框？
我已经尝试了多选选项和手动多选。我在多选选项中遇到了一些困难。例如：未选中触发单击的事件标题复选框，很难针对我的上下文优化多选选项（我想在选中复选框时调用某些事件等）

【解决方案3】：

奇怪的是，API 中似乎没有这样的功能。以编程方式选择“全选”复选框将触发全选代码（您可以在 grid.base.js 中找到，从第 1053 行开始。与手动选择各个行不同，这将正确触发 onSelectAll 事件。所以，是的，这做出了假设，但没有其他方式那么多。：/

【讨论】：

你会认为这样一个函数将成为 API 的一部分——我想这是对未来版本的建议。

【解决方案4】：

是的，这确实不是一种非常传统的方法，基本上是你所说的你考虑做的，但我发现这是选择所有行并选中标题复选框的最简单方法：

  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);

我想像你说的那样，由于 jqGrid 底层实现，当以编程方式单击标题复选框时，行不会被选中？我不知道它在下面的工作方式，但这似乎对我来说目前在上面工作。

我想确保在我的网格中选中标题复选框的主要原因是，用户可以下意识地确定是的，网格中的所有行现在肯定被选中（包括在当前滚动视图下方不可见的行)，而不必单击标题复选框来确保。

@Craig -- 我得试试你的方法，看起来更简单更合理

【讨论】：

【解决方案5】：

以编程方式选择“全选”复选框并不总是触发全选代码。我们需要在之前设置“checked”属性，从而选择全选方法的正确分支。这是我在网格版本 3.8.1 中使用的代码：

$("#cb_my_grid").attr("checked", true);
$("#cb_my_grid").trigger('click');
$("#cb_my_grid").attr("checked", true);

【讨论】：

应该使用.prop("checked", true)而不是.attr("checked", true)

【解决方案6】：

实际点击全选复选框的更好解决方案

gridComplete: function(){
    $(this).jqGrid('resetSelection');
    $(this).closest(".ui-jqgrid").find(".ui-th-column:first .cbox").click();
}

或者如果您的网格 ID 是“mygrid”

$("#mygrid").jqGrid('resetSelection');
$("#cb_mygrid").click();

【讨论】：