当前位置： 移动技术网 > IT编程>开发语言>Jquery > jqGrid中multiselect: true 操作checkbox

jqGrid中multiselect: true 操作checkbox

2019年06月24日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网