EasyUI之Tree树形结构(一)

最新推荐文章于 2023-05-04 11:58:26 发布
最新推荐文章于 2023-05-04 11:58:26 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript 数据结构与算法 前端 ViewUI
原文链接：https://juejin.im/post/5cea0c3de51d4556d86c7a38
版权

官网地址：www.jeasyui.net/plugins/186…

前端代码：

$("#menuTreegrid").treegrid({
        url: SysResource.URL.list(),
        method: 'get',
        pagination: false,
        pageSize: 30,
        width:'100%',
        toolbar: '#SysResourceToolbar',
        idField: 'menuId',
        treeField: 'name',
        parentField: 'parentId', //父级菜单
        singleSelect: false,
        collapsible: false, // panel是否折叠
        rownumbers: true,
        nowrap: false, // 允许换行
        autoRowHeight: false, //自动行高
        autoRowWidth: true,
        animate:true,
        columns: [[
            {field: 'ck', checkbox: true},
            {field: 'menuId', title: '主键', hidden: true},
            {field: 'name', title: '菜单名称', width: '10%', hidden: false},
            {field: 'url', title: '菜单路径', width: '10%', hidden: false },
            {field: 'description', title: '菜单描述', width: '7.917%', hidden: false},
            {field: 'perms', title: '授权标识', width: '20%', hidden: false},
            {field: 'orderNum', title: '排序', width: '3%', hidden: false},
            {
                field: 'delFlag',
                title: '状态',
                width: '3%',
                hidden: false,
                formatter: function (value, row, index) {
                    return value == 0 ? '启用' : '停用';
                }
            },
            {
                field: 'type',
                title: '资源类别',
                width: '5%',
                hidden: false,
                formatter: function (value, row, index) {
                    return value == 0 ? '目录' : value == 1 ? '菜单' : '按钮';
                }
            },
        ]],
        //对返回的数据进行处理,便于显示树形结构
        loadFilter: function (resultData) {
            return resultData.data;
        },
        //设置选中事件，清除之前的行选择
        onClickRow: function (row) {
            $("#menuTreegrid").treegrid("unselectAll");
            $("#menuTreegrid").treegrid("selectRow",row.menuId);
        },
});
复制代码

数据库结构：

