使用Layui Select框集成Ztree

最新推荐文章于 2024-09-07 14:03:36 发布

Gxttsmn

最新推荐文章于 2024-09-07 14:03:36 发布

阅读量1.6k

点赞数

分类专栏：前端开发文章标签： ztree+select select框集成ztree ztrees使用

本文链接：https://blog.csdn.net/Gxttsmn/article/details/97629447

版权

本文介绍了一个项目需求，即在select框中显示一个两级树结构，使用Ztree进行异步加载并仅展示根节点及其子节点。通过引入Ztree插件，完成html和js代码的编写，实现了预期效果。

摘要由CSDN通过智能技术生成

前几天项目中有个需求，需要在select 框中加载一个两层的树（树本身是无线级，但需求是只要获取根节点及根节点的下级节点）。

具体样式如图：

这里因为采用异步加载树，所以使用Ztree 进行开发，完成后效果如上图。

整个开发过程还是有点繁琐的，下边将所作的做一个整理。

引入ztree 插件省略。。。

界面html 代码，构建select 元素

<div class="layui-inline">
     <label class="layui-form-label">库房名称：</label>
     <div class="layui-input-inline">
          <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>
     </div>
</div>

js 渲染ztree组件：

$(document).ready(function() {
    initStoreTree();
});

//请求数据
function initStoreTree(){
	$.ajax({
		method : 'post',
		url : '${ctxPath}/store/management/getList',
		data : {"pid" : 0 },
		success : function(res) {
			var zNodes = JSON.parse(res);
			for ( var i in zNodes) {
				zNodes[i].isParent = true;//默认都是父节点（都有子节点）
			}
			initSelectTree("PDEPT_KEY",zNodes);
		}
	})
}

//渲染组件  固定方法
function initSelectTree(id,zNodes) {
      var setting = {
           data: {
                simpleData: {
                    enable: true
                }
           },
           callback: {
                onClick: onClick,//点击名称触发（选中）