jqgrid获取树形菜单所有的复选框勾选数据

版权声明：仅供参考，禁止抄袭。 https://blog.csdn.net/weixin_41633886/article/details/84320490

jqgrid获取树形菜单所有的复选框勾选数据

• jqgrid树形数据列表，代码如下：

function initTable() {
$("#tb1").jqGrid(“clearGridData”);
$("#tb1").jqGrid({
url:"/system/role/getRoleMenu",
datatype: “json”,
contentType : ‘application/x-www-form-urlencoded; charset=UTF-8’,
height: ‘auto’,
mtype : “POST”,
cellEdit:true,
width: $("#tbDiv").width()*0.999,
colNames:[‘id’,‘菜单’,‘按钮’],
colModel:[
{name : ‘id’,index : ‘id’,hidden:true,key:true},
{name : ‘menu’,index : ‘menu’,formatter : function(value, grid, rows, state){
var flag=’’;
if( rows.isSelecttrue ){
flag=‘checked’;
idArr.push( rows.id );
}
var row = JSON.stringify(rows).replace(/"/g, ‘"’);
return ‘<input type=“checkbox” ‘+flag+’ value=’+rows.id+’ onclick=“RelativeTreeGridCheck(’+row+’,this)”
/> ‘+rows.menu;
}},
{name : ‘buttonList’,index : ‘buttonList’, formatter : function(value, grid, rows, state){
var row = JSON.stringify(rows).replace(/"/g, ‘"’);
var checkBoxGroup=’’;
if( rows.buttonList!=null ){
for( var i=0;i<rows.buttonList.length;i++ ){
var flag=’’;
if( rows.buttonList[i].isSelecttrue ){
flag=‘checked’;
idArr.push( rows.buttonList[i].id );
}
checkBoxGroup+=’<input type=“checkbox” ‘+flag+’ value=’+rows.buttonList[i].id+’
onclick=“changeLimit(this)”/> ‘+rows.buttonList[i].menuButtonName+’ &nbsp’;
i>0?i%3==0?checkBoxGroup +=’
’:’’:’’;
}

           }   
           return checkBoxGroup; 
        }}
    ], 
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: "menu",
    treeIcons: {plus:'fa fa-caret-right',minus:'fa fa-caret-down',leaf:''},  
    sortname:"id",
    sortable:true,
    ExpandColClick: true,  
    multiselect: true,
    jsonReader: {
        repeatitems: false,
        root: "result", 
    },
    treeReader : {           //设置树形显示时4个关键字段对应的返回数据字段
        level_field: "level",      // 属性层级
        parent_id_field: "parent", //父级rowid 
        leaf_field: "isLeaf",      //是否还有子级菜单
        expanded_field: "expanded" //是否加载完毕
    },
    loadComplete :function(xhr){ 
       $("#loading").css('display','none');
    }
}).trigger('reloadGrid');   }

代码展示效果，如下图片：

• 获取所有当前列表复选框勾选的数据id

使用jquery属性值选择器

$("#tb1 input:checkbox:checked").each(function(){
         idArr.push(Number( $(this).val() ))
 });

钩中父节点，子节点也勾中。子节点勾中，父节点勾中

• 代码如下：

   function RelativeTreeGridCheck(row,That,e){
       idArr = [];
       var rowData = $('#tb1').jqGrid('getRowData', row.id,true);
       var childrenData = $('#tb1').jqGrid('getNodeChildren', rowData);
       var parentData = $('#tb1').jqGrid('getNodeParent', rowData);
       var rowChecked = $("#"+row.id).children().children().find("input").is(":checked");
       //  不为0，则为子节点，肯定有父节点，把父节点勾上
       if (childrenData.length != 0) {
           for (var i=0;i<childrenData.length;i++){
               if ( rowChecked == true ){
                   $("#"+childrenData[i].id).children().children().find("input").prop("checked",true);
               } else {
                   $("#"+childrenData[i].id).children().children().find("input").removeProp("checked");
               }
           }
       } else {
           // 为0 则为子节点， 如果有子勾选，没有则不操作
           row.level != 0?$("#"+parentData.id).children().children().find("input").prop("checked",true):'';
       }
   
       if (e && e.stopPropagation) {
           e.stopPropagation();
       } else if (window.event) {
           window.event.cancelBubble = true;
       }
   }
  

获取按钮复选框选中的数据的id，放到最外层的数组中

var idArr = []