layuidtree — dtree

羽渡尘

已于 2023-12-05 09:11:38 修改

阅读量4.3k

点赞数 1

分类专栏：全代码文章标签： layuidtree dtree

于 2019-04-04 17:19:33 首次发布

本文链接：https://blog.csdn.net/qq_36910987/article/details/89029604

版权

全代码专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先上页面

<!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 + "]";
	}

	

}