layui文件树Dtree的使用

1.下载Dtree文件

下载地址:https://fly.layui.com/extend/dtree/

将文件解压后放到项目静态文件的位置

2.使用

在页面分别引入dtree.css和dtreefont.css文件

html代码

 <ul id="dataTree2" class="dtree" data-id="0"></ul>

js代码

 layui.config({base: '/static/dtree/' //配置 layui 第三方扩展组件存放的基础目录}).extend({dtree: 'dtree' //定义该组件模块名}).use(['dtree','layer','jquery', ], function(){var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;//树var DemoTree = dtree.render({elem: "#dataTree2",//html中的id值type: "all",url:"/testdata",//urlmethod:"POST",request: {"type":"0"},//传递参数initLevel: "1",icon:'2',firstIconArraylayui:"0",checkbar: true,checkbarType: "no-all",//显示半选中状态success:function (data) {},checkbarFun:{chooseDone: function(checkbarNodesParam) {//点击复选框的事件var datas=dtree.getCheckbarNodesParam("dataTree2");return false;}}});//树的点击事件dtree.on("node('dataTree2')" ,function(obj){var datas=dtree.getCheckbarNodesParam("dataTree2");console.log(datas);});});

java部分

需要一些基础类

1.复选框设计类---CheckArr

/** 复选框设计类*/
public class CheckArr {/** 复选框标记*/private String type;/** 复选框是否选中*/private String isChecked;
//省略get/set方法
}

2.树类----Dtree

/** 树类*/
public class DTree {/** 节点ID*/private String id;/** 上级节点ID*/private String parentId;/** 节点名称*/private String title;/** 是否展开节点*/private Boolean spread;/** 是否最后一级节点*/private Boolean isLast;/** 自定义图标class*/private String iconClass;/** 表示用户自定义需要存储在树节点中的数据*/private Object basicData;/** 复选框集合*/private List<CheckArr> checkArr = new ArrayList<CheckArr>();/** 子节点集合*/private List<DTree> children = new ArrayList<DTree>();
//省略get/set方法
}

3.返回类

/** response返回类*/
public class DTreeResponse {/** 状态码*/private int code;/** 信息标识*/private String msg;/** 状态类*/private Status status;/** 数据*/private Object data;
//省略get/set方法
}

4.信息状态类

/** 信息状态类*/
public class Status {/** 状态码*/private int code = 200;/** 信息标识*/private String message = "success";
//省略get/set方法
}

5.java逻辑代码

 @RequestMapping(value = "/testdata")@ResponseBodypublic DTreeResponse getdata(HttpServletRequest request){String type = request.getParameter("type");if (type.equals("0")){type="类型";}else if (type.equals("1")){type="电务段";}else if (type.equals("2")){type="车间";}else {type="线路";}List<CheckArr> checkArrs=new ArrayList<>();CheckArr checkArr=new CheckArr();checkArr.setType("0");checkArr.setIsChecked("0");checkArrs.add(checkArr);List<DTree> sons = new ArrayList<DTree>();for (int i=0;i<10;i++){DTree d=new DTree();d.setId("10"+i);d.setParentId("001");d.setTitle(type+"=="+i);d.setCheckArr(checkArrs);sons.add(d);}DTree father=new DTree();father.setId("001");father.setTitle(type);father.setCheckArr(checkArrs);father.setParentId("0");father.setChildren(sons);father.setIconClass("-1");List<DTree> f=new ArrayList<>();f.add(father);DTreeResponse response=new DTreeResponse();response.setData(f);response.setStatus(new Status());System.out.println(response.toString());return response;}

layui文件树Dtree的使用相关推荐

STM32固件库文件树及构成详解
(想要pfd格式文件的可以留下邮箱) STM32固件库文件树及构成详解(库版本:STM32F10x_StdPeriph_Lib_V3.5.0) 库减压后所有文件夹构成如下: /
STM32F103构建固件库模板(PS固件库文件树介绍)
参考:STM32F103ZE新建固件库模板作者:追兮兮发布时间:2020-10-14 10:31:45 网址:https://blog.csdn.net/weixin_44234294/artic ...
Layui导航树美化
2019独角兽企业重金招聘Python工程师标准>>> 1.Layui导航树美化 1.1.引入美化的CSS(自定义) /*左侧导航使用方法:skin: 'sidebar' */ . ...
linux转为root用户_[R] 展示linux文件树 - collapsibleTree
效果如下数据可视化 - linux treehttps://www.zhihu.com/video/1091763629531254784 scatterlist list_for_each_ent ...
layui文件上传后台（带自定参数）
记录layui文件上传方法,前端页面直接看layui文件上传相关文档就行,主要是记录后端Java接收上传流并保存的方法 layui文档:https://www.layui.com/doc/module ...
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
layui文件上传等待动画
layui文件上传等待动画 //加载动画 layer.msg('图片上传中...', {icon: 16,shade: 0.01,time: 0 }) //关闭动画 layer.close(layer ...
layui文件上传接口后端具体实现SpringMVC
做课程设计时候,用到了layui文件上传接口,参考官方文档给出的响应接口文档: {"code": 0,"msg": "","dat ...
layui文件上传(头像上传)
头像上传头像上传大概流程就是选择电脑上的文件图片然后上传到服务器服务器存起来然后上传到浏览器中,服务器需要用到磁盘存储模块(multer),需要下载安装 multer是Nodejs中用于处理文件上传 ...

layui文件树Dtree的使用

layui文件树Dtree的使用相关推荐

最新文章

热门文章