.NET MVC模式下Ztree树节点分批异步加载

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)));
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值