# 异步树形选择器(支持默认值显示) **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都是同一条,只是参数不一样 ![输入图片说明](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")