.Net MVC 动态生成LayUI tree

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

1.Layui部分

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

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

  1.2 Js部分

  1. //这里我用的是Ajax 动态加载
    这里有个坑是 ajax 接收到的数据需要用 JSON.parse(result) 不然渲染不上去 会出现 这样的情况
  2.  
  1.  
  2. function SetTree() {
  3. layui.use('tree', function () {//初始化Tree
  4. var tree = layui.tree;
  5. $.ajax({
  6. type: "POST",
  7. url: "/CmdSite/GetTreeEntity",
  8. data: {},
  9. success: function (result) {
  10. var inst1 = tree.render({
  11. elem: '#menuTree',
  12. id: 'tree',
  13. data: JSON.parse(result),
  14. isJump: true,//以下配置项参考Layui Tree 官方文档
  15. showLine: true,
  16. onlyIconControl: true,
  17. accordion:false,
  18. click: function (obj) {
  19. var data = JSON.stringify(obj.data);//这里是点击获得数据
  20. var jsonData = JSON.parse(data);
  21. }
  22. });
  23. },
  24. error: function (e) {
  25. console.log(e.status);
  26. console.log(e.responseText);
  27. }
  28. });
  29. });
  30. }

  1.3 Html部分

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

2. .Net部分

  2.1 你得有个实体类 

  1.      //这里面字段最好对应文档里面的
         public class treeEntity
  2. {
  3. /// <summary>
  4. /// 主键ID
  5. /// </summary>
  6. public int id { get; set; }
  7. /// <summary>
  8. /// 父ID
  9. /// </summary>
  10. public string pid { get; set; }
  11. /// <summary>
  12. /// 名称
  13. /// </summary>
  14. public string title { get; set; }
  15. /// <summary>
  16. /// 图标
  17. /// </summary>
  18. public string icon { get; set; }
  19. /// <summary>
  20. /// 链接
  21. /// </summary>
  22. public string url { get; set; }
  23. /// <summary>
  24. /// 排序
  25. /// </summary>
  26. public string sort { get; set; }
  27. /// <summary>
  28. /// 是否展开
  29. /// </summary>
  30. public bool spread { get;set;}
  31. /// <summary>
  32. /// 子节点
  33. /// </summary>
  34. public List<treeEntity> children { get; set; }
  35.  
  36. }

  2.2 遍历拼接

  

  1.       /// <summary>
  2. /// 获得Tree实体(我只做了二级的 有需要的可以自己改成递归)
  3. /// </summary>
  4. /// <returns></returns>
  5. public static string GetTreeEntityJson()
  6. {
  7. var CategoryList = Dao.BLL.MenuCategory.QueryListByFMcid();
  8. var menuList = new List<treeEntity>();
  9. foreach (var item in CategoryList)
  10. {
  11. treeEntity tree = new treeEntity
  12. {
  13. icon = item.icon,
  14. id = item.mcid,
  15. title = item.name,
  16. sort = item.sort.ToString(),
  17. pid = "",
  18. url = "",
  19. spread=true,
  20. };
  21. var menuEntityList = Dao.BLL.Menu.QueryListByMcid(item.mcid);
  22. var childrenList = new List<treeEntity>();
  23. foreach (var ChildItem in menuEntityList)
  24. {
  25. treeEntity ChindrenTree = new treeEntity
  26. {
  27. icon = "fa fa-diamond",
  28. id = (int)ChildItem.menu,
  29. title = ChildItem.name,
  30. sort = ChildItem.sort.ToString(),
  31. pid = ChildItem.mcid.ToString(),
  32. url = "",
  33. children=null,
  34. spread = true,
  35. };
  36. childrenList.Add(ChindrenTree);
  37. }
  38. tree.children = childrenList;
  39. menuList.Add(tree);
  40. }
  41. var menuJson = Newtonsoft.Json.JsonConvert.SerializeObject(menuList);
  42. return menuJson;

  2.3 返回Json

 

  1. public string GetTreeEntity()
  2. {
  3. return JQLY.Helper.MenuHelper.GetTreeEntityJson();
  4. }

这样就搞定了!

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

.Net MVC 动态生成LayUI tree的更多相关文章

  1. .Net Mvc 返回Json,动态生成EasyUI Tree

    最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人.在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍.现在把最近这段时间的学到的, ...

  2. MVC动态生成的表单:表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

  3. 从数据库读取数据并动态生成easyui tree构结

    一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...

  4. ASP.NET MVC动态生成网站菜单及子菜单

    在开发ASP.NET MVC网站时,Insus.NET想实现动态产生网站的主菜单及子菜单. 你需要在网站管理后台管理此2张表(Menu,SubMenu)的信息,添加,删除,编辑,更新等. Sequen ...

  5. MVC动态生成表单

    1*书写方式 一.using语句可以不写结束标记,自动加上 服务端 客户端 默认提交当前控制器和操作方法 二.开始与结束代码都写 服务端 客户端 三.一些常用的重载方法 (1)要提交的控制器,和操作方 ...

  6. mvc动态生成a标签,多个属性,多个querystring

    1*服务端 客户端 跳转的url 2*服务端 客户端 跳转的url 3*服务端 客户端  跳转的url  4*服务端 客户端 跳转的url

  7. PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)

    关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...

  8. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  9. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

随机推荐

  1. PATB 1041 考试座位号(15)

    #include <cstdio> #include <iostream> using namespace std; struct student{ char str[15]; ...

  2. [apue] 等待子进程的那些事儿

    谈到等待子进程,首先想到的就是SIGCHLD信号与wait函数族,本文试图厘清二者的方方面面,以及组合使用时可能不小心掉进去的坑. 1. 首先谈单独使用SIGCHLD的场景.下面是一段典型的代码片段: ...

  3. spring源码深度解析— IOC 之 属性填充

    doCreateBean() 主要用于完成 bean 的创建和初始化工作,我们可以将其分为四个过程: createBeanInstance() 实例化 bean populateBean() 属性填充 ...

  4. 微服务-springboot+websocket在线聊天室

    一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. 2019.6.5 NOIP2014 day2 t2 寻找道路

    我竟然一个人敲了NOIP提高组的t2? 题目描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直 ...

  6. HDU 5791:Two(DP)

    http://acm.hdu.edu.cn/showproblem.php?pid=5791 Two Problem Description   Alice gets two sequences A ...

  7. Linux查看进程具体开启时间

    ps -p 2417 -o lstart -- 2417为进程号

  8. python异步IO编程(一)

    python异步IO编程(一) 基础概念 协程:python  generator与coroutine 异步IO (async IO):一种由多种语言实现的与语言无关的范例(或模型). asyncio ...

  9. 字符串匹配问题(暴力,kmp)

    对于字符串的匹配问题,现在自己能够掌握的就只有两种方法, 第一种就是我们常用的暴力匹配法,那什么是暴力匹配法呢? 假设我们现在有一个文本串和一个模式串,我们现在要找出模式串在文本串的哪个位置. 文本串 ...

  10. ZigBee按键查询实践

    按键查询 即硬件上电后,程序开始运行,当检测到按键按下,触发按键语句,执行按键触发的事件: 玩单片机需要清楚两件东西,第一个是单片机的电路图,另一个则是单片机的寄存器: CC2530是51的升级版,我 ...