动态树形多选菜单——ztree初始化加载和延迟加载

我用到的版本ztree core v3.5.24，需要引入的js，css，jquery.js，jquery.ztree.core.js，jquery.ztree.excheck.js（多选框可选），zTreeStyle.css。
需要注意的指向父节点的pId，我开始写的是pid一开始没注意，默认的是pId，当然可以pIdKey指定自定义的（未测）。还有如果图片没显示肯定是没引入img图片，记得写好路径。

1先介绍初始化加载ztree

jsp

<div >  
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">  
    </ul>  
</div>

js

<script type="text/javascript">
$(function(){
    $.ajax({ 
        url: '${contextPath}/om/quoteOmRequest.do?flag=init',
        data: { 
            name : '1'  //随便写的，传入后台的值
        },
        type:'post',
        traditional: true,
        success: function(data){
            var dataObj = eval(data);
            var zTreeObj;
            var setting = {
                    data: {  
                        simpleData: {  
                            enable:true,  
                            /* idKey: "id",  
                            pIdKey: "pId" */  
                        }  
                    },
                    check: {
                        enable: true,
                        chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数，参数都不写""为全不影响]
                    },
                    callback: {
                        onCheck: 
                             function() {  
                                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                                    var checkCount = zTree.getCheckedNodes(true);
                                    var classpurview = "";
                                    for(var i=0;i<checkCount.length;i++) {
                                           classpurview +=  checkCount[i].id+","      //存入数据的id，比如这种形式"1,2,5,"  后台截取下
                                    }
                                    /* alert(classpurview); */
                            } ,
                    },
                    view: {  
                        showLine: true,  
                        showIcon: true,  
                        dblClickExpand: true  
                    }, 
            };
            var zNodes = dataObj; 
            $(document).ready(function(){
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        },
        error : function() {    
            alert("异常！");    
       }
    });
});
</script>

后台部分可以参考2延迟加载

2延迟加载ztree
jsp一样的，js有所有区别，这个参考了官方api

<script type="text/javascript">
var setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable: true,
            chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数，参数都不写""为全不影响]
        },
        async: {
            enable: true,
            url:"${contextPath}/om/quoteOmRequest.do?flag=ajax",
            autoParam:["id"], 
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            alert("请选择父节点，此节点是根节点...");
            return false;
        } else {
            return true;
        }
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting);
    });
</script>

后台部分，也包含了1的后台，先看核心代码，这个用的struts，哪个框架都差不多。

        String flag = request.getParameter("flag");
        if(flag.equals("init")){//直接加载ztree
            List<Inner> list = getTrees();//得到所有节点
            try {
                convertListToJson(list);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }else if(flag.equals("ajax")){//延迟加载ztree
            String id = request.getParameter("id");
            if(id==null){//第一次进入初始化父节点
                List<Inner> list = new ArrayList<OmRequestImpl.Inner>();
                Inner in1=getById(1);
                Inner in5=getById(5);
                list.add(in1);
                list.add(in5);//测试用的，得到初始化0级父节点，应该从数据库中获取。
                try {
                    convertListToJson(list);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }else{//根据父节点id加载对应的子节点
                List<Inner> list = getChilds(Integer.valueOf(id));//通过父id取得子节点集合，测试就自己写个方法，应该从数据库中获取。
                try {
                    convertListToJson(list);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

这里涉及了一些方法，我为了测试方便自己写了个测试bean，正式的直接从数据库中获取。下面是bean及一些小方法。

public class Inner{
        private Integer id; 
        private Integer pId; //指向父节点id
        private String name; //显示的内容   
        private String isParent;//是否是父节点
        public Inner(){
            this.isParent="false";
        }
        public String getIsParent() {
            return isParent;
        }
        public void setIsParent(String isParent) {
            this.isParent = isParent;
        }
        public Integer getpId() {
            return pId;
        }
        public void setpId(Integer pId) {
            this.pId = pId;
        }
        public Integer getId() {
            return id;
        }
        public void setId(Integer id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
}

// -- 将运行结果用json字符返回客户端
    public void convertListToJson(List<?> list)throws Exception{
            JSONArray json = JSONArray.fromObject(list);  
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("text/html; charset=UTF-8"); 
            PrintWriter writer;
            writer = response.getWriter();
            writer.write(json.toString());
            writer.close();
    }

这些方法可忽略，测试用的，可通过数据库获取

public List<Inner> getTrees(){
        Inner in=new Inner();
        in.setId(1);
        in.setpId(0);
        in.setIsParent("true");
        in.setName("父节点1");
        Inner in1=new Inner();
        in1.setId(2);
        in1.setpId(1);
        in1.setName("子节点11");
        in1.setIsParent("true");
        Inner in2=new Inner();
        in2.setId(3);
        in2.setpId(1);
        in2.setName("子节点12");
        Inner in3=new Inner();
        in3.setId(4);
        in3.setpId(2);
        in3.setName("子节点111");
        Inner in4=new Inner();
        in4.setId(5);
        in4.setpId(0);
        in4.setIsParent("true");
        in4.setName("父节点2");
        Inner in5=new Inner();
        in5.setId(6);
        in5.setpId(5);
        in5.setName("子节点21");
        List<Inner> list=new ArrayList<Inner>();
        list.add(in);
        list.add(in1);
        list.add(in2);
        list.add(in3);
        list.add(in4);
        list.add(in5);
        return list;
    }
    public Inner getById(Integer id){
        List<Inner> list = getTrees();
        for (Inner inner : list) {
            if(id==inner.getId()){
                Inner in=inner;
                return in;
            }
        }
        return null;
    }
    public List<Inner> getChilds(Integer id){
        List<Inner> list = getTrees();
        List<Inner> result =new ArrayList<OmRequestImpl.Inner>();
        for (Inner inner : list) {
            if(id.intValue()==inner.getpId().intValue()){
                result.add(inner);
            }
        }
        return result;
    }