ztree 使用asp.net mvc异步动态获取数据

本文介绍如何使用ZTree插件实现异步加载节点数据,并展示了一个基于ASP.NET MVC的后台数据提供方式。通过配置设置及回调函数,实现了前端树形结构的动态生成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script src="~/Scripts/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="~/Scripts/ztree/js/jquery.ztree.core-3.5.js"></script>
    <title>Index</title>
    <script type="text/javascript">
        ////异步加载节点
        var setting = {
            async: {
                enable: true,
                url: "/Home/ZtreeData",//数据请求地址
                autoParam: ["id", "name", "pId","level=lv"],//像后台请求数据时的参数
                otherParam: { "otherParam": "zTreeAsyncTest" },
                dataFilter: filter
            },
            callback: {
                onclick: nodeClick
            }
        };
        function nodeClick(event, treeId, treeNode, clickFlag)
        {
           //节点点击事件
        }
        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting);
        });

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

后台采用asp.net mvc动态数据:

public ActionResult ZtreeData(string lv,string id="0",string pId = "0")
        {
            Sql2012TestEntities db = new Sql2012TestEntities();
            return Json(db.TreeTable.Select(t => new
                {
                    id = t.ID,
                    pId = t.PID,
                    name = t.Name,
                    t = t.Name,
                    click = true,//是否可以点击
                    isParent = db.TreeTable.Any(a=>a.PID==t.ID)//判断是否为父节点
            }).Where(t => t.pId == id), JsonRequestBehavior.AllowGet);
        }



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值