Layui扩展组件-仿 select 的异步树形选择器（asynTreeSelect）

示例图：

下载地址

https://gitee.com/yongdon/asynchronous_tree_selector

使用

仿select的异步树形选择器，是基于layui的，用了layui的样式和插件增加方式，所以页面要引用layui.js 和layui.css。

 <link href="/layui/css/layui.css" rel="stylesheet" />
 <script type="text/javascript" src="/layui/layui.js"></script>
 <script type="text/javascript">
layui.config({
        base: '/Content/layui/lay/'  //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        asynTreeSelect: '/asynTreeSelect'
    }).use(['asynTreeSelect'], function () {
       var asynTreeSelect = layui.asynTreeSelect;
       var asynTreeSelectIns= asynTreeSelect.render({
			    elem: '#test'
			    ,getCurrentNodeUrl:"/Home/_GetDistricts" //根据paramName获取当前节点的请求
			    ,getChildrenNodeUrl:"/Home/_GetDistricts" //根据paramName获取子节点的请求
			    ,getBrotherNodeUrl:"/Home/_GetDistricts" //根据paramName获取兄弟节点的请求
			    ,paramName:"currNodeId" //请求后台带的参数，此处为区域id
			    ,paramType:"postType" //请求后台自带的参数，获取本节点时候 postType=1，获取子节点时候 postType=2,获取兄弟节点的时候该值为3
			               //所以后台可以根据此值判断是发出什么请求，getCurrentNodeUrl、getChildrenNodeUrl、getBrotherNodeUrl请求都是同一个就行
			    ,rootNodeValue:"0
			    //,defaultValue:"440232"
			    ,separator:"/"
			    ,showRootNode:false //是否显示根节点，默认true
			    //,maxWidth:400
			    ,response:{
			      	     idName:"id"
			           ,valueName:"name"
			           ,parentName:"parentid"
			       }
			   /*    ,onlick:function(data){
			    	console.log(data)
			    }   */
			  });
//asynTreeSelectIns.reload({defaultValue:"4405"}) 此方法可以设置默认值
});

后台代码：

        [HttpPost]
        public ActionResult _GetDistricts(string postType, int currNodeId = 0)
        {
            var list = GetService<IDistrictBll>().GetDistricts(postType, currNodeId);
            string s = JsonConvert.SerializeObject(list);
            return Json(list, JsonRequestBehavior.DenyGet);
        }
        

        /// <summary>
        /// 获取全国省市县（用于表单全国省市县选择器）
        /// </summary>
        /// <param name="postType">获取本节点时候 postType=1，获取子节点时候 postType=2,获取兄弟节点的时候该值为3</param>
        /// <param name="currNodeId">请求后台带的参数，此处为区域id</param>
        /// <returns></returns>
        public List<DistrictEntity> GetDistricts(string postType, int currNodeId)
        {
       
                List<DistrictEntity> list = new List<DistrictEntity>();

                switch (postType)
                {
                    case "1":
                        var data = _districtDal.GetDistrictById(currNodeId);
                        if (data != null && data.Id > 0)
                            list.Add(data);
                        break;
                    case "2":
                        list = _districtDal.GetDistrictsByParent(currNodeId);
                        break;
                    default:
                        list = _districtDal.GetDistricts(currNodeId);
                        break;
                }
                return list;
        }

         /// <summary>
        /// 查询当前节点
        /// </summary>
        /// <returns></returns>
        public DistrictEntity GetDistrictById(int id)
        {
            var sql = @"select top 1 Id,Parentid,Name,Code,Pinyin,Level,State,Sort from tb_district where Id=@Id";
            using (IDbConnection conn = ConnectionFactory.DB_Config_DbConnection)
            {
                return conn.QueryFirstOrDefault<DistrictEntity>(sql, new { Id = id });
            }
        }

         /// <summary>
        /// 查询子节点
        /// </summary>
        /// <param name="parentid"></param>
        /// <returns></returns>
        public List<DistrictEntity> GetDistrictsByParent(int parentid)
        {
            var sql = @"select Id,Name,Code,Parentid from tb_district where Parentid=@Parentid and State=1  order by Code";
            using (IDbConnection conn = ConnectionFactory.DB_Config_DbConnection)
            {
                return conn.Query<DistrictEntity>(sql, new { Parentid = parentid }).AsList();
            }
        }

         /// <summary>
        /// 查询兄弟节点
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
       public List<DistrictEntity> GetDistricts(int id)
        {
            var sql = @"select Id,Name,Code,Parentid from tb_district where Parentid in(select Parentid from tb_district where Id=@Id) and State=1  order by Code";
            using (IDbConnection conn = ConnectionFactory.DB_Config_DbConnection)
            {
                return conn.Query<DistrictEntity>(sql, new { Id = id }).AsList();
            }
        }

//实体类
public class DistrictEntity 
    {
       public int Id{set;get;}
        public int Parentid { set; get; }

        public string Name { set; get; }

        public string Code { set; get; }

        public int Sort { set; get; }
        /// <summary>
        /// 1=启用 0=禁用
        /// </summary>
        public int State { set; get; }
    }