jqGrid中多选

本文介绍如何使用jqGrid实现全选功能,并详细解释了如何为复选框设置值、名称及额外属性,同时提供了按特定条件默认选中或禁用复选框的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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");
}
 
摘自 http://blog.sina.com.cn/s/blog_4f925fc30102e27f.html。方便以后自己找资料

转载于:https://www.cnblogs.com/josechuanmin/archive/2013/05/19/3087138.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值