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

阳光穿透心脏的1/2处 2023-05-31 12:24 16阅读 0赞

## **一、** ##

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

## 二、 ##

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

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

## 三、 ##

1.  首先，下载dtree，如下图，放在项目静态文件目录  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70]
2.  页面引入css，如下，你会看到，没有引入js，是因为，js可以用layui直接加载，后面提供方法；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 1]
3.  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的DOM
    		elem : "#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);
    	});
    });

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

@RequestMapping(value = "/initOrgTree", method = RequestMethod.POST)
    	@ResponseBody
    	public 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{
    
    	@Autowired
    	private DtreeDao dtreeDao;
    
    	@Override
    	public 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();
    
    	@Override
    	public 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;
    	}
    
    	@Override
    	public 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方法...)
    }

## 四、 ##

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 2]  
ps：当前显示的是我根据当前登录人设置的默认。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 3]  
嗯嗯，大概就是这样的效果了，双击，或者点击选中一个点确认选择，都是可以的

## 五、 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70]: /images/20230531/5a83fb56905c4cfb83178ca8ba304d76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 1]: /images/20230531/646b64b1fcbe42db8be488b1debfc825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 2]: /images/20230531/84108718619b421fa752a49c79211a82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzQxMTMz_size_16_color_FFFFFF_t_70 3]: /images/20230531/c6af5a9589e346d2ba0680f135d5a582.png