asp.net zTree 异步加载

浏览数：144 / 时间：2015年06月09日

第一次写文章，关于这两天做的关于zTree插件的一些内容，不足之处希望各位见谅：

http://www.ztree.me/v3/main.php#_zTreeInfo zTree官网地址

zTree插件还是很强大的，操作灵活，界面也漂亮，做web的应该都了解的

代码附上

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Style/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../Script/ztree/jquery-1.4.4.min.js"></script>
    <script src="../Script/ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        var zNodes;
        var treeNodes;
        var childCount;
        var setting = {
            async: {
                dataFilter: function (treeId, parentNode, responseData) {
　　　　　　　　　　　　//这里的内容为异步提交后 ，获取的数据进行处理，点击节点，去后台获取节点下的子节点，更新树结构
                    for (var i = 0; i < responseData.length; i++) {
　　　　　　　　　　　　　　//这里循环操作数据  把节点效果全部改成父节点样式
                        var F_PARENT_ID = responseData[i].F_RAD_ID;
                        $.ajax({
                            type: ‘get‘,
                            async: false,
                            url: ‘../ASHX/SelectChildCount.ashx?F_PARENT_ID=‘+F_PARENT_ID,
                            success: function (data) { 
                                if (data!=null || data!="0") {
                                    chiliCount = "1";
                                    responseData[i].isParent = true;
                                } else {
                                    chiliCount = "0";
                                    responseData[i].isParent = false;
                                }
                            } 
                        });
                  
                    } 
                    return responseData;//更新树结构
                },
                dataType: "json",
                enable: true,
             
            },

            check: {
                enable: false,

            },

            view: {
                showLine: true
            },
            callback: {
                beforeExpand: function (treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.setting.async.url = "../ASHX/TestData.ashx?ajaxMethod=AnsyData&F_RAD_ID=" + treeNode.F_RAD_ID;
               
                }
            },

            data: {
                key: {
                    name: "F_CHINESE"
                },
                simpleData: {
                    enable: true,
                    idKey: "F_RAD_ID",
                    pIdKey: "F_PARENT_ID",
                    rootId: 0
                }
            }
        };

      
        
        //初始化ztree树
        $(document).ready(function () {
           //配置静态的根节点
            var zNodes2 = [{ "F_RAD_ID": 1, "F_PARENT_ID": 0, "F_CHINESE": "Radlex实体本体论", isParent: true }];
            $.fn.zTree.init($("#treeDemo"), setting, zNodes2);
        });
      
    </script>
</head>
<body>

    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
</body>
</html>