jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单-平芜编程栈

下面直接给你最实用、最常见的创建带复选框的树形菜单（Checkbox Tree）方法，jQuery EasyUI 的tree组件内置支持复选框，复制粘贴就能做出权限分配、部门多选、商品分类批量选择等场景，领导最爱的“勾选父节点自动勾选子节点、级联选择”效果全都有！

方法1：最简单最常用 - 基本带复选框的树形菜单（推荐现在就用这个，3秒出效果）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>EasyUI 带复选框的树形菜单</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><divstyle="margin:30px;"><divstyle="margin-bottom:15px;"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-ok"onclick="getChecked()">获取勾选节点</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"onclick="reloadTree()">刷新树</a><ahref="javascript:void(0)"class="easyui-linkbutton c3"iconCls="icon-sum"onclick="checkAll()">全选</a><ahref="javascript:void(0)"class="easyui-linkbutton c8"iconCls="icon-cancel"onclick="uncheckAll()">全不选</a></div><!-- 关键：checkbox:true 开启复选框 --><ulid="checkTree"class="easyui-tree"data-options="url:'get_menu_data.php', <!-- 可以是静态标记或异步加载 --> method:'get', animate:true, lines:true, checkbox:true, <!-- 开启所有节点复选框 --> cascadeCheck:true, <!-- 级联选择（父选子自动选） --> onlyLeafCheck:false <!-- false=所有节点都有复选框，true=只有叶子节点有 -->"><!-- 如果不想异步，可以直接用标记写静态树 --><!-- <li> <span>系统管理</span> <ul> <li><span>用户管理</span></li> <li><span>角色管理</span></li> <li><span>部门管理</span></li> </ul> </li> <li><span>商品管理</span></li> --></ul></div><script>// 获取所有勾选的节点（包括半选的父节点）functiongetChecked(){varnodes=$('#checkTree').tree('getChecked');// 完全勾选的节点varindeterminate=$('#checkTree').tree('getChecked','indeterminate');// 半选节点（子节点部分勾选）varallChecked=nodes.concat(indeterminate);vartexts=[];varids=[];$.each(allChecked,function(i,node){texts.push(node.text);if(node.id)ids.push(node.id);});$.messager.alert('勾选的节点','<b>节点文本：</b>'+texts.join(', ')+'<br><br><b>节点ID：</b>'+ids.join(', '),'info');}// 全选所有节点functioncheckAll(){varroots=$('#checkTree').tree('getRoots');$.each(roots,function(i,root){$('#checkTree').tree('check',root.target);});}// 全不选functionuncheckAll(){varroots=$('#checkTree').tree('getRoots');$.each(roots,function(i,root){$('#checkTree').tree('uncheck',root.target);});}// 刷新树functionreloadTree(){$('#checkTree').tree('reload');}// 监听勾选事件（可选）$('#checkTree').tree({onCheck:function(node,checked){console.log('节点 '+node.text+(checked?' 被勾选':' 被取消勾选'));},onLoadSuccess:function(node,data){// 可以在这里根据权限回显已勾选的节点// $('#checkTree').tree('check', $('#checkTree').tree('find', 11).target);}});</script></body></html>

效果亮点：

所有节点左边都有复选框
勾选父节点 → 子节点自动全选（cascadeCheck:true）
勾选所有子节点 → 父节点自动半选（灰色勾）
支持异步加载（url方式）
getChecked()返回完全勾选节点，getChecked('indeterminate')返回半选节点

方法2：只有叶子节点带复选框（经典权限分配场景）

data-options=" checkbox:true,onlyLeafCheck:true,<!--关键：只有叶子节点显示复选框-->cascadeCheck:true"

方法3：关闭级联选择（独立勾选，不影响父子）

cascadeCheck:false<!--父节点和子节点互不影响-->

方法4：动态设置节点勾选状态（权限回显超级常用）

// 勾选指定节点（根据id）varnode=$('#checkTree').tree('find',11);if(node){$('#checkTree').tree('check',node.target);}// 取消勾选$('#checkTree').tree('uncheck',node.target);// 半选状态（一般不用手动设，级联自动处理）$('#checkTree').tree('check',node.target);// 父节点子节点部分选时自动半选

方法5：结合对话框使用（权限分配弹窗）

<divid="permDlg"class="easyui-dialog"title="分配权限"style="width:400px;height:500px;"data-options="modal:true,closed:true,buttons:[{ text:'保存',iconCls:'icon-save',handler:function(){ var checked = $('#checkTree').tree('getChecked'); var permIds = []; $.each(checked, function(i,n){ permIds.push(n.id); }); // ajax提交 permIds 到服务器 alert('保存权限ID：'+ permIds.join(',')); $('#permDlg').dialog('close'); } },{ text:'取消',handler:function(){$('#permDlg').dialog('close');} }]"><ulid="checkTree"class="easyui-tree"data-options="url:'get_all_menu.php',checkbox:true,onlyLeafCheck:true,cascadeCheck:true,lines:true"></ul></div><!-- 打开权限分配窗口 --><ahref="javascript:void(0)"class="easyui-linkbutton"onclick="$('#permDlg').dialog('open')">分配权限</a>