layui treeSelect

下拉树选择

 

1.下载地址：https://fly.layui.com/extend/treeSelect/

<input type="text" id="ParentIdTree" lay-filter="ParentIdTree" class="layui-input">//下拉选择
<input type="text" name="ParentId" id="ParentId" lay-filter="ParentId" class="layui-input">

   layui.config({
        base: '/lib/layuiadmin/lib/extend/' // js地址 
    }).extend({
        treeSelect: 'treeSelect'
    });
    layui.use(['treeSelect', 'form'], function () {
        var treeSelect = layui.treeSelect;
        treeSelect.render({
            // 选择器
            elem: '#ParentIdTree',
            // 数据
            data: "../OrganizationManage/GetOrganizationSelect",
            // 异步加载方式：get/post，默认get
            type: 'get',
            async: false,
            // 占位符
            placeholder: '请选择上级父节点',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                $("#ParentId").val(d.current.id);
            },
            // 加载完成后的回调函数
            success: function (d) {
                if ($("#ParentId").val() != "")
                    treeSelect.checkNode('ParentIdTree', $("#ParentId").val());
            }
        });
    });

 返回书结构

封装递归方法

/// <summary>
        /// 下拉树
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="items"></param>
        /// <returns></returns>
        public static List<LayuiTreeSelect> ToTreeSelect<T>(this List<T> items) where T : ILayuiTree
        {
            return GetTreeSelectChildren(items, null);
        }

        /// <summary>
        /// 递归实现下拉树
        /// </summary>
        /// <param name="items">所有数据</param>
        /// <param name="parentId">子数据的父ID</param>
        /// <returns></returns>
        private static List<LayuiTreeSelect> GetTreeSelectChildren<T>(List<T> items, string parentId) where T : ILayuiTree
        {
            var treeSelects = new List<LayuiTreeSelect>();
            var subItems = items.Where(o => o.ParentId == parentId);
            foreach (var item in subItems)
            {
                treeSelects.Add(new LayuiTreeSelect()
                {
                    id = item.Id,
                    name = item.Name,
                    children = GetTreeSelectChildren(items, item.Id),
                });
            }
            return treeSelects;
        }

 泛型约束使用注意

这样类型参数约束，.NET支持的类型参数约束有以下五种：

　　　　where T : struct | T必须是一个结构类型
　　　　where T : class T必须是一个类（class）类型
　　　　where T : new() | T必须要有一个无参构造函数
　　　　where T : NameOfBaseClass | T必须继承名为NameOfBaseClass的类
　　　　where T : NameOfInterface | T必须实现名为NameOfInterface的接口

 

ILayuiTree接口类

  public interface ILayuiTree
    {
        string Id { get; set; }
        string Name { get; set; }
        string Icon { get; set; }
        string ParentId { get; set; }
        string Url { get; set; } 
        bool Checked { get; set; } 
    }