jQuery 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

js

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

2、延迟加载ztree

jsp一样的，js有所有区别，这个参考了官方api

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

    String flag = request.getParameter("flag");
    if(flag.equals("init")){//直接加载ztree
      List 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 list = new ArrayList();
        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 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 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 list=new ArrayList();
    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 list = getTrees();
    for (Inner inner : list) {
      if(id==inner.getId()){
        Inner in=inner;
        return in;
      }
    }
    return null;
  }
  public List getChilds(Integer id){
    List list = getTrees();
    List result =new ArrayList();
    for (Inner inner : list) {
      if(id.intValue()==inner.getpId().intValue()){
        result.add(inner);
      }
    }
    return result;
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。