EasyUI tree 异步树与采用扁平化实现的同步树-CSDN博客

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

异步树：

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

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

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

前台核心JS：

    <script type="text/javascript">
    $(function(){
        $('#tt').tree({
            url: 'MenuSynServlet',
            lines:true/* ,
             onLoadSuccess : function(node, data) {
                var t = $(this);
                if (data) {
                    $(data).each(function(index, d) {
                        
                        if (this.state == 'closed') {
                        t.tree('expandAll');
                        }
                    });
                }            
            } */
        });
    });
    </script>

如果菜单比较少，也可以用异步树一次性加载全部展开，把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<EasyuiTreeNode> tree = new ArrayList<EasyuiTreeNode>();
        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 原文链接：http://www.cnblogs.com/liaojie970/p/5319252.html

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

　　必须条件：数据格式要配制成ztree的数据格式（id,pid）

前台JS代码：

    <script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.5.1/plugins/jquery.tree_expand.js"></script>
    
    <script type="text/javascript">
    //实例化。这里增加了三个属性，可以指定idFiled，textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
    $(function(){
        $('#tt').tree({
            url: 'MenuSynServlet',
            parentField:"pid",
            textFiled:"title",
            idFiled:"id",
            lines:true
        });
    });
    </script>

后台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<EasyuiTreeNode> tree = new ArrayList<EasyuiTreeNode>();

            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_menus

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,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);