Ztree + bootstarp-table  使用

一. Ztree

　　1.引入js/css文件

　　 Ztree官网

  1.   <!--ztree-->
  2. <link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/default/zTreeStyle.css}">
  3.   <link th:href="@{/common/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
  4.   <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.core-3.5.js}"></script>
  5.   <!--Jquery-->
  6.   <script th:src="@{/js/jquery.js}"></script>

　　2.页面定义/html

  1.  <div >
  2.             <ul id="tree" class="ztree"></ul>
  3.  </div>

　　3.页面初始化js

  1. $(function () {
  2.  
  3.   var setting = {
  4.     view: {
  5.       // fontCss : {"font-size":"26px","color":"red"}
  6.     },
  7.     check: {
  8.       //开启jquery.ztree.excheck-3.5.js
  9.       // enable: true,
  10.       // chkStyle: "radio",
  11.       // radioType: "radio"
  12.     },
  13.     edit: {
  14.       /* enable: true,
  15.        drag: {
  16.          isCopy: true,
  17.          isMove: false
  18.        }*/
  19.     },
  20.     async: {
  21.       enable: true,
  22.       url: ctx + "user/getJsonData",//url地址
  23.       type: 'post',
  24.       autoParam: ["id"],
  25.     },
  26.     data: {
  27.       simpleData: {
  28.         enable: true,
  29.         idKey: "id",
  30.         pIdKey: "pId",
  31.         rootPId: 0
  32.       }
  33.     },
  34.     callback: {
  35.       onClick: function (event, treeId, treeNode, clickFlag) {
  36.         if (!treeNode.isParent) {
  37.           // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  38.           $("#input_hidden").attr("value", treeNode.name);
  39.           // var input = $("#input_hidden").val();
  40.           // alert(input);
  41.           oTable.Init();
  42.         }
  43.         if (treeNode.isParent) {
  44.           // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  45.           $("#input_hidden").attr("value", treeNode.name);
  46.           // var input = $("#input_hidden").val();
  47.           // alert(input);
  48.           oTable.Init();
  49.         }
  50.       },
  51.       onAsyncError: zTreeOnAsyncError,
  52.       onAsyncSuccess: function (event, treeId, treeNode, msg) {
  53.  
  54.       }
  55.     }
  56.   };
  57.  
  58.   function filter(treeId, parentNode, childNodes) {
  59.     if (!childNodes) {
  60.       return null;
  61.     }
  62.     for (var i = 0, l = childNodes.length; i < l; i++) {
  63.       childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  64.     }
  65.     return childNodes;
  66.   }
  67.  
  68.   function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  69.     alert("加载错误：" + XMLHttpRequest);
  70.   }
  71.  
  72.   $(document).ready(function () {
  73.     $.fn.zTree.init($("#tree"), setting);
  74.   });
  75. })

　　

