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：语言表述能力较差，大家凑合着看吧，哈哈~