項目中簡單使用ztree，簡單數據。

由於公司架構較舊，使用的jdk版本為1.4，頁面上也沒有el表達式。

加入 js 文件

<%
String context = request.getContextPath();
%>


<link rel="stylesheet" href="<%=context%>/tfms/contract/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="<%=context%>/tfms/contract/js/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=context%>/tfms/contract/js/zTree_v3/js/jquery.ztree.core.js"></script>

js部分

$(function(){

    var setting = {
            async:{
                enable : true,                                                 // 開啟異步加載
                url: "<%=context%>/tfms/contract/manage/list.do?action=tadta",    // url
                otherParam: ["id",'']                                        // 初始化發送的參數可要可不要，如果傳["id",null] 時，后台會解析成 : "null" 
            },
            data: {
                simpleData: {                
                    enable: true,            // 簡單數據模式
                    idKey: "id",            
                    pIdKey: "pId",    
                    rootPId: null              
                }
            },
            view:{
                selectMulti:false        //表示禁止多選
            },
            check:{
                
            },
            callback:{
                onClick:function(event,treeId,treeNode){            // 點擊 事件
                    alert(treeNode.name+"<--->"+treeNode.id);
                }
            }
    };  
    

    $.fn.zTree.init($("#ztree"), setting, null);


});

html

<ul id="ztree" class="ztree"></ul>

 

簡單數據模式很方便。例 

var treeNodes = [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];

后台

public void tadta(ActionHelper help) throws IOException{
        HttpServletResponse response = help.getResponse();
        HttpServletRequest request = help.getRequest();
        ContractService contractService = (ContractService) help.getService();         // 項目架構 struts1 + hibernate3 沒有 spring 
        String id = request.getParameter("id");
        List list = contractService.queryByTestCage(id);
        StringBuffer bstr = new StringBuffer("[");
        list.remove(0);                                  // 這個節點是項目中所用到的，所以不展示這個節點
        for (int i = 0; i < list.size(); i++) {
            ContractCagetoryVO vo = (ContractCagetoryVO) list.get(i);            //拼湊需要 數據的格式  
            bstr.append(i==0?"{id:'"+vo.getFid()+"',name:'"+vo.getFname()+"',pId:'"+vo.getFparent_id()+"'}":",{id:'"+vo.getFid()+"',name:'"+vo.getFname()+"',pId:'"+vo.getFparent_id()+"'}");
        }
        bstr.append("]");
        response.setCharacterEncoding("utf-8");        // 如果不設置 utf-8 中文會變  ??                         
        response.getWriter().print(bstr);
    }

ztree的數據格式比較好組裝，可以不使用 JSON 嵌套格式數據！！

效果