# 异步树形选择器(支持默认值显示)
**Repository Path**: yongdon/asynchronous_tree_selector
## Basic Information
- **Project Name**: 异步树形选择器(支持默认值显示)
- **Description**: 仿select的异步树形选择器,是基于layui的,用了layui的样式和插件增加方式。
默认值显示 需要后台逻辑支持
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 25
- **Forks**: 7
- **Created**: 2020-04-19
- **Last Updated**: 2023-07-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 异步树形选择器
#### 介绍
仿select的异步树形选择器,是基于layui的,用了layui的样式和插件增加方式。
#### 软件架构
软件架构说明
#### 安装教程
放到web容器执行
#### 使用说明
```
layui.config({
base: '${pageContext.request.contextPath}/js/layuiExtend' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
asynTreeSelect: '/asynTreeSelect'
}).use(['asynTreeSelect'], function(){
var asynTreeSelect = layui.asynTreeSelect;
var asynTreeSelectIns= asynTreeSelect.render({
elem: '#test'
,getCurrentNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取当前节点的请求
,getChildrenNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取子节点的请求
,getBrotherNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取兄弟节点的请求
,paramName:"currNodeId" //请求后台带的参数,此处为区域id
,paramType:"postType" //请求后台自带的参数,获取本节点时候 postType=1,获取子节点时候 postType=2,获取兄弟节点的时候该值为3
//所以后台可以根据此值判断是发出什么请求,getCurrentNodeUrl、getChildrenNodeUrl、getBrotherNodeUrl请求都是同一个就行
,rootNodeValue:"44"
//,defaultValue:"440232"
,separator:"/"
,showRootNode:true //是否显示根节点,默认true
//,maxWidth:400
,response:{
idName:"REALM_ID"
,valueName:"REALM_NAME"
,parentName:"PARENT_ID"
}
/* ,onlick:function(data){
console.log(data)
} */
});
//三个请求返回数据的格式为 [{REALM_ID:"4401",REALM_NAME:"广州",PARENT_ID:"44"},{REALM_ID:"4402",REALM_NAME:"深圳",PARENT_ID:"44"}]
});
//asynTreeSelectIns.reload({defaultValue:"4405"}) 此方法可以设置默认值
定义标签
```
后台部分代码
```
@RequestMapping(value="/test/getRealmByParam1",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
public @ResponseBody List getRealmByParam1(HttpServletRequest request,HttpServletResponse response){
String postType=request.getParameter("postType");
String currNodeId=request.getParameter("currNodeId");
List> ls =null;
HashMap param1 =new HashMap();
if("1".equals(postType)){//此请求为获取本节点数据
param1.put("realmId", currNodeId);
ls =testDao.getRealmByParam(param1);
}else if("2".equals(postType)){//获取子节点
param1.put("parentId", currNodeId);
ls=testDao.getRealmByParam(param1);
}else if("3".equals(postType)){//获取兄弟节点
param1.put("typeIdBrother", currNodeId);
ls=testDao.getRealmByParam(param1);
}
return ls;
}
```
用到的sql都是同一条,只是参数不一样
.png")
示例图
