zTree的的是一个非常优秀的开源jQuary树插件,应用非常广泛。
选用该插件进行大数据量的加载时,会非常影响加载速度,还非常容易造成页面假死,虽然官网上的演示里有异步加载,但其是PHP环境下的加载,且每次点击节点还需要重新异步加载,还是有些麻烦,在.NET MVC模式下用C#直接从数据库获取大量数据就不能仿照官网的Demo了。
但是可以换一种思路:先是从数据库只获取返回根节点的JSON数据,再在加载完全部根节点后立即对根节点强行异步加载,返回各个根节点下的全部数据,这样在加载页面时,会首先显示全部根节点,不过根节点的图标为正在加载的状态,等到全部加载完后,图标正常显示。相比于等到返回全部数据再构造树来说,不至于有一段长时间的空白。
下面放代码:
前段设置树:
//设置Ztree树
var setting_Area = {
async: {
enable: true,
autoParam: ["ID"],
url: '@Url.Action("JsonAsync", "Data")',
otherParam: { "otherParam": "zTreeAsyncTest" },
dataFilter: filter,
dataType:"json",
}
}
//树的初始化
$(document).ready(function () {
$.get('@Url.Action("JsonAsync", "Data")', function (r) {
ztree = $.fn.zTree.init($("#Tree"), setting_Area, r);
var nodes = ztree.getNodes();
for (i = 0; i < nodes.length; i++) {
ztree.reAsyncChildNodes(nodes[i], "refresh",true);
}
});
});
后台Data.cs代码:
public JsonResult JsonAsync(string ID= "")
{
//DOS.ORM获取数据库全部数据
List<Area> list = Db.GetEntryList<Area>();
if (ID == "")//初次加载之返回根节点
{
var newlist = list.Select(t => new
{
ID = t.ID,
P_ID = t.P_ID,
Name = t.Name,
click = true,//可以点击
isParent = true//设为父节点
}).Where(t => t.P_ID == ID);
return Json(newlist, JsonRequestBehavior.AllowGet);
}
else
{
var newlist = GetSonsList(list, ID);
return Json(newlist, JsonRequestBehavior.AllowGet);
}
}
//获取根节点下的所有节点
public static IEnumerable<Area> GetSonsList(IList<Area> list, int P_ID)
{
List<Area> children_List = (from p in list
where p.P_ID == P_ID
select p
).ToList<Area>();
return children_List.ToList().Concat(children_List.ToList().SelectMany(t => GetSonsList(list, t.ID)));
}