　　4.controller 层

  1. /**
  2.    * 提供Ztree数据
  3.    * @author zhukaixin
  4.    * @return java.util.List<com.example.cetcie8.user.pojo.TreeUser>
  5.    * @throws
  6.    */
  7.   public List<TreeUser> getAllAuthorize() {
  8.     List<TreeUser> list = new ArrayList(18);
  9.     TreeUser treeUser1 = new TreeUser(121, 1, 1, "总公司", 1);
  10.     TreeUser treeUser2 = new TreeUser(122, 121, 0, "北京公司", 1);
  11.     TreeUser treeUser3 = new TreeUser(123, 121, 0, "上海公司", 1);
  12.     TreeUser treeUser4 = new TreeUser(124, 121, 0, "广州公司", 1);
  13.     TreeUser treeUser5 = new TreeUser(125, 121, 1, "中国公司", 1);
  14.     TreeUser treeUser6 = new TreeUser(126, 125, 0, "中国北方公司", 1);
  15.     TreeUser treeUser7 = new TreeUser(127, 121, 1, "上市公司", 1);
  16.     TreeUser treeUser8 = new TreeUser(128, 127, 0, "北京上市分公司", 1);
  17.     TreeUser treeUser9 = new TreeUser(129, 127, 0, "上海上市分公司", 1);
  18.     TreeUser treeUser10 = new TreeUser(130, 121, 1, "香港公司", 1);
  19.     TreeUser treeUser11 = new TreeUser(131, 130, 0, "九龙湾分公司", 1);
  20.     TreeUser treeUser12 = new TreeUser(132, 130, 0, "台北分公司", 1);
  21.     list.add(treeUser1);
  22.     list.add(treeUser2);
  23.     list.add(treeUser3);
  24.     list.add(treeUser4);
  25.     list.add(treeUser5);
  26.     list.add(treeUser6);
  27.     list.add(treeUser7);
  28.     list.add(treeUser8);
  29.     list.add(treeUser9);
  30.     list.add(treeUser10);
  31.     list.add(treeUser11);
  32.     list.add(treeUser12);
  33.     return list;
  34.   }
  35.  
  36. /**
  37.    * 将Ztree数据封装成Json数据格式
  38.    * @author zhukaixin
  39.    * @return java.lang.String
  40.    * @throws
  41.    */
  42.   @ResponseBody
  43.   @PostMapping("/getJsonData")
  44.   public String getJsonData() {
  45.     List<TreeUser> list = getAllAuthorize();
  46.     StringBuffer json = new StringBuffer("[");
  47.     String data = "";
  48.     int length = list.size();
  49.     for (int i = 0; i < length; i++) {
  50.       json.append("{id:" + list.get(i).getId() + ",");
  51.       json.append("pId:" + list.get(i).getpId() + ",");
  52.       json.append("name:\"" + list.get(i).getName() + "\",");
  53.       if (list.get(i).getIsParent() != 0) {
  54.         json.append("isParent:" + list.get(i).getIsParent() + ",");
  55.       }
  56.       if (list.get(i).getOpen() != 0) {
  57.         json.append("open:" + list.get(i).getOpen() + ",");
  58.       }
  59.       data = json.substring(0, json.lastIndexOf(",")) + "},";
  60.       json = new StringBuffer(data);
  61.     }
  62.     data = json.substring(0, json.length() - 1) + "]";
  63. //    System.out.println(data);
  64.     return data;
  65.   }

　　5.页面直接根据返回的json 数据渲染Ztree

二 、bootStarp-table 整合 Ztree

　　1.主要就是点击左边的Ztree 节点  右边显示数据

