请先去查看官方文档、不然下面的例子你可能会看不懂
首先上页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>OA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="${base}/util/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="${base}/util/layui/css/dtreefont.css">
<link rel="stylesheet" type="text/css" href="${base}/util/layui/css/dtree.css">
<script type="text/javascript" src="${base}/util/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/util/layui/layui.js"></script>
</head>
<body style="background: #f4fafe;">
<div class="container" style="margin: 45px;">
<div class="layui-row layui-col-space10">
<div class="layui-fluid">
<div class="layui-input-inline">
<input class="layui-input" id="searchInput" value="" placeholder="输入查询内容...">
</div>
<button class="layui-btn layui-btn-normal" id="search_btn">查询</button>
<button class="layui-btn layui-btn-normal" dtree-id="demoTree" dtree-menu="moveDown">展开全部</button>
<button class="layui-btn layui-btn-normal" dtree-id="demoTree" dtree-menu="moveUp">收缩全部</button>
<button class="layui-btn layui-btn-normal" id="checkbarTreea_btna">保存</button>
<ul id="demoTree" class="dtree" data-id="000000"></ul>
</div>
</div>
</div>
</body>
<script>
layui.extend({
dtree: '${base}/util/layui/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
}).use(['dtree','layer','jquery'], function(){
var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
var DemoTree = dtree.render({
elem: "#demoTree",
type: "all",
dataStyle: "layuiStyle",
dot: false, // 隐藏小圆点
//initLevel: 1,//不展开全部,默认展开
skin: "layui", // layui主题风格
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:1}, //修改response中返回数据的定义
url: "${base}/api/apply/menu_list.action",
checkbarData: "change",// 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
checkbar:true, //开启复选框
done: function(data, obj){
$("#search_btn").unbind("click");
$("#search_btn").click(function(){
var value = $("#searchInput").val();
if(value){
var flag = DemoTree.searchNode(value); // 内置方法查找节点
if (!flag) {layer.msg("该名称节点不存在！", {icon:5});}
} else {
DemoTree.menubarMethod().refreshTree(); // 内置方法刷新树
}
});
}
});
//dtree.on("node('demoTree')" ,function(obj){
// layer.msg(JSON.stringify(obj.param));
//});
$("#checkbarTreea_btna").click(function(){
var params = dtree.getCheckbarNodesParam("demoTree");
log(JSON.stringify(params));
$.ajax({
type:'post',
url : '${base}/api/apply/save_menu.action',//list格式数据
data : {"params":JSON.stringify(params)},
success : function(data){
//这里的resultVO 内的方法不用在意 自用的方法
resultVO.checkCode(data, function (data) {
if(data){
DemoTree.menubarMethod().refreshTree(); // 内置方法刷新树
log(data);
}else{
log("凉凉");
}
});
},
error : function(){
layeropen('2','发生意外错误!');
}
});
});
});
</script>
</html>
java
action
/**
* 保存tree
* @param request
* @return
*/
@RequestMapping("/save_menu")
public ResultVO save_menu(HttpServletRequest request,String params) {
//html字符转义
params = StringEscapeUtils.unescapeHtml4(params);
List<json_menu> menus = (List<json_menu>) JSON.parseArray(params, json_menu.class);
System.out.println(menus);
return new ResultVO(applyService.save_menu(menus));
}
serviceImpl
/**铺页面*/
@Override
public List<json_menu> menu_list() {
String sql = "SELECT * FROM SYS_MENU where MENU_CODE <> '105000'";
List<json_menu> json_menus = jdbcTemplate.query(sql, new MyRowMapper());
System.out.println(json_menus);
return json_menus;
}
/**
* 保存tree
* @param request
* @return
*/
@Override
public boolean save_menu(final List<json_menu> menus) {
String sql = "UPDATE SYS_MENU set IF_VIEW = ? where MENU_CODE = ? ";
jdbcTemplate.batchUpdate(sql, new BatchPreparedStatementSetter() {
@Override
public void setValues(PreparedStatement ps, int i) throws SQLException {
ps.setString(1, menus.get(i).getIschecked());
ps.setString(2, menus.get(i).getNodeId());
}
@Override
public int getBatchSize() {
return menus.size();
}
});
return true;
}
vo 用到的实体类
package cn.fulong.web.workApproval.utils;
/**
* 根据dtree文档 建立实体类 负责json化数据
* @author XNYLH
*
*/
public class json_menu {
private String id;
private String title;
private String checkArr;
private String parentId;
private String iconClass;
private String code;
private String message;
private String nodeId;
private String context;
private String isLeaf;
private String level;
private String spread;
private String dataType;
private String ischecked;
private String initchecked;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getCheckArr() {
return checkArr;
}
public void setCheckArr(String checkArr) {
this.checkArr = checkArr;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getIconClass() {
return iconClass;
}
public void setIconClass(String iconClass) {
this.iconClass = iconClass;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = nodeId;
}
public String getContext() {
return context;
}
public void setContext(String context) {
this.context = context;
}
public String getIsLeaf() {
return isLeaf;
}
public void setIsLeaf(String isLeaf) {
this.isLeaf = isLeaf;
}
public String getLevel() {
return level;
}
public void setLevel(String level) {
this.level = level;
}
public String getSpread() {
return spread;
}
public void setSpread(String spread) {
this.spread = spread;
}
public String getDataType() {
return dataType;
}
public void setDataType(String dataType) {
this.dataType = dataType;
}
public String getIschecked() {
return ischecked;
}
public void setIschecked(String ischecked) {
this.ischecked = ischecked;
}
public String getInitchecked() {
return initchecked;
}
public void setInitchecked(String initchecked) {
this.initchecked = initchecked;
}
@Override
public String toString() {
return "json_menu [id=" + id + ", title=" + title + ", checkArr=" + checkArr + ", parentId=" + parentId
+ ", iconClass=" + iconClass + ", code=" + code + ", message=" + message + ", nodeId=" + nodeId
+ ", context=" + context + ", isLeaf=" + isLeaf + ", level=" + level + ", spread=" + spread
+ ", dataType=" + dataType + ", ischecked=" + ischecked + ", initchecked=" + initchecked + "]";
}
}
效果图
js以及css链接 不需要在官方下载了，包含 dtree和layui 密码 : jqki