MVC项目中使用Ztree

最近新接触了MVC,慢慢的摸索学习中,在我的mvc练习项目中需要使用Ztree展示网站的栏目导航。

在网上查找了相关资料,以及看了Ztree的API文档,最终实现了该功能。

下面进行步骤说明:

第一步:

官网下载Ztree,将css和js文件夹复制粘贴进项目中。

第二步:

引用Ztree样式和js

第三步,建立ZNode模型

 /// <summary>
    /// 树节点
    /// </summary>
    public class ZNode
    {

        public string id { get; set; }
        public string name { get; set; }
        public string pId { get; set; }
        public string icon { get; set; }
        public string isParent { get; set; }
        public string url { get; set; }
        public string target { get; set; }
    }

第四步:

配置Ztree

<script type="text/javascript">
//异步加载节点
  var setting4 = {
      data: {
          simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: 0
          }
      },
      async: {
          //异步加载
          enable: true,
          url: "/Cms/sysSetting/AsyncGetNodes",
          autoParam: ["id", "name", "pId"]
      },
      callback: {
          beforeExpand: beforeExpand,
          onAsyncSuccess: onAsyncSuccess,
          onAsyncError: onAsyncError,
          onClick: onClick
      }
  };
  function beforeExpand(treeId, treeNode) {
      if (!treeNode.isAjaxing) {
          return true;
      } else {
          alert("zTree 正在下载数据中,请稍后展开节点。。。");
          return false;
      }
  }

  function onAsyncSuccess(event, treeId, treeNode, msg) {

  }
  function onAsyncError() {
      alert(" 数据加载失败");
  }

    function createTree() {
        $.ajax({
            url: ‘/Cms/sysSetting/AsyncGetNodes‘, //url  action是方法的名称
            data: { id: 0 },
            type: ‘Get‘,
            dataType: "text", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting4, eval(‘(‘ + data + ‘)‘));
            },
            error: function (msg) {
                alert(" 数据加载失败!" + msg);
            }
        });
    }

    $(document).ready(function () {
        createTree();
    });
    function onClick(e, treeId, treeNode) {

    }

    </script>

第五步:

在UI页面中使用Ztree

 <div id="navTree">
        <ul id="tree" class="ztree"></ul>
    </div>

第六步:

在控制器中编写AsyncGetNodes方法

 public ActionResult AsyncGetNodes(int? id)
        {
             List<MODEL.ZNode>  nodes= new List<MODEL.ZNode>();
                 IList<MODEL.Authority> nodearr = BLL.Authority.SelectList(0, "id>= " + id + "");
                 foreach (MODEL .Authority jo in nodearr)
                 {
                    var pnode = new MODEL.ZNode();
                    pnode.id = jo.Id.ToString();
                    pnode.name = jo.AuthorityName.ToString() + "[" + jo.Id.ToString() + "]" + "[" + jo.Orders.ToString() + "]";
                    pnode.pId = jo.ParentID.ToString();
                    pnode.isParent = jo.IsParent.ToString();
                    pnode.url = "/Cms/sysSetting/NavEdit?id=" + jo.Id.ToString();
                    pnode.target = "bodyFrame";
                    if (jo.Id.ToString() == "0")
                    {
                        pnode.pId = null;
                        pnode.icon = "/Areas/Content/zTree/css/zTreeStyle/img/diy/9.png";
                    }
                    else if (jo.ParentID.ToString() == "0")
                    {
                        if (jo.TypeID.ToString() == "0")
                        {
                            pnode.icon = "/Areas/Content/zTree/css/zTreeStyle/img/diy/1_close.png";
                        }
                        else
                        {
                            pnode.icon = "/Areas/Content/zTree/css/zTreeStyle/img/diy/1_open.png";
                        }

                    }
                    else
                    {
                        pnode.icon = "/Areas/Content/zTree/css/zTreeStyle/img/diy/2.png";
                    }
                    (nodes as List<MODEL.ZNode>).Add(pnode);
               }
             return Json(nodes, JsonRequestBehavior.AllowGet);
        }

最终效果:

数据库结构:

ps:语言表述能力较差,大家凑合着看吧,哈哈~

时间: 2024-10-19 23:01:40

MVC项目中使用Ztree的相关文章