　　2.完整的html代码

  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>用户页面</title>
  6.   <!--Jquery-->
  7.   <script th:src="@{/js/jquery.js}"></script>
  8.   <!--bootstrap-->
  9.   <script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>
  10.   <link rel="stylesheet" th:href="@{/common/bootstrap/css/bootstrap.min.css}">
  11.   <!--bootstrap-table-->
  12.   <script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>
  13.   <link rel="stylesheet" th:href="@{/common/bootstrap-table/bootstrap-table.css}">
  14.   <script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
  15.   <!--ztree-->
  16.   <!--<link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/simple/zTreeStyle.css}">-->
  17.   <link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/default/zTreeStyle.css}">
  18.   <link th:href="@{/common/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
  19.   <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.core-3.5.js}"></script>
  20.   <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.excheck-3.5.js}"></script>
  21.   <!--页面访问路径前缀-->
  22.   <script th:inline="javascript"> var ctx = [[@{
  23.     /}]]; </script>
  24.   <style type="text/css">
  25.  
  26.     /*自定义的隔行换色*/
  27.     #user_table tr:nth-child(even){
  28.       background: #fafafa;
  29.     }
  30.     #user_table th{
  31.       background: #efefef;
  32.     }
  33.     /*.select-table {
  34.       background: #fff;
  35.       border-radius: 6px;
  36.       margin-top: 10px;
  37.       padding-top: 5px;
  38.       padding-right: 10px;
  39.       padding-bottom: 13px;
  40.       box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  41.     }*/
  42.      /*.ui-layout-content{
  43.        background: #fff;
  44.        padding: 10px;
  45.        !* position: relative; *!
  46.        overflow: auto;
  47.        border: 0;
  48.        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  49.      }*/
  50.  
  51.      .select-table {/**/
  52.        background: #fff;
  53.        border-radius: 6px;
  54.        margin-top: 10px;
  55.        padding-top: 5px;
  56.        padding-bottom: 13px;
  57.        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  58.      }
  59.   </style>
  60. </head>
  61.  
  62. <body gray-bg style="width: 90%;">
  63. <div class="container-div ui-layout-center">
  64.   <div class="row">
  65.     <div class="col-sm-3 col-xs-4 ui-layout-content">
  66.       <div style="margin-top: 40px;height: 80%;">
  67.         <div style="margin:20px 10px 20px 20px">
  68.           <div style="color: #333;border-bottom: 1px solid #8b8b8b;">
  69.             <h3>组织机构</h3>
  70.           </div>
  71.           <div class="ui-layout-content">
  72.             <ul id="tree" class="ztree"></ul>
  73.           </div>
  74.           <input type="hidden" value="总公司" id="input_hidden"/>
  75.         </div>
  76.       </div>
  77.     </div>
  78.     <div class="col-sm-9 col-xs-8">
  79.       <div style="margin-top: 30px;">
  80.         <h3 style="text-align: center">用户数据表格</h3>
  81.         <div class="row">
  82.           <div class="col-sm-11 select-table" style="margin: 40px 20px 60px 20px">
  83.             <table id="user_table" style="cursor:pointer;"></table>
  84.           </div>
  85.         </div>
  86.       </div>
  87.     </div>
  88.   </div>
  89. </div>
  90. <script th:src="@{/js/user/user.js}"></script>
  91. </body>
  92. </html>

