C#使用Jquery zTree实现树状结构显示_异步数据加载

JQuery-Ztree下载地址：https://github.com/zTree/zTree_v3

JQuery-Ztree数结构演示页面：  http://www.treejs.cn/v3/demo.php#_101

关于zTree的详细解释请看演示页面，还有zTree帮助Demo。

 

下面简要讲解下本人用到的其中一个实例（直接上关键代码了）：

异步加载节点数据：  

A-前台：

<link href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    var setting = {
        async: {
            enable: true,
            url: "../Handler/ShoppingHandler.ashx",   //请求的一般处理程序
            autoParam: ["id"],                          //自带参数id--来自于节点id
            otherParam: { "type": "GetUserLevelList" },  //其他参数自定义
            dataFilter: filter,    //数据过滤
            type: "post"    //请求方式
        }
    };

    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 class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
</div>

View Code