jQuery ztree实现动态树形多选菜单

前端技术 2023/09/08 JavaScript

我用到的版本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;
  }

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

本文地址：https://www.stayed.cn/item/22645

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案