jqGrid 怎么动态控制 multiselect 属性

Posted 2023-05-08

参考技术A 在jqGrid中设置multiselect: true可以实现全选的操作，但怎么设置被选中的checkbox里面的值呢，做法如下：
jQuery("#listTable").jqGrid(
url: 'queryList.do',
datatype: 'json',
colNames: ['','编号','姓名'],
colModel: [

name: 'MY_ID',
index: 'MY_ID',
sortable: false,
width: '0%',
hidden:true
,

name: 'MY_NO',
index:'MY_NO',
sortable: false,
align:'center',
width:'10%'
,

name: 'NAME',
index:'NAME',
sortable: false,
align:'center',
width:'10%'

],
page: 1,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#listPage',
multiselect: true,
sortname: 'MY_NO',
viewrecords: true,
sortorder: "desc",
jsonReader:
repeatitems: false
,
width: "100%",
height: '100%',
gridComplete: function()
var rowIds = jQuery("#listTable").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++)
var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k]);
var curChk = $("#"+rowIds[k]+"").find(":checkbox");
curChk.attr('name', 'checkboxname'); //给每一个checkbox赋名字
curChk.attr('value', curRowData['MY_ID']); //给checkbox赋值
curChk.attr('title', curRowData['NAME'] ); //给checkbox赋予额外的属性值
//curChk.attr('checked', 'true'); //设置所有checkbox被选中

//下面的代码顺序不能变(这是页面上所有行被真选中[所有行被黄色])
//$("#cb_listTable").attr("checked", true);
//$("#cb_listTable").click(); //input框
//$("#jqgh_listTable_cb").click(); //div标签
//$("#listTable_cb").click(); //th标签

);

加载完列表后获取被选中的checkbox的值及其属性值的做法如下：
var checkedVals = new Array();
var checkedTitles = new Array();
$(":checkbox[name=checkboxname][checked]").each(function()
checkedVals.push($(this).val());
checkedTitles.push($(this).attr("title"));
);
for(var p=0; p<checkedVals.length; p++)
alert(checkedVals[p]);
alert(checkedTitles[p]);


--------------------------------------------------------------------------------------------------
让查询列表中按指定条件被默认选中或灰掉checkbox的做法如下：
jQuery("#listTable").jqGrid(
url: 'queryList.do',
datatype: 'json',
colNames: ['','编号','姓名'],
colModel: [

name: 'MY_ID',
index: 'MY_ID',
sortable: false,
width: '0%',
hidden:true
,

name: 'MY_NO',
index:'MY_NO',
sortable: false,
align:'center',
width:'10%'
,

name: 'NAME',
index:'NAME',
sortable: false,
align:'center',
width:'10%'

],
page: 1,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#listPage',
multiselect: true,
multiboxonly: true,
sortname: 'MY_NO',
viewrecords: true,
sortorder: "desc",
jsonReader:
repeatitems: false
,
width: "100%",
height: '100%',
gridComplete: function()
var rowIds = jQuery("#listTable").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++)
var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k]);
if(curRowData.MY_NO == '123456')
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").val(curRowData.MY_ID);
if(curRowData.NAME=='shihuan')
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").attr("checked", true);

else
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").val(curRowData.MY_ID);
$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("checked",
true);
$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("disabled",
true);



onSelectAll:function(rowid, status) //rowid 数组
var ids = jQuery("#listTable").jqGrid('getDataIDs');
for (var i=0; i<ids.length; i++)
var cl = ids[i];
var curRowData = jQuery("#listTable").jqGrid('getRowData',cl);
var ckt = $("#listTable").find("input[id='jqg_" + cl + "']").attr("disabled");
if(ckt)
$("#listTable").find("input[id='jqg_" + cl + "']").attr("checked", true);


,
beforeSelectRow:function(rowid, e)
//alert(rowid); //rowid的值是checkbox的value值
return false;

);
--------------------------------------------------------------------------------------------------
jqGrid被重新载入的做法如下：
function gridReload()
jQuery("#listTable").jqGrid('setGridParam',
//url:'../../../com/shihuan/search.do',
//postData: transferFormElementsToObject('theForm'),
postData: "message":msval,
page:1
).trigger("reloadGrid");
本回答被提问者采纳

当multiselect选项设置为true时，为复选框列添加自定义格式化程序

我使用jqgrid作为网格与multiselect：true属性。我想根据某些行值删除某些行的复选框（禁用/不允许检查）。我想在复选框模型上添加格式化程序以删除该列上的复选框

我尝试在处理之前访问内部的colModel，但我还没有看到jqgrid自动添加列名'cb'。因此我无法在colmodel中为'cb'注入格式化程序。

jqGrid({
  multiselect: true,
  beforeSelectRow: function() {
     //called when tried to select one row.
     //its not called when selectAll is called.
  },
  onSelectAll: function(rowids, status) {
     //gets selected row ids when status is true
  }
})

1）我想根据行值操作复选框的选择。

2）如果列的行为isApplicable = false，则复选框不应该是（可见/可选）

jqgrid版本：5.3.0

答案

重要的是，您始终要包含您在问题文本中使用（可以使用）的jqGrid版本。重要的是要知道jqGrid的分支（free jqGrid，商业Guriddo jqGrid或版本<= 4.7的旧jqGrid）。

我开发的免费jqGrid fork包含一些可用于实现您的需求的选项/回调。

首先，您可以使用hasMultiselectCheckBox回调来通知jqGrid，其中应创建多行（基于isApplicable列的内容）multiselect复选框：

hasMultiselectCheckBox: : function (options) {
    // options is object like below
    // { rowid: rowid, iRow: irow, iCol: pos, data: item, checked: checked };
    // one can use options.data to examine the data of the current row

    return options.data != null && options.data.isApplicable;
}

即使行中没有复选框，也可以通过单击该行来选择行。 （顺便说一下，你可以使用multiselectPosition: "none"根本没有带多选复选框的列。）因此你应该另外添加beforeSelectRow回调，这会阻止选择isApplicable等于false的行：

beforeSelectRow: function (rowid) {
    var item = $(this).jqGrid("getLocalRow", rowid);

    if (item != null && !item.isApplicable) {
        return true;
    }
    return false;
},

或者，如果你使用最新版本的免费jqGrid，你可以使用rowattr将"jqgskipselect"类添加到行，这些行不应该是可选的：

rowattr: function (item) {
    if (!item.isApplicable) {
        return { "class": "jqgskipselect" };
    }
},

free jqGrid阻止选择具有类的行。在旧版本中，您可以使用禁用的类来阻止选择。在使用Bootstrap CSS的情况下使用jQuery UI CSS或"ui-state-disabled"类是"disabled"类。