layui仿 select 的异步树形选择器-CSDN博客

layui仿 select 的异步树形选择器

示例
1、定义标签

 <input id="test"  value="xxxx" /> <!-- value 为默认值 -->

2、初始化组件

var $ = layui.$;

$(function(){
	layui.config({
		  base: '${pageContext.request.contextPath}/js/layuiExtend' //配置 layui 第三方扩展组件存放的基础目录
		}).extend({
			asynTreeSelect: '/asynTreeSelect'
		}).use(['asynTreeSelect'], function(){
		
		 
	  var asynTreeSelect = layui.asynTreeSelect;
	  
	  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"}]
	});
	var form = layui.form;  
	 form.render();