layui treeSelect

约定不等于承诺〃 2021-11-08 18:52 650阅读 0赞

下拉树选择

![1752854-20190730165338562-2056395959.png][]

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

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());
                }
            });
        });

返回书结构

![1752854-20190730165520351-202432932.png][]

封装递归方法

/// <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; } 
        }

转载于:https://www.cnblogs.com/fightingkaikai/p/11271453.html

[1752854-20190730165338562-2056395959.png]: /images/20211108/48f827a6956941dc826ed6d63ba0150c.png
[1752854-20190730165520351-202432932.png]: /images/20211108/a5066ba0c5f6437b87e6a480b41c0eaf.png