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