码迷,mamicode.com
首页 > Web开发 > 详细

.Net MVC 动态生成LayUI tree

时间:2019-07-27 12:43:10      阅读:536      评论:0      收藏:0      [点我收藏+]

标签:data   mds   pread   dem   convert   demo   center   stat   ring   

.Net MVC 动态生成LayUI tree

最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUI的Tree样式比较好看,所以开始搞!

1.Layui部分

  1.1 首先引用文件是必不可少的:(依赖于Jquery)

<link type="text/css" rel="Stylesheet" href="~/Content/js/plugins/layui-v2.5.4/layui-v2.5.4/layui/css/layui.css" />
<script type="text/javascript" src="~/Content/js/plugins/layui-v2.5.4/layui-v2.5.4/layui/layui.js"></script>

   1.2 Js部分

function SetTree() {
        layui.use(‘tree‘, function () {
            var tree = layui.tree;
            $.ajax({
                type: "POST",
                url: "/CmdSite/GetTreeEntity",
                data: {},
                success: function (result) {
                    var inst1 = tree.render({
                        elem: ‘#menuTree‘,
                        id: ‘tree‘,
                        data: JSON.parse(result),
                        isJump: true,//以下配置项参考Layui Tree 官方文档
                        showLine: true,
                        onlyIconControl: true,
                        accordion:false,
                        click: function (obj) {
                            var data = JSON.stringify(obj.data);//这里是点击获得数据
                            var jsonData = JSON.parse(data);
                        }
                    });
                },
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    }

  1.3 Html部分

 <div id="menuTree" class="demo-tree-more"></div>
这就很省事了!

2. .Net部分

  2.1 你得有个实体类

     //这里面字段最好对应文档里面的
     public
class treeEntity { /// <summary> /// 主键ID /// </summary> public int id { get; set; } /// <summary> /// 父ID /// </summary> public string pid { get; set; } /// <summary> /// 名称 /// </summary> public string title { get; set; } /// <summary> /// 图标 /// </summary> public string icon { get; set; } /// <summary> /// 链接 /// </summary> public string url { get; set; } /// <summary> /// 排序 /// </summary> public string sort { get; set; } /// <summary> /// 是否展开 /// </summary> public bool spread { get;set;} /// <summary> /// 子节点 /// </summary> public List<treeEntity> children { get; set; } }

 

  2.2 遍历拼接

  

      /// <summary>
        /// 获得Tree实体(我只做了二级的 有需要的可以自己改成递归)
        /// </summary>
        /// <returns></returns>
        public static string GetTreeEntityJson()
        {
            var CategoryList = Dao.BLL.MenuCategory.QueryListByFMcid(0);
            var menuList = new List<treeEntity>();
            foreach (var item in CategoryList)
            {
                treeEntity tree = new treeEntity
                {
                    icon = item.icon,
                    id = item.mcid,
                    title = item.name,
                    sort = item.sort.ToString(),
                    pid = "0",
                    url = "",
                    spread=true,
                };
                var menuEntityList = Dao.BLL.Menu.QueryListByMcid(item.mcid);
                var childrenList = new List<treeEntity>();
                foreach (var ChildItem in menuEntityList)
                {
                    treeEntity ChindrenTree = new treeEntity
                    {
                        icon = "fa fa-diamond",
                        id = (int)ChildItem.menu,
                        title = ChildItem.name,
                        sort = ChildItem.sort.ToString(),
                        pid = ChildItem.mcid.ToString(),
                        url = "",
                        children=null,
                        spread = true,
                    };
                    childrenList.Add(ChindrenTree);
                }
                tree.children = childrenList;
                menuList.Add(tree);
            }
            var menuJson = Newtonsoft.Json.JsonConvert.SerializeObject(menuList);
            return menuJson;

  2.3 返回Json

 

    public string GetTreeEntity()
        {
            return JQLY.Helper.MenuHelper.GetTreeEntityJson();
        }

 

这样就搞定了!

 

LayUI地址:https://www.layui.com

.Net MVC 动态生成LayUI tree

标签:data   mds   pread   dem   convert   demo   center   stat   ring   

原文地址:https://www.cnblogs.com/ytdqr/p/11254481.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!