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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <script type="text/javascript" src="js/jquery-1.8.0.js" ></script>

     <body>

         <ul id="myTree"></ul> ///定义ztree要显示的容器标签

     </body>

     <script>

         var myTreeNodes = [];  //定义接收返回集合的容器，为了在后面init真正初始化树时，作为最后一个参数用

         var IDMark_A = "_a"; //定义个变量，其实就是为了后面匹配tree自动生成的a标签（在这里做下说明而已，不定义直接在下面拼也行吧）

         var mySetting = {

             view:{

                 addDivDom: myyAddDivDom //自定义控件，这里是加入了复选框

             },

             data:{

                 key:title:"name",  //设置title提示信息对应的属性名称 也就是节点相关的某个属性

                 children:"childNodes"

             },

             async:{

                 enable:true, //是否开启异步加载模式

                 type:'post',

                 url: myGetUrl,//得到请求路径的方法

                 dataFilter: myFilter //对于请求回来的数据进行预处理的方法

             }

         }

         //加入自定义的显示控件 （这里是文本框）

         function myAddDivDom(tree,treeNode){

             var aObj = $("#"+treeNode.tId+IDMark_A);///这个就是个选择器，选的是原节点所在的a标签（这是tree自己生成的a标签）

             if(treeNode.myCheck=="1"){///这个是可以自己加判断，让指定的对象前加上复选框

                 var editStr = "<input type='checkbox' value='"+treeNode.id+"'onfocus='this.blur();'></input>";

                 aObj.before(editStr); ///before是jq的方法，意思是在调用者标签的签名加入参数（参数也可以是标签，和html()方法的参数是一样的）

             }

         }

         //得到请求路径

         function myGetUrl(treeId,treeNode){

             var firstId = "";//第一个节点对象的id

             var  url = "";

             if(treeNode==null){ //第一次，加载树时发的请求

                 url = path+"xxx/loadNextTreeNodes.do?id="+firstId+"&otherParam"+otherParam;

             }else{//树加载完成后，点击某个（有子节点的）节点后发出的请求

                 url = path + "xxx/loadNextTreeNodes.do?id="+treeNode.id+"&otherParam"+otherParam;

             }

             return url;

         }

         //对返回的数据进行预处理

         function myFilter(treeId,parentNode,childNodes){

             for (var i=0,i<childNodes.length;i++) {

             /*

              下面等号左边的 childNodes[i] 的属性都是在 tree中要显示的每个节点的属性，

              而右边的childNodes[i]的属性则表示从后台得到的对象集合中每个对象的真实属性

             */

                 childNodes[i].code=xxxx;

                 childNodes[i].open=true;

                 childNodes[i].name = childNodes[i].xxxName;

                 childNodes[i].xxx = childNodes[i].xxxxx;

                 if(childNodes[i].hasChild==1){

                     childNodes[i].isParent = true;///要显示成树，集合中的数据必须要有个boolean类型的 isParent属性

                     //可以在后台对象属性上直接加上，也可以在预处理这里的js中根据条件加上这个属性

                 }

             }

             return childNodes;

         }

         ///上面这些都是为了生成树的准备信息，下面这句才是真正生成树的代码(当然这句可以放在任意位置，比如最上面也可以)

         $.fn.zTree.init($("#myTree"),mySetting,myTreeNodes);//参数1：容器对象  2：tree的setting设置  3：接收后台返回值的数组

         /*

          执行这句的时候，会自动 先执行 myGetUrl 方法，得到 url，然后自动发送这个url到后台请求数据（就和ajax一样，其实这句话里面就是发了一个ajax请求），

          然后请求回来的 数据会自动先传入myFilter方法的childNodes参数中，并执行myFilter方法，

          然后在加载tree的同时自动调用myAddDivDom方法，在对应的节点前拼好checkbox复选框，并显示在页面上。

          */

     </script>

     <script>

         //下面这些都是java代码

         @ResponseBody

         @RequestMapping("loadNextTreeNodes")

         public void loadNextTreeNodes(){

             List list=[];//假设后台有一个要展示为 tree的list集合

             for(item:list){

                 item.setHasChild("0");

                 if(xxx){

                     item.setHasChild("1");

                 }

             }

             writeJson(list);//把list转成json写到前台

         }

         //下面这个就是封装了个写json到前台的方法，供参考

         public void writeJson(Object obj){

             PrintWriter out = null;

             try{

                 response.setContentType("");

                 response.setHeader("");

                 response.setHeader("");

                 out = response.getWriter();

                 out.print(new Gson().toJson(obj));

             }catch(Exception e){

             }finally{

                 try{

                     FileUtil.flushAndCloseWrite(out);//关闭流

                 }catch(e){

                 }

             }

         }

     </script>

 </html>

