news 2026/5/15 6:04:29

jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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>

你现在直接复制方法1的完整代码运行,就能看到一个超级专业的带复选框树形菜单了!
特别适合:角色权限分配、多选部门、批量选择分类等场景。

想要我给你一个完整的权限分配示例(异步加载菜单树 + 回显已分配权限 + 保存到服务器)?
或者你告诉我你的具体需求(比如“只有叶子节点复选框”“不级联”“带搜索过滤”),我2分钟发你精准代码,复制就能跑!

快说说你想怎么用,我手把手帮你搞定,5分钟内看到完美带复选框的树形菜单!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/11 13:58:57

jQuery EasyUI 树形菜单 - 创建基础树形网格

jQuery EasyUI 树形网格&#xff08;TreeGrid&#xff09; - 创建基础树形网格 jQuery EasyUI 的 TreeGrid&#xff08;树形网格&#xff09;是基于 DataGrid 扩展的组件&#xff0c;用于显示带有层级关系的表格数据。它结合了树视图&#xff08;Tree&#xff09;和可编辑网格…

作者头像 李华
网站建设 2026/5/7 17:38:35

jQuery EasyUI 树形菜单 - 树形网格添加分页

jQuery EasyUI 树形网格&#xff08;TreeGrid&#xff09; - 添加分页 jQuery EasyUI 的 TreeGrid 继承自 DataGrid&#xff0c;因此支持 pagination: true 属性来启用分页功能。但由于 TreeGrid 是层级结构&#xff0c;分页通常只针对顶级根节点进行&#xff08;子节点通过动…

作者头像 李华
网站建设 2026/5/15 2:25:49

Kotaemon如何应对文化差异?本地化适配策略分析

Kotaemon如何应对文化差异&#xff1f;本地化适配策略分析 在智能客服系统走向全球的今天&#xff0c;一个看似简单的用户提问——“我能不能退货&#xff1f;”——背后可能隐藏着巨大的文化鸿沟。在日本&#xff0c;这或许是一句含蓄的情绪表达&#xff1b;在德国&#xff0c…

作者头像 李华
网站建设 2026/5/14 11:16:56

IM即时通讯系统:安全可控、功能全面的社交解决方案全解析

在数字化社交时代&#xff0c;即时通讯&#xff08;IM&#xff09;系统已成为社交平台的核心基础设施。本文将深入解析开源IM系统的核心优势与功能亮点&#xff0c;为开发者提供一套安全可控、功能全面的社交解决方案。一、核心优势&#xff1a;安全与性能的双重保障1. 独立数据…

作者头像 李华
网站建设 2026/5/13 5:36:00

扭蛋机小程序开发制作!

扭蛋机便是盲盒的另一种形式&#xff0c;目前国内消费市场主要集中在互联网上&#xff0c;玩家在手机上就可以体验抽盲盒的乐趣&#xff0c;因此线上盲盒扭蛋机小程序的出现也是顺应市场发展。扭蛋机里面的盲盒商品一般是手办等&#xff0c;盲盒种类繁多&#xff0c;玩家可以抽…

作者头像 李华
网站建设 2026/5/11 13:39:46

英文论文写作工具推荐:8大AI+翻译润色排名+

英文论文写作工具推荐&#xff1a;8大AI翻译润色排名 &#xfffd;&#xfffd; 8款英文论文AI写作工具核心对比 工具名称 核心功能 处理速度 适合场景 独特优势 aibiye 降AIGC率查重 20分钟 学术论文优化 适配知网/维普检测规则 aicheck AIGC检测降重 20分钟 AI…

作者头像 李华