Ztree + bootstarp-table 使用

Ztree + bootstarp-table  使用

一. Ztree 

　　1.引入js/css文件

　　 Ztree官网 

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

　　2.页面定义/html

 <div >
            <ul id="tree" class="ztree"></ul>
 </div>

　　3.页面初始化js

$(function () {

  var setting = {
    view: {
      // fontCss : {"font-size":"26px","color":"red"}
    },
    check: {
      //开启jquery.ztree.excheck-3.5.js
      // enable: true,
      // chkStyle: "radio",
      // radioType: "radio"
    },
    edit: {
      /* enable: true,
       drag: {
         isCopy: true,
         isMove: false
       }*/
    },
    async: {
      enable: true,
      url: ctx + "user/getJsonData",//url地址
      type: 'post',
      autoParam: ["id"],
    },
    data: {
      simpleData: {
        enable: true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: 0
      }
    },
    callback: {
      onClick: function (event, treeId, treeNode, clickFlag) {
        if (!treeNode.isParent) {
          // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
          $("#input_hidden").attr("value", treeNode.name);
          // var input = $("#input_hidden").val();
          // alert(input);
          oTable.Init();
        }
        if (treeNode.isParent) {
          // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
          $("#input_hidden").attr("value", treeNode.name);
          // var input = $("#input_hidden").val();
          // alert(input);
          oTable.Init();
        }
      },
      onAsyncError: zTreeOnAsyncError,
      onAsyncSuccess: function (event, treeId, treeNode, msg) {

      }
    }
  };

  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 zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
    alert("加载错误：" + XMLHttpRequest);
  }

  $(document).ready(function () {
    $.fn.zTree.init($("#tree"), setting);
  });
})

　　

　　4.controller 层 

/**
   * 提供Ztree数据
   * @author zhukaixin
   * @return java.util.List<com.example.cetcie8.user.pojo.TreeUser>
   * @throws
   */
  public List<TreeUser> getAllAuthorize() {
    List<TreeUser> list = new ArrayList(18);
    TreeUser treeUser1 = new TreeUser(121, 1, 1, "总公司", 1);
    TreeUser treeUser2 = new TreeUser(122, 121, 0, "北京公司", 1);
    TreeUser treeUser3 = new TreeUser(123, 121, 0, "上海公司", 1);
    TreeUser treeUser4 = new TreeUser(124, 121, 0, "广州公司", 1);
    TreeUser treeUser5 = new TreeUser(125, 121, 1, "中国公司", 1);
    TreeUser treeUser6 = new TreeUser(126, 125, 0, "中国北方公司", 1);
    TreeUser treeUser7 = new TreeUser(127, 121, 1, "上市公司", 1);
    TreeUser treeUser8 = new TreeUser(128, 127, 0, "北京上市分公司", 1);
    TreeUser treeUser9 = new TreeUser(129, 127, 0, "上海上市分公司", 1);
    TreeUser treeUser10 = new TreeUser(130, 121, 1, "香港公司", 1);
    TreeUser treeUser11 = new TreeUser(131, 130, 0, "九龙湾分公司", 1);
    TreeUser treeUser12 = new TreeUser(132, 130, 0, "台北分公司", 1);
    list.add(treeUser1);
    list.add(treeUser2);
    list.add(treeUser3);
    list.add(treeUser4);
    list.add(treeUser5);
    list.add(treeUser6);
    list.add(treeUser7);
    list.add(treeUser8);
    list.add(treeUser9);
    list.add(treeUser10);
    list.add(treeUser11);
    list.add(treeUser12);
    return list;
  }

/**
   * 将Ztree数据封装成Json数据格式
   * @author zhukaixin
   * @return java.lang.String
   * @throws
   */
  @ResponseBody
  @PostMapping("/getJsonData")
  public String getJsonData() {
    List<TreeUser> list = getAllAuthorize();
    StringBuffer json = new StringBuffer("[");
    String data = "";
    int length = list.size();
    for (int i = 0; i < length; i++) {
      json.append("{id:" + list.get(i).getId() + ",");
      json.append("pId:" + list.get(i).getpId() + ",");
      json.append("name:\"" + list.get(i).getName() + "\",");
      if (list.get(i).getIsParent() != 0) {
        json.append("isParent:" + list.get(i).getIsParent() + ",");
      }
      if (list.get(i).getOpen() != 0) {
        json.append("open:" + list.get(i).getOpen() + ",");
      }
      data = json.substring(0, json.lastIndexOf(",")) + "},";
      json = new StringBuffer(data);
    }
    data = json.substring(0, json.length() - 1) + "]";
//    System.out.println(data);
    return data;
  }

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

 

 

