博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI tree 异步树与采用扁平化实现的同步树
阅读量:6919 次
发布时间:2019-06-27

本文共 6779 字,大约阅读时间需要 22 分钟。

所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多。。

异步树:

  tips:     可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式。

  使用场景: 当菜单模块数量庞大或者无限极,最好使用异步树,单节点展开访问后台,返回对应的子菜单。

  必须要件: 只需要一个URL即可

前台核心JS:

 

如果菜单比较少,也可以用异步树一次性加载 全部展开,把onLoadSuccess这段注释打开即可

后台Servlet:

@Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        String key = req.getParameter("id");        DbUtil db= new DbUtil();        Connection conn = null;        List
tree = new ArrayList
(); if(StringUtil.isEmpty(key)){ try { conn = db.getCon(); PreparedStatement ps = conn.prepareStatement("SELECT id,title FROM db_menus WHERE pid = 0"); ResultSet rs= ps.executeQuery(); while(rs.next()){ EasyuiTreeNode node = new EasyuiTreeNode(); node.setId(rs.getString("id")); node.setState(existsText(conn,rs.getString("id"))? "closed":"open"); //如果想默认都是以文件夹形式显示,这样设置:node.setState("closed"); node.setTitle(rs.getString("title")); tree.add(node); } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ try { conn.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }else{ try { conn = db.getCon(); PreparedStatement ps = conn.prepareStatement("SELECT id,title FROM db_menus WHERE pid = ?"); ps.setString(1, key); ResultSet rs= ps.executeQuery(); while(rs.next()){ EasyuiTreeNode node = new EasyuiTreeNode(); node.setId(rs.getString("id")); node.setState((existsText(conn,key)? "open":"closed")); node.setTitle(rs.getString("title")); tree.add(node); } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ try { conn.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } String json = JSON.toJSONString(tree); resp.setContentType("text/html;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println(json); out.flush(); out.close(); } private boolean existsText(Connection conn,String pid) throws SQLException{ PreparedStatement ps = conn.prepareStatement("SELECT COUNT(1) num FROM db_menus WHERE pid = ?"); boolean isClosed = true; ps.setString(1, pid); ResultSet rs = ps.executeQuery(); if(rs.next()){ String count = rs.getString("num"); if("0".equals(count)){ isClosed = false; } } return isClosed; }}

同步树:

  tips:这里采用扁平化的json格式实现,easyui tree 模仿ztree 使用扁平化加载json 原文链接:

  使用场景:菜单模块少 可以采用(PS:跟异步树一次性加载区别在于:同步树一次性加载 请求post一次,异步树因为采用了递归展开,请求post N次)

  必须条件:数据格式要配制成ztree的数据格式(id,pid)

前台JS代码:

        

后台Servlet代码:

@Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        //String key = req.getParameter("id");        DbUtil db= new DbUtil();        Connection conn = null;        List
tree = new ArrayList
(); try { conn = db.getCon(); PreparedStatement ps = conn.prepareStatement("SELECT id,pid,title FROM db_menus"); ResultSet rs= ps.executeQuery(); while(rs.next()){ EasyuiTreeNode node = new EasyuiTreeNode(); node.setId(rs.getString("id")); node.setPid(rs.getString("pid")); node.setState(existsText(conn,rs.getString("id"))? "closed":"open"); //如果想默认都是以文件夹形式显示,这样设置:node.setState("closed"); node.setTitle(rs.getString("title")); tree.add(node); } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ try { conn.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } String json = JSON.toJSONString(tree); System.out.println(json); resp.setContentType("text/html;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println(json); out.flush(); out.close(); } private boolean existsText(Connection conn,String pid) throws SQLException{ PreparedStatement ps = conn.prepareStatement("SELECT COUNT(1) num FROM db_menus WHERE pid = ?"); boolean isClosed = true; ps.setString(1, pid); ResultSet rs = ps.executeQuery(); if(rs.next()){ String count = rs.getString("num"); if("0".equals(count)){ isClosed = false; } } return isClosed; }

附上数据脚本:

CREATE TABLE db_menus(id BIGINT(20) NOT NULL AUTO_INCREMENT,pid BIGINT(20) NOT NULL,title VARCHAR(100) DEFAULT NULL,url VARCHAR(100) DEFAULT NULL,PRIMARY KEY (id ))ENGINE=INNODB  DEFAULT CHARSET=utf8 COMMENT='菜单表'DROP TABLE db_menusINSERT INTO db_menus VALUES(NULL,0,'项目管理',NULL);INSERT INTO db_menus VALUES(NULL,0,'任务管理',NULL);INSERT INTO db_menus VALUES(NULL,0,'考勤管理',NULL);INSERT INTO db_menus VALUES(NULL,0,'报销管理',NULL);INSERT INTO db_menus VALUES(NULL,0,'绩效管理',NULL);INSERT INTO db_menus VALUES(NULL,0,'通讯录管理',NULL);INSERT INTO db_menus VALUES(NULL,1,'个人周报查询',NULL);INSERT INTO db_menus VALUES(NULL,1,'项目周报查询',NULL);INSERT INTO db_menus VALUES(NULL,1,'个人周报填写',NULL);INSERT INTO db_menus VALUES(NULL,1,'项目周报填写',NULL);INSERT INTO db_menus VALUES(NULL,2,'我的任务',NULL);INSERT INTO db_menus VALUES(NULL,2,'指定任务',NULL);INSERT INTO db_menus VALUES(NULL,3,'派出申请',NULL);INSERT INTO db_menus VALUES(NULL,3,'加班申请',NULL);INSERT INTO db_menus VALUES(NULL,3,'请假申请',NULL);INSERT INTO db_menus VALUES(NULL,4,'我的报销',NULL);INSERT INTO db_menus VALUES(NULL,4,'报销审批',NULL);INSERT INTO db_menus VALUES(NULL,5,'绩效考核填报',NULL);INSERT INTO db_menus VALUES(NULL,5,'绩效考核审核',NULL);INSERT INTO db_menus VALUES(NULL,6,'通讯录',NULL);

 

转载于:https://www.cnblogs.com/feibazhf/p/6731223.html

你可能感兴趣的文章
探秘Java9之类加载
查看>>
记一次 OpenIPMI core的分析
查看>>
MySQL误操作后如何快速恢复数据?
查看>>
Bash中which的用法
查看>>
exec format error in docker
查看>>
VSCode安装使用(Python)
查看>>
解决wubi安装ubuntu时要下载系统映像文件问题
查看>>
碟中谍小组不要太夸张 Avaya要说:哈利法塔的网络很可靠
查看>>
php配置文件与代码分离的实现思路
查看>>
Linux vim使用心得I
查看>>
Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务
查看>>
svn配置钩子自动更新web目录
查看>>
设置标准盒子和怪异盒子
查看>>
activiti BPMN事件
查看>>
判断数组中是否存在重复元素
查看>>
linux学习教程(三) 文件权限处理命令
查看>>
linux系统程序安装(一)rpm工具
查看>>
zabbix3.0.0升级zabbix3.2.1版本
查看>>
安卓手机远程操作win8.1,RD Client设置教程
查看>>
Java Formatter 阅读心得
查看>>