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].isSelect

true ){
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 = []