二 、bootStarp-table 整合 Ztree 

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

　　2.完整的html代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户页面</title>
  <!--Jquery-->
  <script th:src="@{/js/jquery.js}"></script>
  <!--bootstrap-->
  <script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>
  <link rel="stylesheet" th:href="@{/common/bootstrap/css/bootstrap.min.css}">
  <!--bootstrap-table-->
  <script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>
  <link rel="stylesheet" th:href="@{/common/bootstrap-table/bootstrap-table.css}">
  <script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
  <!--ztree-->
  <!--<link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/simple/zTreeStyle.css}">-->
  <link rel="stylesheet" th:href="@{/common/jquery-ztree/3.5/css/default/zTreeStyle.css}">
  <link th:href="@{/common/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
  <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.core-3.5.js}"></script>
  <script th:src="@{/common/jquery-ztree/3.5/js/jquery.ztree.excheck-3.5.js}"></script>
  <!--页面访问路径前缀-->
  <script th:inline="javascript"> var ctx = [[@{
    /}]]; </script>
  <style type="text/css">

    /*自定义的隔行换色*/
    #user_table tr:nth-child(even){
      background: #fafafa;
    }
    #user_table th{
      background: #efefef;
    }
    /*.select-table {
      background: #fff;
      border-radius: 6px;
      margin-top: 10px;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 13px;
      box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    }*/
     /*.ui-layout-content{
       background: #fff;
       padding: 10px;
       !* position: relative; *!
       overflow: auto;
       border: 0;
       box-shadow: 1px 1px 3px rgba(0,0,0,.2);
     }*/

     .select-table {/**/
       background: #fff;
       border-radius: 6px;
       margin-top: 10px;
       padding-top: 5px;
       padding-bottom: 13px;
       box-shadow: 1px 1px 3px rgba(0,0,0,.2);
     }
  </style>
</head>

<body gray-bg style="width: 90%;">
<div class="container-div ui-layout-center">
  <div class="row">
    <div class="col-sm-3 col-xs-4 ui-layout-content">
      <div style="margin-top: 40px;height: 80%;">
        <div style="margin:20px 10px 20px 20px">
          <div style="color: #333;border-bottom: 1px solid #8b8b8b;">
            <h3>组织机构</h3>
          </div>
          <div class="ui-layout-content">
            <ul id="tree" class="ztree"></ul>
          </div>
          <input type="hidden" value="总公司" id="input_hidden"/>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-xs-8">
      <div style="margin-top: 30px;">
        <h3 style="text-align: center">用户数据表格</h3>
        <div class="row">
          <div class="col-sm-11 select-table" style="margin: 40px 20px 60px 20px">
            <table id="user_table" style="cursor:pointer;"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/js/user/user.js}"></script>
</body>
</html>

　　3.完整的js

$(function () {
  //1.初始化Table
  var oTable = new TableInit();
  oTable.Init();
  var setting = {
    view: {
      // fontCss : {"font-size":"26px","color":"red"}
    },
    check: {
      //开启jquery.ztree.excheck-3.5.js
      // enable: true,
      // chkStyle: "radio",
      // radioType: "radio"
    },
    edit: {
      /* enable: true,
       drag: {
         isCopy: true,
         isMove: false
       }*/
    },
    async: {
      enable: true,
      url: ctx + "user/getJsonData",
      type: 'post',
      autoParam: ["id"],
    },
    data: {
      simpleData: {
        enable: true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: 0
      }
    },
    callback: {
      onClick: function (event, treeId, treeNode, clickFlag) {
        if (!treeNode.isParent) {
          // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
          $("#input_hidden").attr("value", treeNode.name);
          // var input = $("#input_hidden").val();
          // alert(input);
          oTable.Init();
        }
        if (treeNode.isParent) {
          // alert("treeId自动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
          $("#input_hidden").attr("value", treeNode.name);
          // var input = $("#input_hidden").val();
          // alert(input);
          oTable.Init();
        }
      },
      onAsyncError: zTreeOnAsyncError,
      onAsyncSuccess: function (event, treeId, treeNode, msg) {

      }
    }
  };

  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 zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
    alert("加载错误：" + XMLHttpRequest);
  }

  $(document).ready(function () {
    $.fn.zTree.init($("#tree"), setting);
  });
})