异步ztree 加复选框 及相应后台处理的更多相关文章

  1. gridview列前加复选框需要注意的一点

    前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gr ...

  2. 复选框 ajax取得后台页面

    首先判断是否勾选了复选框 $("input[name='product']").click(function () { if($(this).prop("checked& ...

  3. layui表单使用开关滑块和复选框，渲染后台数据方法

    提示:整个表格要在form标签内 定义开关模板 <div class="layui-form" lay-filter="layuiadmin-app-form-li ...

  4. ztree实现复选框单选功能

    /** * ztree的默认配置项 * */ var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enabl ...

  5. JeeSite导出多条数据（加复选框）demo

    表格图: jsp: 后台: @RequiresPermissions("shwindow:advertisementPutInList:view") @RequestMapping ...

  6. 前台checkbox复选框提交到后台处理

    前台 <input type="hidden" id="tempString" name="tempString" /> < ...

  7. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  8. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  9. 自定义复选框 checkbox 样式

    默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...

随机推荐

  1. 如何抓取电商的数据 & Python

    如何抓取电商的数据 & Python https://www.zhihu.com/question/40720286 https://www.zhihu.com/question/382455 ...

  2. static关键字的用法

    静态变量和静态方法 static关键字的基本用法: 1.修饰变量:被static修饰的变量属于类变量,可以用类名.变量名来引用,而不用直接new一个对象来引用. 2.修饰方法:被static修饰的方法 ...

  3. python 三目运算符

    格式: true_res if condition else false_res Meto 1: Meto 2: >>> x = 2 >>> x+1 if x!=1 ...

  4. 利用H5 FormData 实现表单中多图上传（可带其他如String类型数据）

    本篇的具体思路来源于右侧网址:http://blog.csdn.net/qq_19551571/article/details/49977983 本篇代码有所修改,请具体区分. 本篇使用的是 form ...

  5. load加载层-layui

    加载样式 //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = laye ...

  6. 扫描某目录下的所有文件的MD5码并导出文件【可执行jar】

    pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:// ...

  7. spfa优化板子

    用双端队列,当待加入元素小于队首元素时 加入队首, 否则 加入队尾 slf优化 if(!vis[e.v]) { if(Q.empty()) Q.push_front(e.v); else { if(d ...

  8. 在VS中安装nuget离线包nupkg文件

    1.下载 nupkg文件 2.打开VS,工具,选项,如下图,复制右侧圈圈地址,把下载文件复制丢进去 3.管理当前解决方案的nuget包 n 4.左侧选择你下载的包名,在右侧选择需要安装在哪一层项目,点 ...

  9. Android assets的一个bug

    摘要 Android assets目录下资源文件超过1MB的问题. 由于要显示一些奇奇怪怪的日文字符,我们在应用里放了一个字库文件,譬如叫做jp.ttf,放在assets目录下打包. 开发.调试一切正 ...

  10. 【BZOJ4784】[ZJOI2017]仙人掌（Tarjan，动态规划）

    [BZOJ4784][ZJOI2017]仙人掌(Tarjan,动态规划) 题面 BZOJ 洛谷 题解 显然如果原图不是仙人掌就无解. 如果原图是仙人掌,显然就是把环上的边给去掉,变成若干森林连边成为仙 ...