.Net MVC 动态生成LayUI tree
.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部分
- //这里我用的是Ajax 动态加载
这里有个坑是 ajax 接收到的数据需要用 JSON.parse(result) 不然渲染不上去 会出现 这样的情况
- function SetTree() {
- layui.use('tree', function () {//初始化Tree
- 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();
- 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 = "",
- 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的更多相关文章
- .Net Mvc 返回Json,动态生成EasyUI Tree
最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人.在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍.现在把最近这段时间的学到的, ...
- MVC动态生成的表单:表单元素比较多 你就这样写
MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...
- 从数据库读取数据并动态生成easyui tree构结
一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...
- ASP.NET MVC动态生成网站菜单及子菜单
在开发ASP.NET MVC网站时,Insus.NET想实现动态产生网站的主菜单及子菜单. 你需要在网站管理后台管理此2张表(Menu,SubMenu)的信息,添加,删除,编辑,更新等. Sequen ...
- MVC动态生成表单
1*书写方式 一.using语句可以不写结束标记,自动加上 服务端 客户端 默认提交当前控制器和操作方法 二.开始与结束代码都写 服务端 客户端 三.一些常用的重载方法 (1)要提交的控制器,和操作方 ...
- mvc动态生成a标签,多个属性,多个querystring
1*服务端 客户端 跳转的url 2*服务端 客户端 跳转的url 3*服务端 客户端 跳转的url 4*服务端 客户端 跳转的url
- PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)
关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
随机推荐
- PATB 1041 考试座位号(15)
#include <cstdio> #include <iostream> using namespace std; struct student{ char str[15]; ...
- [apue] 等待子进程的那些事儿
谈到等待子进程,首先想到的就是SIGCHLD信号与wait函数族,本文试图厘清二者的方方面面,以及组合使用时可能不小心掉进去的坑. 1. 首先谈单独使用SIGCHLD的场景.下面是一段典型的代码片段: ...
- spring源码深度解析— IOC 之 属性填充
doCreateBean() 主要用于完成 bean 的创建和初始化工作,我们可以将其分为四个过程: createBeanInstance() 实例化 bean populateBean() 属性填充 ...
- 微服务-springboot+websocket在线聊天室
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 2019.6.5 NOIP2014 day2 t2 寻找道路
我竟然一个人敲了NOIP提高组的t2? 题目描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直 ...
- HDU 5791:Two(DP)
http://acm.hdu.edu.cn/showproblem.php?pid=5791 Two Problem Description Alice gets two sequences A ...
- Linux查看进程具体开启时间
ps -p 2417 -o lstart -- 2417为进程号
- python异步IO编程(一)
python异步IO编程(一) 基础概念 协程:python generator与coroutine 异步IO (async IO):一种由多种语言实现的与语言无关的范例(或模型). asyncio ...
- 字符串匹配问题(暴力,kmp)
对于字符串的匹配问题,现在自己能够掌握的就只有两种方法, 第一种就是我们常用的暴力匹配法,那什么是暴力匹配法呢? 假设我们现在有一个文本串和一个模式串,我们现在要找出模式串在文本串的哪个位置. 文本串 ...
- ZigBee按键查询实践
按键查询 即硬件上电后,程序开始运行,当检测到按键按下,触发按键语句,执行按键触发的事件: 玩单片机需要清楚两件东西,第一个是单片机的电路图,另一个则是单片机的寄存器: CC2530是51的升级版,我 ...