　　3.完整的js

  1. $(function () {
  2.   //1.初始化Table
  3.   var oTable = new TableInit();
  4.   oTable.Init();
  5.   var setting = {
  6.     view: {
  7.       // fontCss : {"font-size":"26px","color":"red"}
  8.     },
  9.     check: {
  10.       //开启jquery.ztree.excheck-3.5.js
  11.       // enable: true,
  12.       // chkStyle: "radio",
  13.       // radioType: "radio"
  14.     },
  15.     edit: {
  16.       /* enable: true,
  17.        drag: {
  18.          isCopy: true,
  19.          isMove: false
  20.        }*/
  21.     },
  22.     async: {
  23.       enable: true,
  24.       url: ctx + "user/getJsonData",
  25.       type: 'post',
  26.       autoParam: ["id"],
  27.     },
  28.     data: {
  29.       simpleData: {
  30.         enable: true,
  31.         idKey: "id",
  32.         pIdKey: "pId",
  33.         rootPId: 0
  34.       }
  35.     },
  36.     callback: {
  37.       onClick: function (event, treeId, treeNode, clickFlag) {
  38.         if (!treeNode.isParent) {
  39.           // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  40.           $("#input_hidden").attr("value", treeNode.name);
  41.           // var input = $("#input_hidden").val();
  42.           // alert(input);
  43.           oTable.Init();
  44.         }
  45.         if (treeNode.isParent) {
  46.           // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  47.           $("#input_hidden").attr("value", treeNode.name);
  48.           // var input = $("#input_hidden").val();
  49.           // alert(input);
  50.           oTable.Init();
  51.         }
  52.       },
  53.       onAsyncError: zTreeOnAsyncError,
  54.       onAsyncSuccess: function (event, treeId, treeNode, msg) {
  55.  
  56.       }
  57.     }
  58.   };
  59.  
  60.   function filter(treeId, parentNode, childNodes) {
  61.     if (!childNodes) {
  62.       return null;
  63.     }
  64.     for (var i = 0, l = childNodes.length; i < l; i++) {
  65.       childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  66.     }
  67.     return childNodes;
  68.   }
  69.  
  70.   function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  71.     alert("加载错误：" + XMLHttpRequest);
  72.   }
  73.  
  74.   $(document).ready(function () {
  75.     $.fn.zTree.init($("#tree"), setting);
  76.   });
  77. })
  78.  
  79. var TableInit = function () {
  80.   var oTableInit = new Object();
  81.   //初始化Table
  82.   oTableInit.Init = function () {
  83.     $('#user_table').bootstrapTable('destroy');
  84.     $('#user_table').bootstrapTable({
  85.       url: ctx + "user/userData",//请求url
  86.       method: 'post',//请求方式
  87.       contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型
  88.       sortOrder: "desc",
  89.       striped: true,   //是否显示行间隔色
  90.       // striped: true, // 是否显示行间隔色
  91.       pagination: true, // 是否分页
  92.       sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
  93.       // showColumns: false, // 是否显示列的按钮
  94.       // detailView: true, // 是否显示父子表
  95.       // showExport: false, // 是否显示导出
  96.       queryParams: queryParams,//传递参数（*）
  97.       columns: [{
  98.         checkbox: true
  99.       },
  100.         {
  101.           title: '序号',// 可不加
  102.           align: "center",
  103.           formatter: function (value, row, index) {
  104.             return index + 1;
  105.           }
  106.         },
  107.         {
  108.           field: 'userId',
  109.           title: '用户编号',
  110.           align: "center",
  111.         },
  112.         {
  113.           field: 'username',
  114.           title: '用户名',
  115.           align: "center",
  116.         },
  117.         {
  118.           field: 'groupname',
  119.           title: '部门',
  120.           align: "center",
  121.         },
  122.         {
  123.           field: 'email',
  124.           title: '邮箱',
  125.           align: "center",
  126.         },
  127.         {
  128.           field: 'telephone',
  129.           title: '电话',
  130.           align: "center",
  131.         }],
  132.     });
  133.  
  134.   };
  135.   return oTableInit;
  136. };
  137.  
  138. //得到查询的参数
  139. function queryParams(params) {
  140.   var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  141.     pageNum: Math.round((params.offset + params.limit) / params.limit),
  142.     pageSize: params.limit,
  143.     //树的名称
  144.     input: $("#input_hidden").val(),
  145.   };
  146.   return temp;
  147. }

