ASP.NET MVC jQuery 树插件在项目中使用方法（一）

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.在项目中引入

 
@{
    ViewBag.Title = "ModuleDataTable";
    Layout = "~/Areas/Admin/Views/Shared/MasterPage.cshtml";
}
@section header{
    "stylesheet" type="text/css" href="~/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
    "stylesheet" type="text/css" href="~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
}

class="page-bar">
    



class="page-title">


class="row">
    
class="col-md-3">
        
class="portlet red-pink box">
            
class="portlet-title">
                
class="caption">
                    class="fa fa-cogs">模块名称
                

                
            

            
class="portlet-body">
                
"module-tree" class="tree-demo">
                

            

        

    

    
class="portlet box red-pink col-md-9">
        

        
class="portlet-body" id="_ModuleDataTable">
        

    





@section footer{
    
    
    
    
    


}

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

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

public JsonResult TreeDataAPI(string parent)
        {
            if (parent == "#")
                parent = "0";
            List list = new List();

            StringBuilder strWhere = new StringBuilder();

            list = bll.GetModelList(strWhere.ToString());
            Liststring, object>> listDict = new Liststring, 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.如果需要点击树，触发加载列表需要以下代码,详细见紫色代码

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

Asp.netMVC

相关

Asp.Net Mvc + ComBoost.Mvc快速开发

这算是ASP.NET MVC的一个大BUG吗？

ASP.NET MVC5多语言切换快速实现方案

【ASP.NET MVC系列】浅谈数据注解和验证

ASP.NET MVC之从视图传递数据到控制器

ASP.NET MVC 在项目中使用面包屑导航

如何在现有的ASP.NET MVC项目上添加WEB API

在ASP.NET MVC 中获取当前URL、controller、action

asp.net mvc5中的过滤器重写

Asp.net mvc 大文件上传 断点续传

[ASP.NET MVC] Real-time之HTML5 服务器发送事件（server-sent event）

asp.net -mvc框架复习（4）-ASP.NET MVC中的约定规则

标签