Ztree + bootstarp-table 使用
一. Ztree
1.引入js/css文件
<!--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;
}
}