　　3.完整controller

  1. package com.example.cetcie8.user.controller;
  2.  
  3. import com.example.cetcie8.user.pojo.TreeUser;
  4. import com.example.cetcie8.user.pojo.User;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.GetMapping;
  9. import org.springframework.web.bind.annotation.PostMapping;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.ResponseBody;
  12.  
  13. /**
  14.  * Description:
  15.  *
  16.  * @Author: zhukaixin
  17.  */
  18. @Controller
  19. @RequestMapping("/user")
  20. public class UserController {
  21.  
  22.   @GetMapping()
  23.   public String view() {
  24.     return "bi/user/userData";
  25.   }
  26.  
  27.   @GetMapping("users")
  28.   public String view1() {
  29.     return "bi/user/user";
  30.   }
  31.  
  32.   @PostMapping("/userData")
  33.   @ResponseBody
  34.   public List<User> userData(String input) {
  35.     List list = new ArrayList(18);
  36.    /* for (int i = 1; i <= 10; i++) {
  37.       User user = new User(i,"用户"+i,"部门"+i,"123456789@qq.com","1881234563"+i);
  38.       list.add(user);
  39.     }*/
  40.     //input = "总公司";
  41.     if (input.equals("总公司")) {
  42.       for (int i = 1; i <= 20; i++) {
  43.         User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
  44.         list.add(user);
  45.       }
  46.     } else if (input.equals("北京公司") || input.equals("上海公司") || input.equals("广州公司")) {
  47.       for (int i = 1; i <= 6; i++) {
  48.         User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
  49.         list.add(user);
  50.       }
  51.     } else {
  52.       for (int i = 2; i <= 6; i++) {
  53.         User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
  54.         list.add(user);
  55.       }
  56.     }
  57.     return list;
  58.   }
  59.  
  60.   /**
  61.    * 将Ztree数据封装成Json数据格式
  62.    * @author zhukaixin
  63.    * @return java.lang.String
  64.    * @throws
  65.    */
  66.   @ResponseBody
  67.   @PostMapping("/getJsonData")
  68.   public String getJsonData() {
  69.     List<TreeUser> list = getAllAuthorize();
  70.     StringBuffer json = new StringBuffer("[");
  71.     String data = "";
  72.     int length = list.size();
  73.     for (int i = 0; i < length; i++) {
  74.       json.append("{id:" + list.get(i).getId() + ",");
  75.       json.append("pId:" + list.get(i).getpId() + ",");
  76.       json.append("name:\"" + list.get(i).getName() + "\",");
  77.       if (list.get(i).getIsParent() != 0) {
  78.         json.append("isParent:" + list.get(i).getIsParent() + ",");
  79.       }
  80.       if (list.get(i).getOpen() != 0) {
  81.         json.append("open:" + list.get(i).getOpen() + ",");
  82.       }
  83.       data = json.substring(0, json.lastIndexOf(",")) + "},";
  84.       json = new StringBuffer(data);
  85.     }
  86.     data = json.substring(0, json.length() - 1) + "]";
  87. //    System.out.println(data);
  88.     return data;
  89.   }
  90.  
  91.   /**
  92.    * 提供Ztree数据
  93.    * @author zhukaixin
  94.    * @return java.util.List<com.example.cetcie8.user.pojo.TreeUser>
  95.    * @throws
  96.    */
  97.   public List<TreeUser> getAllAuthorize() {
  98.     List<TreeUser> list = new ArrayList(18);
  99.     TreeUser treeUser1 = new TreeUser(121, 1, 1, "总公司", 1);
  100.     TreeUser treeUser2 = new TreeUser(122, 121, 0, "北京公司", 1);
  101.     TreeUser treeUser3 = new TreeUser(123, 121, 0, "上海公司", 1);
  102.     TreeUser treeUser4 = new TreeUser(124, 121, 0, "广州公司", 1);
  103.     TreeUser treeUser5 = new TreeUser(125, 121, 1, "中国公司", 1);
  104.     TreeUser treeUser6 = new TreeUser(126, 125, 0, "中国北方公司", 1);
  105.     TreeUser treeUser7 = new TreeUser(127, 121, 1, "上市公司", 1);
  106.     TreeUser treeUser8 = new TreeUser(128, 127, 0, "北京上市分公司", 1);
  107.     TreeUser treeUser9 = new TreeUser(129, 127, 0, "上海上市分公司", 1);
  108.     TreeUser treeUser10 = new TreeUser(130, 121, 1, "香港公司", 1);
  109.     TreeUser treeUser11 = new TreeUser(131, 130, 0, "九龙湾分公司", 1);
  110.     TreeUser treeUser12 = new TreeUser(132, 130, 0, "台北分公司", 1);
  111.     list.add(treeUser1);
  112.     list.add(treeUser2);
  113.     list.add(treeUser3);
  114.     list.add(treeUser4);
  115.     list.add(treeUser5);
  116.     list.add(treeUser6);
  117.     list.add(treeUser7);
  118.     list.add(treeUser8);
  119.     list.add(treeUser9);
  120.     list.add(treeUser10);
  121.     list.add(treeUser11);
  122.     list.add(treeUser12);
  123.     return list;
  124.   }
  125. }

