ASP .NET MVC搭建树形

树形在做项目时的使用频率较高,而使用jquery.ztree控件搭建树形简单又高效,效果也比较喜人,所以分享下我做树形的方法:

首先选用树形样式

<link href="~/Content/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />//基础样式
<link href="~/Content/zTree/awesomeStyle/awesome.css" rel="stylesheet" />//鲜艳样式
<link href="~/Content/zTree/metroStyle/metroStyle.css" rel="stylesheet" />//经典样式

写好容纳树形的ul标签容器

<ul id="tree" class="ztree" style=""></ul>

引入JS控件

<script src="~/Content/zTree/jquery/jquery.ztree.core.js"></script>//核心控件
<script src="~/Content/zTree/jquery/jquery.ztree.excheck.js"></script>//勾选控件
<script src="~/Content/zTree/jquery/jquery.ztree.exedit.js"></script>//编辑控件

JS配置树形参数

var setting = { 
            view: { //效果参数
					selectedMulti: true //获取多个节点
			 },              
            callback: {//回调函数
               		 onClick: zTreeOnClick,//点击树形节点                  
       		 };
	}

JS绑定数据来源

	$.ajax({
                type: 'post',
                contentType: "application/json",
                url: "/BackgroundIndex/zTree",//控制器链接
                dataType: "json",
                success: function (data) {//传回节点数据数组
                    $.fn.zTree.init($("#tree"), setting, data);//初始化树形
                }
         });

写好回调函数

 	 function zTreeOnClick() {}

再到控制层搭建节点数据

	     public ActionResult zTree()//数据来源SQL
        {
            StringBuilder sbTree = new StringBuilder();
           
			  sbTree.Append("[{\"id\":\"" + 1 + "\",\"name\":\"" + "根节点" + "\",\"Type\":\"" + 0 + "\",\"open\":\"" + true + "\",\"children\":[");
			  //搭出根节点_Type:节点级别_open:默认状态_children:子节点
			  
          	  var listTreeNodes= (from tbTN in zTree.TreeNodes select tbTN).ToList();//查询子节点数据    	
           	  for (int i = 0; i < listTreeNodes.Count; i++)//通过拼接字符串将子节点拼接起来
           	  {                            
				sbTree.Append("{\"id\":\"" + listTreeNodes [i].id + "\",\"name\":\"" + listTreeNodes [i].name.Trim() + "\",\"Type\":\"" + 1 + "\"},");   
         	   }
          	 sbTree.Remove(sbTree.Length - 1, 1);//去除结尾多余的符号”,”
           	 sbTree.Append("]}]");

            return Content(sbTree.ToString());//返回字符串
        }

噔噔~~这样树形的流程就完成了,再调一下样式就更好看了,效果如图?