树形图及其应用

在我们平时做一些项目中，经常会遇到树形图的需求，其实树形图都是大同小异的，下面我主要写了如何调用一些封装好的树形插件；
主要用了以下三个插件

 <link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 <script src="~/Content/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
 <script src="~/Content/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>

Html代码：

<div class="">
    <ul id="treeDemo" class="ztree"></ul>
</div>

JS代码：

 //请求后台返回数据
   $(function () {
         $.ajax({
             type: "Get",
             url: "/BasicdataManagment/Clientlocale/Get_TreeView",
             success: function (data) {
                 $.fn.zTree.init($("#treeDemo"), setting, data);//初始化
             }
         });
     })
     //树形图配置
     var setting = {
         data: {
             simpleData: {
                 enable: true,//是否开启树形效果
                 idKey:"id",//通过id分级
             }
         },
         callback: {
             onClick: zTreeOnClick//树形图点击事件
         }
     };
     //点击事件
     function zTreeOnClick(event, treeId, treeNode) {
         alert(treeNode.tId + " ," + treeNode.treeNode);
     };

后台代码：

 /// <summary>
 /// 树形查询
 /// </summary>
 /// <returns></returns>
 public JsonResult Get_TreeView()
 {
     List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();//创建一个表示键和值集合的列表
     var listAuthorityTemplet = (from TbTrees in myModels.SYS_Region
                                 select new TreeVo
                                 {
                                     SireID = TbTrees.SireID, //父id  
                                     ViscountID = TbTrees.ViscountID,   //子id                                   
                                     RegionName = TbTrees.RegionName,//节点名
                                 }).ToList();
     foreach (var list in listAuthorityTemplet)
     {
         Dictionary<string, object> jsonobj = new Dictionary<string, object>(); //创建一个表示键和值的集合
         jsonobj.Add("id", list.SireID); //父亲id
         jsonobj.Add("pId", list.ViscountID);//儿子id
         jsonobj.Add("name", list.RegionName);//节点名称
         jsonlist.Add(jsonobj);//把键值的集合添加到列表上
     }
     return Json(jsonlist, JsonRequestBehavior.AllowGet);
 }

数据库：

实现效果如下：