　　4.Pojo

  1. package com.example.cetcie8.user.pojo;
  2.  
  3. /**
  4.  * Description:
  5.  *
  6.  * @Author: zhukaixin
  7.  */
  8. public class User {
  9.  
  10.   //用户编号
  11.   private int userId;
  12.  
  13.   //用户名
  14.   private String username;
  15.  
  16.   //部门
  17.   private String groupname;
  18.  
  19.   //邮箱
  20.   private String email;
  21.  
  22.   //电话
  23.   private String telephone;
  24.  
  25.   @Override
  26.   public String toString() {
  27.     return "User{" +
  28.         "userId=" + userId +
  29.         ", username='" + username + '\'' +
  30.         ", groupname='" + groupname + '\'' +
  31.         ", email='" + email + '\'' +
  32.         ", telephone='" + telephone + '\'' +
  33.         '}';
  34.   }
  35.  
  36.   public User(int userId, String username, String groupname, String email, String telephone) {
  37.     this.userId = userId;
  38.     this.username = username;
  39.     this.groupname = groupname;
  40.     this.email = email;
  41.     this.telephone = telephone;
  42.   }
  43.  
  44.   public void setUserId(int userId) {
  45.     this.userId = userId;
  46.   }
  47.  
  48.   public void setUsername(String username) {
  49.     this.username = username;
  50.   }
  51.  
  52.   public void setGroupname(String groupname) {
  53.     this.groupname = groupname;
  54.   }
  55.  
  56.   public void setEmail(String email) {
  57.     this.email = email;
  58.   }
  59.  
  60.   public void setTelephone(String telephone) {
  61.     this.telephone = telephone;
  62.   }
  63.  
  64.   public int getUserId() {
  65.     return userId;
  66.   }
  67.  
  68.   public String getUsername() {
  69.     return username;
  70.   }
  71.  
  72.   public String getGroupname() {
  73.     return groupname;
  74.   }
  75.  
  76.   public String getEmail() {
  77.     return email;
  78.   }
  79.  
  80.   public String getTelephone() {
  81.     return telephone;
  82.   }
  83. }

　　

  1. package com.example.cetcie8.user.pojo;
  2.  
  3. /**
  4.  * Description:
  5.  *
  6.  * @Author: zhukaixin
  7.  */
  8. public class TreeUser {
  9.  
  10.   private int id ;
  11.   private int pId ;
  12.   private int isParent ;
  13.   private String name ;
  14.   private int open ;
  15.  
  16.   public TreeUser(int id, int pId, int isParent, String name, int open) {
  17.     this.id = id;
  18.     this.pId = pId;
  19.     this.isParent = isParent;
  20.     this.name = name;
  21.     this.open = open;
  22.   }
  23.  
  24.   @Override
  25.   public String toString() {
  26.     return "TreeUser{" +
  27.         "id=" + id +
  28.         ", pId=" + pId +
  29.         ", isParent=" + isParent +
  30.         ", name='" + name + '\'' +
  31.         ", open=" + open +
  32.         '}';
  33.   }
  34.  
  35.   public void setId(int id) {
  36.     this.id = id;
  37.   }
  38.  
  39.   public void setpId(int pId) {
  40.     this.pId = pId;
  41.   }
  42.  
  43.   public void setIsParent(int isParent) {
  44.     this.isParent = isParent;
  45.   }
  46.  
  47.   public void setName(String name) {
  48.     this.name = name;
  49.   }
  50.  
  51.   public void setOpen(int open) {
  52.     this.open = open;
  53.   }
  54.  
  55.   public int getId() {
  56.     return id;
  57.   }
  58.  
  59.   public int getpId() {
  60.     return pId;
  61.   }
  62.  
  63.   public int getIsParent() {
  64.     return isParent;
  65.   }
  66.  
  67.   public String getName() {
  68.     return name;
  69.   }
  70.  
  71.   public int getOpen() {
  72.     return open;
  73.   }
  74. }

