layui 实现选项框的多级菜单功能总结

最新推荐文章于 2024-08-08 07:24:14 发布

prime1019

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1.1w

点赞数 3

分类专栏：学习笔记

本文链接：https://blog.csdn.net/prime1019/article/details/90043948

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天实现的功能主题是用layui实现多级下拉菜单，上图：

实现界面的话要引入layui的js文件以及cs文件，官方网址为：https://www.layui.com/doc/

在页面头部引入文件，选择自己文件所在路径

html界面核心代码：

<li>

<div class="layui-input-inline">
<div class="layui-unselect layui-form-select downpanel">
<div class="layui-select-title">
<span class="layui-input layui-unselect"> <#if (selectName == selectName)>${(selectName)!}</#if></span>
<input type="hidden" name="selectName" value="${(selectName)!}">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ol id="classtree"></ol>
</dd>
</dl>
</div>
</div>
</li>

此处的input框的作用的获取选择的部门名字的值，这样可以根据部门值来进行条件查询，name中的值在下面会给值

JS代码：

layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
var $ = layui.jquery, tree = layui.tree;
tree({
elem: "#classtree"
,
nodes: ${(nodestree)!}
,
click: function (node) {
var $select = $($(this)[0].elem).parents(".layui-form-select");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectName']").val(node.name);
}
});
$(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
});

});

</script>

js 中的nodes即为结点，多级下拉菜单中的节点固定的话可以是这样：

但是这样只能局限于有限的分级，我的要求是要能从数据库中读取我的全部部门，而且这些部门是多级下拉菜单，分的级数是动态的，所有使用${()!}动态获取部门的值

其中nodestree为java代码中写好的方法

java中的代码如下：

public String nodestree(){
	JSONArray jsonArray = new JSONArray();
	
	 Pager pager = new Pager();
       
        pager.setPageSize(9000);
        pager.setOrderBy("groupName");
        pager.setOrderType(OrderType.asc);
        DetachedCriteria detachedCriteria = DetachedCriteria.forClass(MemberGroup.class); 
        detachedCriteria.add(Restrictions.isNull("parent"));
      
        Pager findByPager =memberGroupService.findByPager(pager, detachedCriteria);
	    
        @SuppressWarnings({ "unchecked", "unused" })
		List<MemberGroup> getMemberList = findByPager.getList();
         
        for(MemberGroup mg:getMemberList){
        	Map<Object,Object> jsonMapList=new HashMap<Object,Object>();
        	jsonMapList.put("name", mg.getGroupName());
        	jsonMapList.put("id", mg.getId());
        	jsonMapList.put("pid", mg.getParent() == null ? "" : mg.getParent().getId());
        	
        	if(mg.getChildren() != null){
        		getChildrenArray(mg, jsonMapList);
        	}
        	
        	jsonArray.add(jsonMapList);
        }
        
       return  jsonArray.toString();
}

private void getChildrenArray(MemberGroup mg, Map<Object, Object> jsonMapList) {
	JSONArray childrenArray = new JSONArray();
	for(MemberGroup children : mg.getChildren()){
		Map<Object,Object> childrenMap = new HashMap<Object,Object>();
		childrenMap.put("name", children.getGroupName());
		childrenMap.put("id", children.getId());
		jsonMapList.put("pid", children.getParent() == null ? "" : children.getParent().getId());
		if(children.getChildren() != null){
    		getChildrenArray(children, childrenMap);
    	}
		childrenArray.add(childrenMap);
	}
	jsonMapList.put("children", childrenArray);
}

这是使用java递归的方式一层层获取部门的值，仔细看会有收获

最后最后特别重要的是：要在界面显示的代码中放入setNodestree(nodestree());显示分级部门，没有这个，界面肯定是不会显示部门的，我就是因为忘记这句代码，找了半天错误！！！！