1 Star 23 Fork 6

yongdon / 异步树形选择器(支持默认值显示)

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

异步树形选择器

介绍

仿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都是同一条,只是参数不一样 输入图片说明

示例图 输入图片说明

Repository Comments ( 18 )

Sign in to post a comment

About

仿select的异步树形选择器,是基于layui的,用了layui的样式和插件增加方式。 默认值显示 需要后台逻辑支持 expand collapse
Java
Apache-2.0
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
Java
1
https://gitee.com/yongdon/asynchronous_tree_selector.git
git@gitee.com:yongdon/asynchronous_tree_selector.git
yongdon
asynchronous_tree_selector
异步树形选择器(支持默认值显示)
master

Search