背景:easyui版本 1.4.5 treegrid的cascadeCheck级联检查无法满足自己要求,逼于无奈,自己写了一个(ps:我的前端js也賊水的)
treeGridList.treegrid({ idField: "id", treeField: "sysResourcename", url: path + "/" + webMapping + "/" + mapping + "/queryListByPageAndBindRes/${param.roleId}", columns: columnsJson, pagination: true, toolbar: "#toolbar", //设置每页显示的记录数 pageSize: 100, pageList: [100], height: 721, // 动画 animate : true, checkbox : true, // 需设置 singleSelect:false, // 取消级联选择 有缺陷不能为true! cascadeCheck: false, // 自定义级联选择 onCheckNode : function(row,checked){ p = treeGridList.treegrid("getParent", row.id); // 调用者id var invokerId = row.id; // 调用者勾选状态 var invokerChecked = checked; while (p) { children = p.children; var flag = false; for (i = 0 ; i<children.length;i++) { // 父节点的其他子节点若勾选了(或者没有其他子节点) if(children[i].checked == true && children[i].id != invokerId){ flag = true; break; } } // 如果父节点的其他子节点也没有勾选,调用者节点为勾选 if (!flag && invokerChecked) { // 父节点没有勾选 if (!p.checked) { p.checked = true ; p._checked = true ; p.checkState = "checked"; // 复选框勾选 tck(p.id,1); } // 如果父节点的其他子节点勾选 }else if(flag){ p.checked = true ; p._checked = true ; p.checkState = "checked"; // 复选框勾选 tck(p.id,1); }else if (!flag && invokerChecked == false){// 如果父节点的其他子节点也没有勾选,调用者节点也不勾选 p.checked = false ; p._checked = false ; p.checkState = "unchecked"; // 复选框不勾选 tck(p.id,0); } invokerId = p.id; invokerChecked = p.checked; p = treeGridList.treegrid("getParent", p.id); } cs = treeGridList.treegrid("getChildren", row.id); for (i = 0 ; i<cs.length;i++){ cs[i].checked = checked; cs[i]._checked = checked; if(checked){ cs[i].checkState = "checked"; // 复选框勾选 tck(cs[i].id,1); }else{ cs[i].checkState = "unchecked"; // 复选框不勾选 tck(cs[i].id,0); } } }, onClickRow : function () { treeGridList.treegrid("clearSelections"); } }); //保存角色和资源的关系 bindResToRoleBtn.click(function () { //1.获取角色ID roleId = "${param.roleId}"; //2.获取选中的资源ID(n个) //2.1 获取所有的节点 resIdArray = []; nodes = treeGridList.treegrid("getChildren"); for (i = 0; i < nodes.length;i++){ value = nodes[i]; if (value.checked) { resIdArray.push(value.id); } }; var resIds = resIdArray.join(","); console.log(resIds); $.ajax({ type: "post", url: path + "/" + webMapping + "/" + mapping + "/bindResToRole", data: {roleId: roleId, resIds: resIds}, dataType: "text", success: function () { // 关闭父页面的窗口 // 在子页面操作父页面的元素:window.parent window.parent.bindResView.modal("hide"); window.parent.toastr.success("绑定成功!"); }, error: function (data) { window.parent.toastr.error("绑定失败:" + data); } }) })
/* 根据treeid 获取该id的checkbox对象 classStyle : 0 不勾选 1 勾选 */ function tck(id,classStyle){ ck = $("[node-id='"+id+"'] .tree-checkbox"); ck.removeClass("tree-checkbox0 tree-checkbox1"); ck.addClass("tree-checkbox"+classStyle); }