异步加载 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. SQL Server2012数据库开启远程连接

    在我们使用SQL Server数据库的时候很重要的一点就是开启数据库的远程连接,这是因为很多时候数据库部署在远程的服务器上会比较方便,而部署在客户端的话,由于客户端不固定,所以需要经常去部署,这样容易 ...

  2. idea中Lombok的使用

    使用了lombok的注解(@Setter,@Getter,@ToString,@@RequiredArgsConstructor,@EqualsAndHashCode或@Data)之后,就不需要编写或 ...

  3. C#使用MemoryStream类读写内存

    MemoryStream和BufferedStream都派生自基类Stream,因此它们有很多共同的属性和方法,但是每一个类都有自己独特的用法.这两个类都是实现对内存进行数据读写的功能,而不是对持久性 ...

  4. MySQL 5.7 关闭严格模式

    If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...

  5. Windows 访问 CentOS 7 共享文件夹 Samba 配置

    Windows 使用用户名.密码访问 CentOS 7 共享文件夹 执行命令,查看 Windows 工作组:net config workstation 执行命令,安装 Samba:yum insta ...

  6. React 学习(三) ---- state 和 事件处理函数

    在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...

  7. Json.net 反序列化 部分对象

    主要通过 Jobject获取想要序列化的部分对象. 直接上代码 static void Main(string[] args) { //先反序列化看看 string json = "{\&q ...

  8. linux下后台启动springboot项目

    linux下后台启动springboot项目 我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn p ...

  9. POI中不推荐的方法与其替代的方法

    不推荐getCellType(),推荐getCellTypeEnum() if(tcell.getCellTypeEnum() == CellType.NUMERIC){ System.out.pri ...

  10. Eclipse中项目Project Explorer视图与Package Explorer视图

    Package Explorer视图: Project Explorer视图 两种视图的切换: