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+’  ’;
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 = []