.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的动态库 在项目中,点击项目名称右键-- ...
随机推荐
- jmeter报告分析工具
一直以来做性能测试都是用jmeter和LR,当然还有一些自己写测试脚本,LR不用说,分析结果那个组件杠杠的!但是jmeter毕竟是开源的,所以分析查看结果不像LR那样自带图形神马的,虽然可以自己写脚本 ...
- Spring之Bean的装配
一.Bean的装配Bean的装配,即Bean对象的创建.容器根据代码要求创建Bean对象后再传递给代码的过程,称为Bean的装配.1.默认装配方式代码通过getBean()方式从容器获取指定的Bean ...
- 302Java_前定义
第零章 前定义 1 介绍 1.1 简介 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. ...
- Windows下OSGEarth的编译过程
目录 1. 依赖 1) OpenSceneGraph 2) GDAL 3) CURL 4) GEOS 5) 其他 2. 编译 1) 设置参数 2) 配置路径 3) 生成编译 3. 参考文献 1. 依赖 ...
- 求你了,再问你Java内存模型的时候别再给我讲堆栈方法区了…
GitHub 4.1k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 4.1k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 4.1k Star 的 ...
- 09、MySQL—列属性
列属性又称之为字段属性,在mysql中一共有6个属性:null,默认值,列描述,主键,唯一键和自动增长 1.Null属性 NULL属性:代表字段为空 如果对应的值为YES表示该字段可以为NULL 注意 ...
- 安装Ruby、多版本Ruby共存、Ruby安装慢问题
rbenv rbenv可以管理多个版本的ruby.可以分为3种范围(或者说不同生效作用域)的版本: local版:本地,针对各项目范围 global版:全局,没有shell和local版时使用glob ...
- spring boot 2.0 thymeleaf调试时正常,打包后运行报错. 找不到模板文件.
使用th:fragment 定义模板 使用 th:replace 来添加模板到需要的地方. 使用时发现一个非常奇怪的问题. 本机idea 调试环境一切正常, 但是打成jar包以后报错,提示找不到对 ...
- IPv6 优于 IPv4 的十大功能
现在是 9102 年,有一个严重的问题,困扰着资深宅男二狗子.那就是偶像团体没新名了.今年开始,偶像团体 XKB48 已经在无法取更多的新名字了,排列组合的所有方式都已经经过了历史长河的洗礼,除非偶像 ...
- ZOJ 3962:Seven Segment Display(思维)
https://vjudge.net/problem/ZOJ-3962 题意:有16种灯,每种灯的花费是灯管数目,代表0~F(十六进制),现在从x开始跳n-1秒,每一秒需要的花费是表示当前的数的花费之 ...