异步ztree 加复选框及相应后台处理

Posted 2020-09-19 戈博小刀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了异步ztree 加复选框及相应后台处理相关的知识，希望对你有一定的参考价值。

异步加载 tree，点一下节点，就发一下请求到后台，然后显示出得到的当前层级节点

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title></title>
  6     </head>
  7     <script type="text/javascript" src="js/jquery-1.8.0.js" ></script>
  8     <body>
  9         <ul id="myTree"></ul> ///定义ztree要显示的容器标签
 10         
 11     </body>
 12     <script>
 13         var myTreeNodes = [];  //定义接收返回集合的容器，为了在后面init真正初始化树时，作为最后一个参数用
 14         var IDMark_A = "_a"; //定义个变量，其实就是为了后面匹配tree自动生成的a标签（在这里做下说明而已，不定义直接在下面拼也行吧）
 15         var mySetting = {
 16             view:{
 17                 addDivDom: myyAddDivDom //自定义控件，这里是加入了复选框
 18             },
 19             data:{
 20                 key:title:"name",  //设置title提示信息对应的属性名称 也就是节点相关的某个属性
 21                 children:"childNodes"
 22             },
 23             async:{
 24                 enable:true, //是否开启异步加载模式
 25                 type:‘post‘,
 26                 url: myGetUrl,//得到请求路径的方法
 27                 dataFilter: myFilter //对于请求回来的数据进行预处理的方法
 28             }
 29         }
 30         
 31         //加入自定义的显示控件 （这里是文本框）
 32         function myAddDivDom(tree,treeNode){
 33             var aObj = $("#"+treeNode.tId+IDMark_A);///这个就是个选择器，选的是原节点所在的a标签（这是tree自己生成的a标签）
 34             if(treeNode.myCheck=="1"){///这个是可以自己加判断，让指定的对象前加上复选框
 35                 var editStr = "<input type=‘checkbox‘ value=‘"+treeNode.id+"‘onfocus=‘this.blur();‘></input>";
 36                 aObj.before(editStr); ///before是jq的方法，意思是在调用者标签的签名加入参数（参数也可以是标签，和html()方法的参数是一样的）
 37             }
 38         }
 39         
 40         //得到请求路径
 41         function myGetUrl(treeId,treeNode){
 42             var firstId = "";//第一个节点对象的id
 43             var  url = "";
 44             if(treeNode==null){ //第一次，加载树时发的请求
 45                 url = path+"xxx/loadNextTreeNodes.do?id="+firstId+"&otherParam"+otherParam;                
 46             }else{//树加载完成后，点击某个（有子节点的）节点后发出的请求
 47                 url = path + "xxx/loadNextTreeNodes.do?id="+treeNode.id+"&otherParam"+otherParam;
 48             }
 49             return url;
 50         }
 51         
 52         //对返回的数据进行预处理
 53         function myFilter(treeId,parentNode,childNodes){
 54             for (var i=0,i<childNodes.length;i++) {
 55             /*
 56              下面等号左边的 childNodes[i] 的属性都是在 tree中要显示的每个节点的属性，
 57              而右边的childNodes[i]的属性则表示从后台得到的对象集合中每个对象的真实属性
 58             */
 59                 childNodes[i].code=xxxx;
 60                 childNodes[i].open=true;
 61                 childNodes[i].name = childNodes[i].xxxName;
 62                 childNodes[i].xxx = childNodes[i].xxxxx;
 63                 
 64                 if(childNodes[i].hasChild==1){
 65                     childNodes[i].isParent = true;///要显示成树，集合中的数据必须要有个boolean类型的 isParent属性
 66                     //可以在后台对象属性上直接加上，也可以在预处理这里的js中根据条件加上这个属性
 67                 }
 68             }
 69             return childNodes;
 70         }
 71         
 72         ///上面这些都是为了生成树的准备信息，下面这句才是真正生成树的代码(当然这句可以放在任意位置，比如最上面也可以)
 73         $.fn.zTree.init($("#myTree"),mySetting,myTreeNodes);//参数1：容器对象  2：tree的setting设置  3：接收后台返回值的数组
 74         /*
 75          执行这句的时候，会自动 先执行 myGetUrl 方法，得到 url，然后自动发送这个url到后台请求数据（就和ajax一样，其实这句话里面就是发了一个ajax请求），
 76          然后请求回来的 数据会自动先传入myFilter方法的childNodes参数中，并执行myFilter方法，
 77          然后在加载tree的同时自动调用myAddDivDom方法，在对应的节点前拼好checkbox复选框，并显示在页面上。
 78          */
 79         
 80     </script>
 81     
 82     <script>
 83         //下面这些都是java代码
 84         @ResponseBody
 85         @RequestMapping("loadNextTreeNodes")
 86         public void loadNextTreeNodes(){
 87             List list=[];//假设后台有一个要展示为 tree的list集合
 88             for(item:list){
 89                 item.setHasChild("0");
 90                 if(xxx){
 91                     item.setHasChild("1");
 92                 }
 93             }
 94             writeJson(list);//把list转成json写到前台
 95         }
 96         
 97         //下面这个就是封装了个写json到前台的方法，供参考
 98         public void writeJson(Object obj){
 99             PrintWriter out = null;
100             try{
101                 response.setContentType("");
102                 response.setHeader("");
103                 response.setHeader("");
104                 out = response.getWriter();
105                 out.print(new Gson().toJson(obj));
106             }catch(Exception e){
107                 
108             }finally{
109                 try{
110                     FileUtil.flushAndCloseWrite(out);//关闭流
111                 }catch(e){
112                 }
113             }
114         }
115         
116     </script>
117 </html>

以上是关于异步ztree 加复选框及相应后台处理的主要内容，如果未能解决你的问题，请参考以下文章

树形ztree 与angularjs结合，实现下级数据异步加载，点击复选框填写到输入框里

ztree中依据后台中传过来的node的id，将这个node的复选框置为不可用

ztree点击节点实现选中/取消复选框

使用js获取复选框的值,并把数组传回后台处理，过程使用的是Ajax异步查询

ztree怎么设置点击节点展开

展示树菜单(zTree)

异步ztree 加复选框 及相应后台处理

异步ztree 加复选框及相应后台处理