CREATE TABLE `sys_menu` (
  `menu_id` bigint(20) NOT NULL AUTO_INCREMENT,
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父菜单ID，一级菜单为0',
  `name` varchar(50) DEFAULT NULL COMMENT '菜单名称',
  `description` varchar(255) DEFAULT NULL COMMENT '描述',
  `url` varchar(200) DEFAULT NULL COMMENT '菜单URL',
  `perms` varchar(500) DEFAULT NULL COMMENT '授权(多个用逗号分隔，如：user:list,user:create)',
  `type` int(11) DEFAULT NULL COMMENT '类型   0：目录   1：菜单   2：按钮',
  `icon` varchar(50) DEFAULT NULL COMMENT '菜单图标',
  `order_num` int(11) DEFAULT NULL COMMENT '排序',
  `create_by` varchar(64) DEFAULT NULL COMMENT '创建人',
  `create_time` bigint(50) DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT NULL COMMENT '修改人',
  `update_time` bigint(50) DEFAULT NULL COMMENT '修改时间',
  `del_flag` tinyint(4) DEFAULT '0' COMMENT '是否删除  1:删除、 0：正常',
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=49 DEFAULT CHARSET=utf8 COMMENT='菜单管理';
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('1', '0', '系统管理', '系统', NULL, NULL, '0', 'fa fa-cog', '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('2', '1', '员工管理', '管理员', '/user', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('3', '1', '角色管理', '角色', '/role', NULL, '1', 'fa fa-user-secret', '2', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('4', '1', '菜单管理', '菜单', '/menu', NULL, '1', 'fa fa-th-list', '3', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('15', '2', '查看', NULL, NULL, 'sys:user:list,sys:user:info', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('16', '2', '新增', NULL, NULL, 'sys:user:save,sys:role:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('17', '2', '修改', NULL, NULL, 'sys:user:update,sys:role:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('18', '2', '删除', NULL, NULL, 'sys:user:delete', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('19', '3', '查看', NULL, NULL, 'sys:role:list,sys:role:info', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('20', '3', '新增', NULL, NULL, 'sys:role:save,sys:menu:perms', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('21', '3', '修改', NULL, NULL, 'sys:role:update,sys:menu:perms', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('22', '3', '删除', NULL, NULL, 'sys:role:delete', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('23', '4', '查看', NULL, NULL, 'sys:menu:list,sys:menu:info', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('24', '4', '新增', NULL, NULL, 'sys:menu:save,sys:menu:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('25', '4', '修改', NULL, NULL, 'sys:menu:update,sys:menu:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('26', '4', '删除', NULL, NULL, 'sys:menu:delete', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('31', '1', '部门管理', '部门', '/dept', NULL, '1', 'fa fa-file-code-o', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('32', '31', '查看', NULL, NULL, 'sys:dept:list,sys:dept:info', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('33', '31', '新增', NULL, NULL, 'sys:dept:save,sys:dept:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('34', '31', '修改', NULL, NULL, 'sys:dept:update,sys:dept:select', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('35', '31', '删除', NULL, NULL, 'sys:dept:delete', '2', NULL, '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('41', '0', '商品管理', '商品', NULL, NULL, '0', 'fa fa-cog', '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('42', '41', '商品1', NULL, 'modules/sys/user.html', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('43', '41', '商品2', NULL, 'modules/sys/user.html', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('44', '41', '商品3', NULL, 'modules/sys/user.html', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('45', '0', '订单管理', '交易', NULL, NULL, '0', 'fa fa-cog', '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('46', '0', '结算管理', '结算', NULL, NULL, '0', 'fa fa-cog', '0', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('47', '45', '订单列表', NULL, 'modules/sys/user.html', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');
INSERT INTO `localdb`.`sys_menu` (`menu_id`, `parent_id`, `name`, `description`, `url`, `perms`, `type`, `icon`, `order_num`, `create_by`, `create_time`, `update_by`, `update_time`, `del_flag`) VALUES ('48', '46', '结算管理', NULL, 'modules/sys/user.html', NULL, '1', 'fa fa-user', '1', NULL, NULL, NULL, NULL, '0');

复制代码

Java后台核心代码：

public List<SysMenuEntity> queryToTreeList(){
    List<SysMenuEntity> menuList = sysMenuMapper.queryList();
    if (menuList != null && menuList.size() > 0) {
        ArrayList child = new ArrayList<SysMenuEntity>();
        child.addAll(menuList);
        Iterator<SysMenuEntity> dept = menuList.iterator();
        while (dept.hasNext()){
            SysMenuEntity resource = dept.next();
            List<SysDeptEntity> childList = this.getChildList(resource.getMenuId(),child);
            if(resource.getParentId()!=0 && (childList == null || childList.size()==0) ){
                dept.remove();
            }else{
                resource.setChildren(childList);
            }
        }
    }
    if (menuList != null && menuList.size() > 0) {
        Iterator<SysMenuEntity> menu = menuList.iterator();
        while (menu.hasNext()){
            SysMenuEntity resource = menu.next();
           if(resource.getParentId()!=0){
               menu.remove();
            }
        }
    }
    return menuList;
}
List<SysMenuEntity> getChildList(Long parentId,List<SysMenuEntity> deptList){
    List<SysMenuEntity> childList =new ArrayList<>();
    if (deptList != null && deptList.size() > 0) {
        for (SysMenuEntity resource : deptList) {
            if(parentId.equals(resource.getParentId())){
                childList.add(resource);
            }
        }
    }
    return childList;
}
复制代码

转载于:https://juejin.im/post/5cea0c3de51d4556d86c7a38

weixin_34245169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyUI-树形表格(TreeGrid)实现无限层级菜单
06-01
NULL 博文链接：https://x125858805.iteye.com/blog/2229104
jQuery EasyUI结合zTree树形结构制作web页面
12-11
《jQuery EasyUI与zTree结合构建Web页面中的树形结构》 在Web开发中，创建交互式的用户界面是一项重要的任务。jQuery EasyUI和zTree这两个JavaScript库为开发者提供了强大的工具，使得这一过程变得更为简便。本文将...
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 2932
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
jquery easyui Treegrid 暴力修改父节点ID
xinglinglove的博客
07-26 2272
jquery easyui Treegrid 暴力修改父节点ID 项目页面需要展示组织架构及管理，作为一个前台菜鸟，第一时间 就想到了 easyui 的treegrid。然后在网上下载的API和demo，然后就开始了我的 苦逼 探索之路。 首先在建立treegrid的是API提供了两种新建方式 ① id="tt" class="easyui-treegrid"
js easyUI treegrid 递归构造树
lanchengxiaoxiao的专栏
06-06 7782
js function loadDataTree() { $('#tg').treegrid( { checkbox : false, lines : true, method : 'post', url : 'platform/cmtModuleManager/SectionBoardViewController/getCmtProductTreeData.json
EasyUI Tree 树 ——实现多级别菜单的展示，以及与后台数据的交互
weixin_30525825的博客
10-16 223
一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet" /> <link type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" /> &l...
EasyUI Tree树组件无限循环的解决方法
08-29
EasyUI Tree树组件是一种常用的树形结构控件，用于展示层级结构的数据。但是在使用EasyUI Tree树组件时，可能会遇到无限循环的问题，即点击最后一个节点时，会重新加载动态URL，导致无限循环的情况。这是因为EasyUI ...
easyui 树形结构样例
09-09
在“easyui 树形结构样例”中，我们主要探讨的是如何使用EasyUI实现一个可操作的树形结构，特别是在下拉框中展示的数据结构。这种树形结构在很多业务场景中都很常见，如组织结构管理、文件目录浏览等。 首先，我们...
基于EasyUI的基础之上实现树形功能菜单
08-30
描述：本文主要介绍了基于EasyUI的基础之上实现树形功能菜单，提供了一份完整的示例代码和步骤指导，旨在帮助开发者快速学习和掌握EasyUI的使用。 标签：EasyUI、树形功能菜单、EasyUI树形菜单 知识点： 1. ...
树节点绑定（EasyUI-Tree）内含数据库打开直接用
10-23
EasyUI的Tree组件是一种展示层次结构数据的视图，它以树形结构显示数据。树节点可以展开和折叠，用户可以通过点击节点来查看或操作其子节点。在EasyUI中，Tree组件的使用通常涉及以下步骤： - 引入EasyUI库：在HTML...
easyui或extjs构建动态树形结构
10-24
easyui或extjs构建动态树形结构，程序详细解析了怎么构建、组织树形结构，代码简单明了，有相应的注释说明，真正的授人予渔.只要你明白程序的逻辑，相信上面两种组件的树形结构，将不会有任何问题。
easyui中idField的作用
低至一折起的博客
12-13 6453
官方文档中，给出定义为： Indicate which field is an identity field. 显示哪些字段是一个身份。—–相当于一个主键字段 定义好idField，才能使用列checkbox，getSelections才能生效，不然只能得到第一个勾选的
EasyUI - datagrid属性idField详解
dawuafang
03-19 703
EasyUI - datagrid属性idField详解 idField在treegrid中的是一个必选的属性，在datagrid中是一个可选的属性。 也许有人为了方便使用getRowIndex会在datagrid中设置idField属性，如果不注意这个属性，那么在调用getSelected或者getChecked方法时会引起更多莫名其妙的问题。 这篇博客就是讲datagrid中的idFi...
asp.net mvc easyui-tree
最新发布
12-15
ASP.NET MVC EasyUI-Tree 是一种用于在ASP.NET MVC应用程序中实现树状结构的开源插件。它基于EasyUI框架，为开发人员提供了一种简单而强大的方式来展示和操作树形数据。 使用ASP.NET MVC EasyUI-Tree可以实现以下功能： 1. 数据展示：可以将树状数据以层级结构展示出来，帮助用户更直观地理解数据之间的关系。 2. 数据操作：可以对树状数据进行增加、编辑和删除等操作，使用户可以方便地对树节点进行维护和管理。 3. 数据筛选：可以通过设置过滤条件实现对树状数据的快速筛选，只显示符合条件的节点。 4. 数据排序：可以对树状数据进行排序，按照特定字段的升序或降序排列。 5. 数据搜索：可以通过关键字搜索来快速定位包含特定内容的节点。 6. 数据导入/导出：可以将树状数据导入到Excel等格式文件中，或者将外部数据导入到树状结构中。 7. 数据异步加载：对于大量数据，可以采用异步加载的方式实现分页加载，提升性能和用户体验。 使用ASP.NET MVC EasyUI-Tree需要进行一些配置和编写代码，但整体来说相对容易上手。它提供了丰富的API和事件以供开发人员自定义和扩展，能够满足不同需求的应用场景。 总而言之，ASP.NET MVC EasyUI-Tree是一个强大而易用的工具，能够帮助开发人员在ASP.NET MVC应用程序中轻松地实现树状结构的展示和操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值