jsTree是一个 基于jQuery的Tree控件。支持XML,JSON,Html三种数据源。提供创建,重命名,移动,删除,拖"放节点操作。可以自己自定义创建,删 除,嵌套,重命名,选择节点的规则。在这些操作上可以添加多种监听事件。

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。开源免费的软件,优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

jstree下载地址:https://www.jstree.com/

zTree下载地址:http://www.ztree.me/v3/main.php#_zTreeInfo

效果图

以上是jstree的效果图,zTree的使用方法戳这里:http://www.cnblogs.com/cube/p/3724840.html

以下是jstree在MVC使用的方法

1.在项目中引入

<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
 <script src="~/assets/global/plugins/jstree/dist/jstree.min.js"></script>
@{
ViewBag.Title = "ModuleDataTable";
Layout = "~/Areas/Admin/Views/Shared/MasterPage.cshtml";
}
@section header{
<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
<link rel="stylesheet" type="text/css" href="~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
}
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="index.html">系统设置</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#">模块管理</a>
</li>
</ul>
</div>
<h3 class="page-title"></h3>
<div class="row">
<div class="col-md-3">
<div class="portlet red-pink box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>模块名称
</div>
<div class="tools">
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
</div>
</div>
<div class="portlet-body">
<div id="module-tree" class="tree-demo">
</div>
</div>
</div>
</div>
<div class="portlet box red-pink col-md-9">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>模块信息
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div> <div class="portlet-body" id="_ModuleDataTable">
</div>
</div>
</div> @section footer{
<script src="~/assets/global/plugins/jstree/dist/jstree.min.js"></script>
<script src="~/Assets/content/module-tree.js"></script>
<script src="~/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
<script>
$("#module-tree").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": false,
'data': {
'url': function (node) {
return '/admin/module/treedataapi';
},
'data': function (node) {
return { 'parent': node.id };
}
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"state": { "key": "demo3" },
"plugins": ["dnd", "state", "types"]
}); $("#module-tree").bind("select_node.jstree", function (e, data) {
var i, j, r = [];
for (i = , j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).id);
var url = "/admin/module/ModuleDataTable?parent=" + r;
//加载_ModuleDataTable部分视图
$("#_ModuleDataTable").load(url);
}
})
</script> }

2.声明在页面显示jstree的位置

  <div id="module-tree" class="tree-demo">
</div>

3.准备jstree所需要的数据源,先读取父级数据,然后点击触发,异步加载子级数据

public JsonResult TreeDataAPI(string parent)
{
if (parent == "#")
parent = "";
List<SAS.Model.BPMS_SysMenu> list = new List<SAS.Model.BPMS_SysMenu>(); StringBuilder strWhere = new StringBuilder(); list = bll.GetModelList(strWhere.ToString());
List<Dictionary<string, object>> listDict = new List<Dictionary<string, object>>(); foreach (var item in list)
{
if (item.ParentId.Equals(parent))
{
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("id", item.MenuId);
dict.Add("icon", item.Img);
dict.Add("text", item.FullName); if (list.Where(d => d.ParentId.Equals(item.MenuId)).Count() > )
dict.Add("children", true);
else
dict.Add("children", false);
listDict.Add(dict);
}
}
return Json(listDict, JsonRequestBehavior.AllowGet);
}

4.通过地址访问可以获取到以下信息

URL:http://localhost:8081/admin/module/treedataapi?parent=0

5.最后我们需要绑定数据

 $("#module-tree").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": false,
'data': {
'url': function (node) {
return '/admin/module/treedataapi';
},
'data': function (node) {
return { 'parent': node.id };
}
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"state": { "key": "demo3" },
"plugins": ["dnd", "state", "types"]
});

PS.如果需要点击树,触发加载列表需要以下代码,详细见紫色代码

<script>
$("#module-tree").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": false,
'data': {
'url': function (node) {
return '/admin/module/treedataapi';
},
'data': function (node) {
return { 'parent': node.id };
}
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"state": { "key": "demo3" },
"plugins": ["dnd", "state", "types"]
}); $("#module-tree").bind("select_node.jstree", function (e, data) {
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).id);
var url = "/admin/module/ModuleDataTable?parent=" + r;
//加载_ModuleDataTable部分视图
$("#_ModuleDataTable").load(url);
}
})
</script>

.net zTree的使用方法戳这里:http://www.cnblogs.com/cube/p/3724840.html

ASP.NET MVC jQuery 树插件在项目中使用方法(一)的更多相关文章

  1. 记一次ASP.NET MVC性能优化(实际项目中)

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  2. 【转】记一次ASP.NET MVC性能优化(实际项目中)

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  3. ASP.NET MVC性能优化(实际项目中)

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  4. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  5. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  7. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  8. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  9. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

随机推荐

  1. 马普尔小姐探案集S02E03【熙阳岭的疑云】

    --Why the husband love his wife so much? --Because she was the last one in their family.

  2. VC++ Debug产生异常时中断程序执行Break on Exception

    It is possible to instruct the debugger to break when an exception occurs, before a handler is invok ...

  3. VC++6.0 打开原来工程突然特别慢或者打不开?

    VC++6.0打开原来工程突然特别慢或者打不开?    近几日,对原来工程做了一些修改,感觉打开特别慢,甚至打不开,在Loading Workspace时就卡住了. 解决办法:删除工程文件中的三个文件 ...

  4. AOSP5.0换8G eMMC不能开机问题

    AOSP5.0 MT6572平台.用H9TP32A4GDBCPR_KGM这颗4G的eMMC就能够.可是用H9TP65A8JDACPR_KGM这个8G的就开不了机,一直是重新启动.用串口抓LOG发现以下 ...

  5. Codeforces Round #364 (Div. 1)B. Connecting Universities

    题目链接:传送门 题目大意:n个点构成一棵树,给定 k*2 点,要分成 k 组,使每组点之间的距离之和最大. 题目思路:因为是求距离之和最大,所以我们可以知道这样一个性质.如果以一条边为界,两边的子树 ...

  6. IE、FF脚本兼容性问题

    1.window.event IE有这个对象:FF没有,FF通过参数传递 2.获取事件源 IE:srcElement FF:target 3.添加与去除事件 IE:element.attachEven ...

  7. cdr X6 64位32位缩略图补丁包

    cdr X6 64位32位缩略图补丁包下载 安装了X6没有缩略图的话,点击下面链接下载安装插件即可 点击下载

  8. C#操作AD及Exchange Server总结(二)

    上一节C#操作AD及Exchange Server总结(一)写了对AD的操作,新建AD用户后,通常都需要为此用户开启Exchange邮箱,接下来写如何远程操作Exchange. 三.对Exchange ...

  9. HYSBZ 2565 最长双回文串 (回文树)

    2565: 最长双回文串 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 1377  Solved: 714 [Submit][Status][Dis ...

  10. 常用的mysql语句

    为了方便学习mysql,把接触到的sql收集一下,忘记的时候可以查询一下. 连接mysql数据库: mysql -u 用户名 -p 输入密码. 创建数据库: create database 数据库名; ...