java树和jQuery树的运用

一、java
后台查询到需要使用的tree数数据，然后分局tree的格式进行封装，然后直接使用ztree插件进行绑定。

数据库查询 得到表数据行的集合

    // 模拟数据库查询 得到表数据行的集合
    public List<Map<String,Object>> getRows(){

        List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>();
        Map<String,Object> row = new HashMap<String,Object>();
        row.put("id","1");
        row.put("username","玄清");
        row.put("invitationid","0");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","2");
        row.put("username","张三");
        row.put("invitationid","1");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","3");
        row.put("username","李四");
        row.put("invitationid","2");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","4");
        row.put("username","王五");
        row.put("invitationid","3");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","5");
        row.put("username","张小明");
        row.put("invitationid","4");
        dataList.add(row);

        row = new HashMap<String,Object>();
        row.put("id","6");
        row.put("username","赵六");
        row.put("invitationid","1");
        dataList.add(row);

        return  dataList;
    }

将查询到的数据进行tree封装

  // 服务端拼接字符串，也可直接返回数组然后在浏览器端拼接字符串
    public String assembly(List<Map<String,Object>> paramList){

        StringBuffer resultStr = new StringBuffer();
        resultStr.append("[");
        for (Map<String,Object> obj: paramList) {

            // resultStr.append("{'id':" + obj.get("id")+",'pId':" + obj.get("invitationid")+",'name':"+obj.get("username")+"}");
            resultStr.append("{");
            resultStr.append("'id':'" + obj.get("id")+"',");
            if (null == obj.get("invitationid") || "0".equals(obj.get("invitationid")))// 仅展开顶级节点
                resultStr.append("'pId':'0', open:'true',");
            else
                resultStr.append("'pId':'" + obj.get("invitationid")+"', open:'true',");// 展开子级节点
            resultStr.append("'name':'" + obj.get("username")+"'");
            resultStr.append("},");
        }
        // 去除最后一个逗号
        resultStr.deleteCharAt(resultStr.length()-1);
        resultStr.append("]");
        return resultStr.toString();
    }

将封装的tree树数据在控制台打印（正式项目将数据返回前端）

// 调用方法
    public static void main(String[] args) throws Exception{

        MenuTest01 mt = new MenuTest01();
        List<Map<String,Object>> dataList = mt.getRows();
        System.out.println(mt.assembly(dataList));

    }

至此java后台的数据传输就已经搞定了。

二、jQuery树
ztree官方文档：ztree官网

引用样式

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

js调用ztree

<SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //点击事件，查询节点详细信息
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.id + ", " + treeNode.name);
        };


        var serverRetutnData = "[{'id':'1','pId':'0','name':'玄清'},{'id':'2','pId':'1', open:'true','name':'张三'},{'id':'3','pId':'2', open:'true','name':'李四'},{'id':'4','pId':'3', open:'true','name':'王五'},{'id':'5','pId':'4', open:'true','name':'张小明'},{'id':'6','pId':'1', open:'true','name':'赵六'}]";

        serverRetutnData = eval('('+serverRetutnData+')'); // eval js函数  将字符串转换为数组 具体使用时请考虑浏览器兼容性


        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo2"), setting, serverRetutnData);
        });
        //-->
    </SCRIPT>

html代码

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo2" class="ztree"></ul>
    </div>

</div>

页面显示结果

点击效果