多表生成一个zTree树形

如何在MVC中实现多表数据生成一个zTree树形： 首先引用zTree的CSS和Js的文件：

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

HTML部分

<ul id="treeDistrict" class="ztree"></ul>

然后用Js代码配置树形

var setting = { data: { simpleData: { enable e: true} }, }

控制器方法：ProvinceTree() 先查询出省级表中的数据，然后嵌套子查询，查询市级表中的数据，再嵌套子查询，将区表中的数据查询出来，这样子就将省市区三张表的数据查询出来，因为页面上要用到市级表的条数，所以再将市级表的条数查询出来，具体代码如下：

public ActionResult ProvinceTree() { int count = (from abCity in myModel.T_City select abCity).Count(); List<zTreeVo> listProvince = (from tbProvince in myModel.T_Province select new zTreeVo { id = tbProvince.ProID, name = tbProvince.ProName, pId = 0, CityzTree = (from tbCity in myModel.T_City where tbCity.ProID == tbProvince.ProID select new CityzTreeVo { cityid = tbCity.CityID, cityname = tbCity.CityName, citypId = tbCity.ProID, count = count, DistrictzTree = (from tbDistrict in myModel.T_District where tbDistrict.CityID == tbCity.CityID select new DistrictzTreeVo { DisId = tbDistrict.Id, Disname = tbDistrict.DisName, DispId = tbDistrict.CityID }).ToList() }).ToList() }).ToList(); return Json(listProvince, JsonRequestBehavior.AllowGet); }

先声明数组zNodes[]和字符串zNodesbtn，然后通过for循环将获取控制器传过来的省表数据按照zTree简单模式的样式放进zNodesbtn中，然后将zNodesbtn通过push()放进zNodes[]中，然后将省表数据中的CityzTree(市表数据)进行for循环，获取省表数据的length值，将 length值与市表数据中的ID相加，让市表的ID不与省表的ID冲突，另外给一个字段放市表的ID，也是一样的方式放进zNodes[]中，最后将市表数据中的DistrictzTree (区表数据)进行for循环，获取省表数据的length值和市级表的条数count，将它们与区表数据中的ID相加， 通过上面一样的方式放进zNodes[]中，最后将zNodes用zTree 初始化方法$.fn.zTree.init 生成树形，具体代码如下：

$(function () { var zNodes = []; var zNodesbtn = ""; $.get("ProvinceTree", function (data) { console.log(data); for (var j = 0; j < data.length; j++) { zNodesbtn = { id: data[j].id, pId: 0, name: data[j].name, }; zNodes.push(zNodesbtn); var CityzTree = data[j].CityzTree; if (CityzTree != null && CityzTree != "") { for (var i = 0; i < CityzTree.length; i++) { var Cityid = (data.length - 0) + (CityzTree[i].cityid - 0); zNodesbtn = { id: Cityid, pId: data[j].id, name: CityzTree[i].cityname, CityID: CityzTree[i].cityid }; zNodes.push(zNodesbtn); var DistrictzTree = CityzTree[i].DistrictzTree; for (var a = 0; a < DistrictzTree.length; a++) { var DisID = ((data.length - 0) + (CityzTree[i].count - 0)) + (DistrictzTree[a].DisId - 0); zNodesbtn = { id: DisID, pId: Cityid, name: DistrictzTree[a].Disname, DistrictID: DistrictzTree[a].DisId }; zNodes.push(zNodesbtn); } } } } $.fn.zTree.init($("#treeDistrict"), setting, zNodes); }); });

效果图：