Layui第三方Dtree的使用—

一、

最近使用layui做了个项目，由于合同额小，也不需要太多繁琐复杂的处理，于是前端选用的layui。但是用到layui的树时，layui对树支持的不太好，后来找到了Dtree这个第三方插件。

二、

官网：http://www.wisdomelon.com/DTreeHelper/

里面有很多示例和使用帮助，我要实现的是，点一个input标签，然后打开一个树页面，选取一个节点，然后把选中的节点信息返回到input标签里。废话不多说，只说我是怎么用的。

三、

首先，下载dtree，如下图，放在项目静态文件目录
页面引入css，如下，你会看到，没有引入js，是因为，js可以用layui直接加载，后面提供方法；
js，加载dtree，并且初始化树

layui.extend({dtree : basePath + '/pack/dtree/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
}).use([ 'dtree', 'layer', 'jquery' ], function() {var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;var DTree = dtree.render({// obj: $(layero).find("#openTree1"),// 如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOMelem : "#demoTree",url : basePath+ "/ach/common/initOrgTree",method : 'POST',initLevel: 2,  // 指定初始展开节点级别cache: false  // 当取消节点缓存时，则每次加载子节点都会往服务器发送请求});// 绑定节点的双击dtree.on("nodedblclick('demoTree')", function(obj) {var index = parent.layer.getFrameIndex(window.name); //获取窗口索引parent.setObject(obj.param);parent.layer.close(index);});$('#commit').on('click', function() {var obj = dtree.getNowParam("demoTree");var index = parent.layer.getFrameIndex(window.name); //获取窗口索引parent.setObject(obj);parent.layer.close(index);});
});

后台代码
controller：接收一个参数，就是当前节点id，来实现异步加载树。

 @RequestMapping(value = "/initOrgTree", method = RequestMethod.POST)@ResponseBodypublic TreeResDto initOrgTree(String nodeId) {TreeResDto res = new TreeResDto();TreeStatusDto status = new TreeStatusDto();status.setCode("200");status.setMessage("成功");res.setStatus(status);List<TreeNodeDto> data = new ArrayList<TreeNodeDto>();data = dtreeService.getData(nodeId);res.setData(data);return res;}

service：

@Service("dtreeService")
@Lazy
@Transactional(readOnly = false)
public class DtreeServiceImpl implements DtreeService{@Autowiredprivate DtreeDao dtreeDao;@Overridepublic List<TreeNodeDto> getData(String id) {List<TreeNodeDto> resList = new ArrayList<TreeNodeDto>();if(StringUtils.isBlank(id)){// 获取根节点Map<String, Object> rootMap = dtreeDao.getRootNode();TreeNodeDto rootNode = new TreeNodeDto();rootNode.setId((String) rootMap.get("C_HID"));rootNode.setTitle((String) rootMap.get("C_NAME"));rootNode.setBasicData(rootMap);rootNode.setParentId("-1");rootNode.setIconClass("dtree-icon-home1");rootNode.setLast(false);List<Map<String, Object>> childrenList = dtreeDao.getChildrenNode((String)rootMap.get("C_HID"));List<TreeNodeDto> childList = new ArrayList<TreeNodeDto>();for (Map<String, Object> cMap : childrenList) {TreeNodeDto child = new TreeNodeDto();child.setId((String) cMap.get("C_HID"));child.setTitle((String) cMap.get("C_NAME"));child.setBasicData(cMap);child.setParentId((String) cMap.get("parentId"));child.setLast(false); // child.setLast((Boolean) cMap.get("hashChild"));// 判断是否为公司if("0".equals(cMap.get("C_TYPE"))){child.setIconClass("dtree-icon-xiangmuxiaoxi");}else{child.setIconClass("dtree-icon-fenzhijigou");}childList.add(child);}rootNode.setChildren(childList);resList.add(rootNode);}else{// 循环根节点查找子节点List<Map<String, Object>> childrenList =  dtreeDao.getChildrenNode(id);for (Map<String, Object> cMap : childrenList) {TreeNodeDto child = new TreeNodeDto();child.setId((String) cMap.get("C_HID"));child.setTitle((String) cMap.get("C_NAME"));child.setBasicData(cMap);child.setParentId((String) cMap.get("parentId"));child.setLast(false); // child.setLast((Boolean) cMap.get("hashChild"));// 判断是否为公司if("0".equals(cMap.get("C_TYPE"))){child.setIconClass("dtree-icon-xiangmuxiaoxi");}else{child.setIconClass("dtree-icon-fenzhijigou");}resList.add(child);}}return resList;}
}

dao：（这个可以忽略不看，因为low的让我自己都觉得丢人。。。）

@Repository
public class DtreeDaoImpl implements DtreeDao{private JdbcOperator jdbcOperator = JdbcOperator.getInstance();@Overridepublic Map<String, Object> getRootNode() {StringBuilder sql = new StringBuilder();sql.append("select * ");sql.append("from TB_ORG_ORGUNIT ");sql.append("where C_HID = '7f304de353c358egcfg267f023db8f25' ");Map<String, Object> res = this.jdbcOperator.queryForMap(sql.toString());return res;}@Overridepublic List<Map<String, Object>> getChildrenNode(String id) {StringBuilder sql = new StringBuilder();sql.append(" SELECT org_.C_OID,org_.C_NAME,org_.C_TYPE,org_.C_CODE,org_.C_EST_DATE,org_.C_LEVEL,");sql.append(" org_.C_LOCATION_HID,org_.C_STATUS,org_.C_BEGIN_DATE,org_.C_END_DATE,org_.C_HID,relationTable.C_SUPERIOR_HID parentId ");sql.append(" FROM TB_ORG_ORGUNIT org_, TB_ORG_UNITRELATION relationTable ");sql.append(" WHERE org_.C_HID = relationTable.C_ORG_HID ");sql.append(" AND relationTable.C_SUPERIOR_HID = :id ");//'7f304de353c358egcfg267f023db8f25'sql.append(" AND relationTable.C_BEGIN_DATE <= :now ");sql.append(" AND relationTable.C_END_DATE >= :now ");sql.append(" AND org_.C_BEGIN_DATE <= :now  ");sql.append(" AND org_.C_END_DATE >= :now  ");sql.append(" AND org_.C_STATUS =1   ");sql.append(" AND relationTable.C_STATUS =1  ");sql.append(" ORDER BY relationTable.C_DISPLAYNO,org_.C_EST_DATE ");Map<String, Object> map = new HashMap<String, Object>();map.put("id", id);map.put("now", new Date());List<Map<String, Object>> res = this.jdbcOperator.queryForMapList(sql.toString(), map);return res;}
}

dto：重要因为，就相当于，我把插件需要的那些关键名，封成javabean，返回给前端，这样，就不需要再一个个转了，可以直接拿过去用，另外需要的可根据自己的需要再新加。

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

四、

效果：

ps：当前显示的是我根据当前登录人设置的默认。。。

嗯嗯，大概就是这样的效果了，双击，或者点击选中一个点确认选择，都是可以的

五、

综上，个人蛮喜欢layui的总体风格的，这个dtree也是非常的契合layui，总之，这个项目用起来还是挺爽的。
反正我爽了，你们要不要去爽一下？！哈哈

Layui第三方Dtree的使用——简单记录相关推荐

python 绘图脚本系列简单记录
简单记录平时画图用到的python 便捷小脚本 1. 从单个文件输入绘制坐标系图 #!/usr/bin/python # coding: utf-8 import matplotlib.pyplot ...
ubuntu bind9 配置简单记录
ubuntu bind9 配置简单记录 ubuntu版本:Ubuntu 12.04.2 bind9安装:apt-get install bind9 bind9配置文件目录:/etc/bind bind ...
简单记录一下fabric版本1.4的环境搭建，
简单记录一下fabric版本1.4的环境搭建,运行环境为Ubuntu18.04,其中一些内容是根据官方文档整理的,如有错误欢迎批评指正. 本文只介绍最简单的环境搭建方法,具体的环境搭建解析在这里深入解 ...
oracle 9i 手工建库,简单记录Oracle 9i数据库手工建库过程
简单记录Oracle 9i数据库手工建库过程Oracle 9i手工建库 By Oracle老菜今天客户要用oracle 9.2.0.5,aix 6.1已经不支持了,只好从别的数据库把软件拷贝过来重编 ...
mysql signal函数_MySQL：简单记录信号处理
码版本:5.7.29 简单记录信号如何生效的.poll收到信号后如何中断后如何处理的,需要确认. --- ###一初始化信号处理方式,设置信号的处理的处理方式,屏蔽某些信号,并且继承到子线程(pth ...
简单记录双系统安装Ububtu22.04
简单记录双系统安装Ububtu22.04 tag: #Linux #Ubuntu 双系统安装Ububtu22.04 设备:R9000P 2021 系统:win11 + ubuntu22.04 1.制作 ...
关于majaro安装后的配置，简单记录机型华硕FZ53v
关于majaro安装后的配置,简单记录机型华硕FZ53v 关于majaro安装后的配置,简单记录机型华硕FZ53v 关于majaro安装后的配置,简单记录机型华硕FZ53v ##关于v2ray配 ...
简单记录下几家公司的面试经历(Java一年经验)
一年经验,记录下最近几家公司的面试经历. 1.深圳缇铭科技有限公司 1)先让自我介绍,讲一下最近的项目根据项目提问,比如: redis你是如何部署的?你的code是直接套用他们的模板去编写,还是自己 ...
git版本回退简单记录
简单记录git版本回退的命令,参考的是这篇文章1 首先查看以前存档的版本: git log 1. 知道要回退的版本和现在的版本差了多少代回退上一代版本(1个以前) git reset –hard H ...

Layui第三方Dtree的使用——简单记录

一、

二、

三、

四、

五、

Layui第三方Dtree的使用——简单记录相关推荐

最新文章

热门文章