相信很多人都在为无法默认选中树节点而苦恼,弄出来了特意分享出来
public Object Menu(String roleId, HttpServletRequest req) {
List<SysMenu> list = menuService.query(Cnd.orderBy().asc("location").asc("path"));
List<SysMenu> datas = roleService.getDatas();
List<NutMap> menus = new ArrayList<>();
List<SysMenu> roleMenus = roleService.getMenusAndButtons(roleId);//当前角色的权限
for (SysMenu menu : list) {
NutMap map = new NutMap();
for (SysMenu bt : datas) {
if (menu.getPath().equals(bt.getPath().substring(0, bt.getPath().length() - 4))) {
menu.setHasChildren(true);
break;
}
}
for(SysMenu rm:roleMenus){
if (menu.getId().equals(rm.getId())){
map.put("state", new State(false,false,true));//是否允许编辑-是否展开-是否选中树节点
break;
}
}
map.put("id", menu.getId());
map.put("text", menu.getName());
map.put("icon", Strings.sBlank(menu.getIcon()));
map.put("parent", "".equals(Strings.sNull(menu.getParentId())) ? "#" : menu.getParentId());
map.put("data", menu.getHref());
menus.add(map);
}
req.setAttribute("menus", Json.toJson(menus));
return Strings.isBlank(roleId) ? null : roleService.fetch(roleId);
}
public class State { private boolean disabled; private boolean opened; private boolean selected; /** * 树节点勾选 * @param disabled 编辑 * @param opened 是否展开 * @param selected 是否选中 */ public State(boolean disabled,boolean opened,boolean selected){ this.disabled=disabled; this.opened=opened; this.selected=selected; } public boolean isDisabled() { return disabled; } public void setDisabled(boolean disabled) { this.disabled = disabled; } public boolean isOpened() { return opened; } public void setOpened(boolean opened) { this.opened = opened; } public boolean isSelected() { return selected; } public void setSelected(boolean selected) { this.selected = selected; } }
<header class="header navbar bg-white shadow"> </header> <div class="content-wrap"> <div class="wrapper"> <div class="row mb15"> <div class="col-lg-12"> <form id="addRoleForm" class="form-horizontal stepy" method="post" action="url"> <input type="hidden" id="menuIds" name="menuIds"/> <div class="form-group no-b"> <div class="col-sm-8"> <div class="panel"> <div class="panel-heading no-b"> <h5>选择<b>菜单</b></h5> </div> <div class="panel-body"> <div id="jsTreeMenu"></div> </div> </div> </div> <div class="col-sm-4"> <div class="panel"> <div class="panel-heading no-b"> <h5>菜单<b>描述</b></h5> </div> <div id="menuDescript" class="panel-body"> <div class='alert alert-info'>请勾选每一个需要分配的菜单</div> </div> </div> </div> </div> </form> </div> </div> </div> </div> <script language="JavaScript"> var jsTreeMenu; $(function () { jsTreeMenu = $("#jsTreeMenu").jstree({ plugins: ["wholerow", "checkbox"], core: { data: ${menus!} }, checkbox: { three_state: false, cascade: 'down' } }).on("hover_node.jstree", function (e, data) { if (data.node.data) $("#menuDescript").text(data.node.data); }).on("dehover_node.jstree", function (e, data) { $("#menuDescript").html("<div class='alert alert-info'>请勾选每一个需要分配的菜单</div>");//清空菜单描述 }).bind("loaded.jstree", function (e, data) { //立即加载树下所有节点 }); }); function each(node, tree, nodes) { var p = tree.get_parent(node); if (p.length > 1) { if (nodes&&p&&nodes.indexOf(p)<0) nodes.push(p); each(p, tree, nodes); } } function complete() { var tree = $.jstree.reference("#jsTreeMenu"); var ids = tree.get_selected(); //查询所选节点的所有父节点 for (var i = 0; i < ids.length; i++) { var node = ids[i]; each(node, tree, ids); } if (ids.length > 0) { $.post("url", {menuIds: ids.toString(), roleid: '${obj.id}'}, function (data) { if (data.code == 0) { Toast.success(data.msg); setTimeout(function () { $("#goback").trigger("click"); }, 1000); } else { Toast.error(data.msg); } }, "json"); } else { Toast.warning("请先选择菜单!"); } } </script> <%}%>
相关推荐
标题中的"dtree不选中子节点处理"指的是在使用dtree这个JavaScript库时,遇到的一个问题,即在操作树形结构数据时,如何避免选中父节点的同时自动选中其所有子节点。dtree通常用于创建交互式的、可展开和折叠的树形...
**JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
3. **丰富的API和事件**:jsTree提供了一套完整的API接口,允许开发者对树结构进行各种操作,如添加、删除、移动节点。同时,它还支持多种事件监听,如节点选择、展开、折叠等,方便开发者实现定制化的交互逻辑。 4...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...
jsTree 有多种事件可以监听,比如 `ready.jstree`(初始化完成)、`select_node.jstree`(节点被选中)和 `rename_node.jstree`(节点重命名)。以下是一个监听节点被选中的例子: ```javascript $('#jstree_demo_...
3. **数据源**:jsTree支持从JSON、HTML、XML等多种数据格式加载数据,并可以动态加载和异步更新树节点。 4. **可配置性**:通过配置选项,可以自定义节点的外观、行为、图标、拖放行为等,满足个性化需求。 5. **...
总结:本文通过实例代码详细介绍了在Vue.js框架中,如何结合Element UI库的el-tree组件,实现默认展开树形结构中第一层第一个节点的功能。通过正确使用default-expanded-keys属性、合理的数据处理以及异步数据获取,...
- **配置项**:初始化jsTree时,可以设置各种配置项,如默认展开的节点、可操作的节点类型等。 - **数据源**:jsTree支持多种数据源,如JSON、HTML或XML,用于填充树结构。 3. **API与事件** - **API方法**:如`...
总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...
这个标签意味着jsTree可以用来创建类似CSDN那样的树形菜单效果,包括折叠/展开节点、异步加载数据等功能。这对于希望在自己的项目中复刻类似体验的开发者来说是个很好的参考。 通过这个“jsTree大集合”,你不仅...
jsTree不仅提供了基本的树节点操作,如创建、重命名、移动和删除,还支持节点的拖放功能,极大地增强了用户体验。 **二、数据源支持** jsTree的强大之处在于其灵活的数据源支持。它能够处理XML、JSON和HTML这三种...
2. **多态性**:支持多种树节点类型,如文本、图标、链接等,可以通过配置JSON数据实现。 3. **交互性**:提供丰富的事件处理,如`select_node`、`rename_node`等,可以监听用户操作并作出响应。 4. **可配置性**:...
"jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...
5. **插件系统**:jsTree拥有强大的插件生态系统,如checkbox(复选框)、types(节点类型)、contextmenu(右键菜单)等,进一步增强了功能。 6. **异步加载**:对于大型数据集,jsTree支持分页和按需加载,只加载...
在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...
JS Tree 是一个基于JavaScript的库,专门用于在Web页面上创建交互式的目录树结构,这种结构类似于Windows操作系统中的文件夹树,能够帮助用户以层级方式浏览和操作数据。 目录树在Web应用中有很多用途,例如: 1. ...
- **拖放功能**: JStree 支持节点拖放,方便用户重新组织树结构。 - **搜索**: 用户可以通过输入关键词,实时搜索并高亮显示匹配的节点。 - **AJAX 加载**: 当树结构数据量较大时,可以使用 AJAX 动态加载子节点,...
1. **节点操作**:创建、添加、删除和修改树节点,这包括设置节点文本、图标、是否可展开等属性。 2. **展开与折叠**:用户可以通过点击节点来展开或折叠其子节点,显示或隐藏更深层次的信息。 3. **事件处理**:库...
JStree支持多语言,你可以通过配置`language`属性来设置默认语言。例如,若需使用中文,可添加以下代码: ```javascript $('#jstree_demo_div').jstree({ 'core': { 'language': 'zh' } }); ``` 8. **自定义...