var TableInit = function () {
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $('#user_table').bootstrapTable('destroy');
    $('#user_table').bootstrapTable({
      url: ctx + "user/userData",//请求url
      method: 'post',//请求方式
      contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型
      sortOrder: "desc",
      striped: true,   //是否显示行间隔色
      // striped: true, // 是否显示行间隔色
      pagination: true, // 是否分页
      sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
      // showColumns: false, // 是否显示列的按钮
      // detailView: true, // 是否显示父子表
      // showExport: false, // 是否显示导出
      queryParams: queryParams,//传递参数（*）
      columns: [{
        checkbox: true
      },
        {
          title: '序号',// 可不加
          align: "center",
          formatter: function (value, row, index) {
            return index + 1;
          }
        },
        {
          field: 'userId',
          title: '用户编号',
          align: "center",
        },
        {
          field: 'username',
          title: '用户名',
          align: "center",
        },
        {
          field: 'groupname',
          title: '部门',
          align: "center",
        },
        {
          field: 'email',
          title: '邮箱',
          align: "center",
        },
        {
          field: 'telephone',
          title: '电话',
          align: "center",
        }],
    });

  };
  return oTableInit;
};

//得到查询的参数
function queryParams(params) {
  var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    pageNum: Math.round((params.offset + params.limit) / params.limit),
    pageSize: params.limit,
    //树的名称
    input: $("#input_hidden").val(),
  };
  return temp;
}

　　3.完整controller 

package com.example.cetcie8.user.controller;

import com.example.cetcie8.user.pojo.TreeUser;
import com.example.cetcie8.user.pojo.User;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * Description:
 *
 * @Author: zhukaixin
 */
@Controller
@RequestMapping("/user")
public class UserController {

  @GetMapping()
  public String view() {
    return "bi/user/userData";
  }

  @GetMapping("users")
  public String view1() {
    return "bi/user/user";
  }


  @PostMapping("/userData")
  @ResponseBody
  public List<User> userData(String input) {
    List list = new ArrayList(18);
   /* for (int i = 1; i <= 10; i++) {
      User user = new User(i,"用户"+i,"部门"+i,"123456789@qq.com","1881234563"+i);
      list.add(user);
    }*/
    //input = "总公司";
    if (input.equals("总公司")) {
      for (int i = 1; i <= 20; i++) {
        User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
        list.add(user);
      }
    } else if (input.equals("北京公司") || input.equals("上海公司") || input.equals("广州公司")) {
      for (int i = 1; i <= 6; i++) {
        User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
        list.add(user);
      }
    } else {
      for (int i = 2; i <= 6; i++) {
        User user = new User(i, "用户" + i, "部门" + i, "123456789@qq.com", "1881234563" + i);
        list.add(user);
      }
    }
    return list;
  }


  /**
   * 将Ztree数据封装成Json数据格式
   * @author zhukaixin
   * @return java.lang.String
   * @throws
   */
  @ResponseBody
  @PostMapping("/getJsonData")
  public String getJsonData() {
    List<TreeUser> list = getAllAuthorize();
    StringBuffer json = new StringBuffer("[");
    String data = "";
    int length = list.size();
    for (int i = 0; i < length; i++) {
      json.append("{id:" + list.get(i).getId() + ",");
      json.append("pId:" + list.get(i).getpId() + ",");
      json.append("name:\"" + list.get(i).getName() + "\",");
      if (list.get(i).getIsParent() != 0) {
        json.append("isParent:" + list.get(i).getIsParent() + ",");
      }
      if (list.get(i).getOpen() != 0) {
        json.append("open:" + list.get(i).getOpen() + ",");
      }
      data = json.substring(0, json.lastIndexOf(",")) + "},";
      json = new StringBuffer(data);
    }
    data = json.substring(0, json.length() - 1) + "]";
//    System.out.println(data);
    return data;
  }