Ztree + bootstarp-table 使用的更多相关文章

  1. 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...

  2. ztree-demo

    <!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - Async</TITLE> <met ...

  3. bootstrap-table 列拖动

    1.页面js/css <!-- bootstrap 插件样式 --> <link th:href="@{/common/bootstrap-3.3.6/css/bootst ...

  4. zTree 循环树

    /// <summary> /// 初始化第一次节点加载 /// </summary> /// protected string _menu = string.Empty; p ...

  5. zTree的功能解析

    zTree ,一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.兼容 IE.FireFox.Chrome 等浏览器, ...

  6. zTree的使用2

    前台代码: @using Models; @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <link type="te ...

  7. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  8. 利用ZTree链接数据库实现 [权限管理]

    最近想研究权限管理,看群里有人发了ZTrees模板,我看了下,觉得笔easyUI操作起来更灵活些,于是就开始研究了. 刚开始从网上找了找了个Demo,当然这个并没有实现权限啥的,但实现了前台调用Aja ...

  9. bootstarp 样式细节（tooltip布局）

    在写bootstarp中发现的几个小样式问题,记录以后可能用的到 1.有时候我们想要超过td长度后自动显示省略号,我们会使用 table { table-layout: fixed; } table ...

  10. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

随机推荐

  1. 使用Docker搭建HttpRunnerManager环境

    建立一个HttpRunnerManager的环境需要Mysql,RabbitMQ服务,为简单部署,全部使用Docker 1. 在服务器建立Docker环境 2.建立Mysql容器 docker run ...

  2. 表演的艺术，妖尾回合制战斗系统客户端设计[Unity]

    妖尾历经几年开发,终于在今年6月底顺利上线,笔者从2017年初参与开发,主要负责妖尾战斗系统开发.战斗作为游戏的核心玩法系统,涉及很多技术点,希望能借几篇文字,系统性总结MMORPG战斗系统的开发经验 ...

  3. HBase的java操作，最新API。（查询指定行、列、插入数据等）

    关于HBase环境搭建和HBase的原理架构,请见笔者相关博客. 1.HBase对java有着较优秀的支持,本文将介绍如何使用java操作Hbase. 首先是pom依赖: <dependency ...

  4. javascript判断mp3是否播放完

    javascript判断mp3是否播放完 var audio=document.getElementById('audio'); if(audio){ audio.loop = false; audi ...

  5. python小项目（python实现鉴黄）源码

    import sys import os import _io from collections import namedtuple from PIL import Image class Nude( ...

  6. Python自定义注解

    Python3.0之后加入新特性Decorators,以@为标记修饰function和class.有点类似c++的宏和java的注解.Decorators用以修饰约束function和class,分为 ...

  7. Visual Studio 定制模板类---详细步骤

    1.先定义一个类文件,将要定义的信息写入类文件 比如我每次写一个命令都是这个套路,要继承接口,要写上相应的特性,每次都 是重复的工作: 2.提取类模板 项目=>导出模板 这里你可以导出项目模板和 ...

  8. MySQL for OPS 01：简介 / 安装初始化 / 用户授权管理

    写在前面的话 取这个标题的目的很简单,MySQL 在中小型企业中一般都是由运维来维护的,除非数据很重要的公司可能会聘请 DBA. 但是运维一般存在由于所需要了解的东西很多很杂,导致学习过程中很多东西只 ...

  9. Asp.Net或WebAPI获取表单数据流(批量文件上传)

    //Web或WebAPI获取表单数据流(批量文件上传)        public JsonResult UploadFile()        {            //HttpPostedFi ...

  10. SQL Server 跨服务器、跨版本使用复制 （2008、2012）

    在两台不同的服务器间实现SQL Server 的发布和订阅,需要一些设置. 测试环境:2008数据库.2012数据库,可实现跨版本发布订阅 本次测试是08的数据库做发布端 ,使用08数据及12数据库均 ...