jsTree是一个 基于jQuery的Tree控件。支持
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='/images/loading.gif' data-original="~/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='/images/loading.gif' data-original="~/assets/global/plugins/jstree/dist/jstree.min.js"></script> <script src='/images/loading.gif' data-original="~/Assets/content/module-tree.js"></script> <script src='/images/loading.gif' data-original="~/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script> <script src='/images/loading.gif' data-original="~/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 = 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>}2.声明在页面显示jstree的位置
<div id="module-tree" > </div>
3.准备jstree所需要的数据源，先读取父级数据，然后点击触发，异步加载子级数据
public JsonResult TreeDataAPI(string parent) { if (parent == "#") parent = "0"; 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() > 0) 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 树插件在项目中使用方法（一）
关键词：ASP.NET
我知道了 