  /**
   * 提供Ztree数据
   * @author zhukaixin
   * @return java.util.List<com.example.cetcie8.user.pojo.TreeUser>
   * @throws
   */
  public List<TreeUser> getAllAuthorize() {
    List<TreeUser> list = new ArrayList(18);
    TreeUser treeUser1 = new TreeUser(121, 1, 1, "总公司", 1);
    TreeUser treeUser2 = new TreeUser(122, 121, 0, "北京公司", 1);
    TreeUser treeUser3 = new TreeUser(123, 121, 0, "上海公司", 1);
    TreeUser treeUser4 = new TreeUser(124, 121, 0, "广州公司", 1);
    TreeUser treeUser5 = new TreeUser(125, 121, 1, "中国公司", 1);
    TreeUser treeUser6 = new TreeUser(126, 125, 0, "中国北方公司", 1);
    TreeUser treeUser7 = new TreeUser(127, 121, 1, "上市公司", 1);
    TreeUser treeUser8 = new TreeUser(128, 127, 0, "北京上市分公司", 1);
    TreeUser treeUser9 = new TreeUser(129, 127, 0, "上海上市分公司", 1);
    TreeUser treeUser10 = new TreeUser(130, 121, 1, "香港公司", 1);
    TreeUser treeUser11 = new TreeUser(131, 130, 0, "九龙湾分公司", 1);
    TreeUser treeUser12 = new TreeUser(132, 130, 0, "台北分公司", 1);
    list.add(treeUser1);
    list.add(treeUser2);
    list.add(treeUser3);
    list.add(treeUser4);
    list.add(treeUser5);
    list.add(treeUser6);
    list.add(treeUser7);
    list.add(treeUser8);
    list.add(treeUser9);
    list.add(treeUser10);
    list.add(treeUser11);
    list.add(treeUser12);
    return list;
  }
}

　　4.Pojo

package com.example.cetcie8.user.pojo;

/**
 * Description:
 *
 * @Author: zhukaixin
 */
public class User {

  //用户编号
  private int userId;

  //用户名
  private String username;

  //部门
  private String groupname;

  //邮箱
  private String email;

  //电话
  private String telephone;

  @Override
  public String toString() {
    return "User{" +
        "userId=" + userId +
        ", username='" + username + '\'' +
        ", groupname='" + groupname + '\'' +
        ", email='" + email + '\'' +
        ", telephone='" + telephone + '\'' +
        '}';
  }

  public User(int userId, String username, String groupname, String email, String telephone) {
    this.userId = userId;
    this.username = username;
    this.groupname = groupname;
    this.email = email;
    this.telephone = telephone;
  }

  public void setUserId(int userId) {
    this.userId = userId;
  }

  public void setUsername(String username) {
    this.username = username;
  }

  public void setGroupname(String groupname) {
    this.groupname = groupname;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public void setTelephone(String telephone) {
    this.telephone = telephone;
  }

  public int getUserId() {
    return userId;
  }

  public String getUsername() {
    return username;
  }

  public String getGroupname() {
    return groupname;
  }

  public String getEmail() {
    return email;
  }

  public String getTelephone() {
    return telephone;
  }
}

　　

package com.example.cetcie8.user.pojo;

/**
 * Description:
 *
 * @Author: zhukaixin
 */
public class TreeUser {

  private int id ;
  private int pId ;
  private int isParent ;
  private String name ;
  private int open ;

  public TreeUser(int id, int pId, int isParent, String name, int open) {
    this.id = id;
    this.pId = pId;
    this.isParent = isParent;
    this.name = name;
    this.open = open;
  }

  @Override
  public String toString() {
    return "TreeUser{" +
        "id=" + id +
        ", pId=" + pId +
        ", isParent=" + isParent +
        ", name='" + name + '\'' +
        ", open=" + open +
        '}';
  }

  public void setId(int id) {
    this.id = id;
  }

  public void setpId(int pId) {
    this.pId = pId;
  }

  public void setIsParent(int isParent) {
    this.isParent = isParent;
  }

  public void setName(String name) {
    this.name = name;
  }

  public void setOpen(int open) {
    this.open = open;
  }

  public int getId() {
    return id;
  }

  public int getpId() {
    return pId;
  }

  public int getIsParent() {
    return isParent;
  }

  public String getName() {
    return name;
  }

  public int getOpen() {
    return open;
  }
}