主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /************************************************************************************ * 命名空间:HR.Controllers * Controller: TreeController * 版本号: F 1.0.0.0 * 负责人: Markfan * 电子邮箱:[ema

谈谈MVC项目中的缓存功能设计的相关问题

本文收集一些关于项目中为什么需要使用缓存功能,以及怎么使用等,在实际开发中对缓存的设计的考虑 为什么需要讨论缓存呢? 缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例如数据库),我们一般会考虑将一些更新不是很频繁的,可以重用的数据,通过一定的方式临时地保存起来,后续的请求根据情况可以直接访问这些保存起来的数据.这种机制就是所谓的缓存机制. 根据缓存的位置不同,可以区分为: 1.客户端缓存(缓存在用户的客户端,例如浏览器) 2.服务器断货(缓存在服务器中,可以缓存在内存

在VS2013 MVC项目中上传图片

之前做网站项目时,凡遇到保存图片的,我都将图片上传后存储在服务器的本地文件夹中,在一个Controller的Action中,类似操作如下所示: public ActionResult UpLoad(HttpPostedFileBasearImg) {             //保存图片            if (arImg != null)            {                 string uploadName =arImg.FileName;//获取待上传图片的完整

MVC项目中如何判断用户是在用什么设备进行访问

使用UAParser在C#MVC项目中如何判断用户是在用什么设备进行访问(手机,平板还是普通的电脑) 现在我们开发的很多web应用都要支持手机等移动设备.为了让手机用户能有更加好的用户体验,我们经常为手机设备专门准备一套前端的页面.这样当用户使用普通电脑来访问的时候,我们的应用就向用户展示普通电脑的页面.当用户使用手机等移动设备来访问我们的系统的时候,我们就向用户展示手机设备的页面.但是这时候另一个问题出现了.如何判断用户在使用什么设备访问我们的应用?是使用手机还是普通电脑? 网上能查到的不同的

在 ASP.NET MVC 项目中使用 WebForm、 HTML

原文地址:http://www.cnblogs.com/snowdream/archive/2009/04/17/winforms-in-mvc.html ASP.NET MVC和WebForm各有各的优点,我们可能需要同时使用ASP.NET MVC和WebForm.本文介绍了如何在ASP.NET MVC项目中使用WebForm.首先新建一个名为WebForms的文件夹用于存放WebForm,并添加一个Web窗体文件Demo.aspx作为演示. Demo.aspx就简单的输出一句话“It’s a

转 mvc项目中,解决引用jquery文件后智能提示失效的办法

mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常会引用jquery, 但是由于路由的关系,最终访问页面的地址相对js文件来说,是不固定的. 为了在view中能够引用到jquery文件,我们通常都是用如下的代码 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")

【转】在 ASP.NET MVC 项目中使用 WebForm

ASP.NET MVC和WebForm各有各的优点,我们可能需要同时使用ASP.NET MVC和WebForm.本文介绍了如何在ASP.NET MVC项目中使用WebForm. 首先新建一个名为WebForms的文件夹用于存放WebForm,并添加一个Web窗体文件Demo.aspx作为演示. Demo.aspx就简单的输出一句话"It's a WebForm." 关键步骤在于路由设置.如果你希望WebForms这个文件夹名作为URL的一部分,也就是普通WebForm应用程序的方式来访

ServiceStack 项目实例 005 使用第一个服务功能 (在MVC项目中)

建立好服务后,我们就可以在MVC项目中使用这个服务,在使用这个服务之前,需要先确定一下它所在端口,只需要在SS项目上点右键,将其设置为启动项目,然后运行一下SS项目,在浏览器地址栏,就可以看到这个服务的端口号,并且也能看到已经添加到其中的服务.(运行的效果可以在001节中的截图看到,001节中的端口为59068.) 在MVC的Controller目录下添加一个控制器NewsController.cs,在NewsController.cs中加入一个 Action, 用来显示添加新闻的页面 publ

添加Bootstrap 到MVC项目中(vs2010)

环境:Visual Studio 2010   ASP.NET MVC3 手动添加: 下载地址:http://twitter.github.com/bootstrap/ 一个js,两个css,两张图 js 文件:  •bootstrap.min.js CSS 文件:  •bootstrap.min.css  •bootstrap-responsive.min.css image 文件:  •glyphicons-halflings.png  •glyphicons-halflings-white