# 异步树形选择器（支持默认值显示）

**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"}) 此方法可以设置默认值
定义标签
<input id="test"  value="440232" />
```
后台部分代码

```
 @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<HashMap<String, Object>> ls =null;
				HashMap<String, Object> param1 =new HashMap<String, Object>();
				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都是同一条，只是参数不一样
![输入图片说明](https://images.gitee.com/uploads/images/2020/0419/165717_7e17db5f_1660584.png "所有查询为同一个sql（仅查询条件不同）.png")

示例图
![输入图片说明](https://images.gitee.com/uploads/images/2020/0419/165742_42eb2168_1660584.gif "示例.gif")