zTree最简单的树 -- ajax加载

2017-02-07 20:43:42 访问(2794) 赞(0) 踩(0)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WebForms_WebPages_zTree_v2_Default" ValidateRequest="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>zTree最简单的树 -- ajax加载_<%=WebTitle %></title>
    <link rel="stylesheet" href="<%=strPhyPath %>/Components/zTree/zTree_v3-master/css/demo.css" type="text/css" />
    <link rel="stylesheet" href="<%=strPhyPath %>/Components/zTree/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <script type="text/javascript" src="<%=strPhyPath %>/Components/zTree/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="<%=strPhyPath %>/Components/zTree/zTree_v3-master/js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
		<!--
    var setting = {};
 
    function treeAjaxLoad() {
        var ajaxUrl = "<%=strPhyPath %>/Handlers/WebPages/zTree/v2/AjaxHandler.ashx";

        $.ajax({
            cache: false,
            async: true,
            url: ajaxUrl,
            type: "post",
            success: function (data) {
                var ajaxZNodes = null;
                eval("ajaxZNodes = " + data + ";");

                $.fn.zTree.init($("#treeDemo"), setting, ajaxZNodes);
            }
        });

        
    }

    //-->
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>zTree最简单的树 -- ajax加载</h1>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="right">
                <input type="button" id="Button1" value="ajax加载" onclick="treeAjaxLoad();" />
            </div>
        </div>

    </form>
</body>
</html>

<%@ WebHandler Language="C#" Class="AjaxHandler" %>

using System;
using System.Web;

public class AjaxHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Write(
@"[
        {
            name: ""父Ajax节点1 - 展开"", open: true,
            children: [
                {
                    name: ""父Ajax节点11 - 折叠"",
                    children: [
                        { name: ""叶子Ajax节点111"" },
                        { name: ""叶子Ajax节点112"" },
                        { name: ""叶子Ajax节点113"" },
                        { name: ""叶子Ajax节点114"" }
                    ]
                },
                {
                    name: ""父Ajax节点12 - 折叠"",
                    children: [
                        { name: ""叶子Ajax节点121"" },
                        { name: ""叶子Ajax节点122"" },
                        { name: ""叶子Ajax节点123"" },
                        { name: ""叶子Ajax节点124"" }
                    ]
                },
                { name: ""父Ajax节点13 - 没有子Ajax节点"", isParent: true }
            ]
        },
        {
            name: ""父Ajax节点2 - 折叠"",
            children: [
                {
                    name: ""父Ajax节点21 - 展开"", open: true,
                    children: [
                        { name: ""叶子Ajax节点211"" },
                        { name: ""叶子Ajax节点212"" },
                        { name: ""叶子Ajax节点213"" },
                        { name: ""叶子Ajax节点214"" }
                    ]
                },
                {
                    name: ""父Ajax节点22 - 折叠"",
                    children: [
                        { name: ""叶子Ajax节点221"" },
                        { name: ""叶子Ajax节点222"" },
                        { name: ""叶子Ajax节点223"" },
                        { name: ""叶子Ajax节点224"" }
                    ]
                },
                {
                    name: ""父Ajax节点23 - 折叠"",
                    children: [
                        { name: ""叶子Ajax节点231"" },
                        { name: ""叶子Ajax节点232"" },
                        { name: ""叶子Ajax节点233"" },
                        { name: ""叶子Ajax节点234"" }
                    ]
                }
            ]
        },
        { name: ""父Ajax节点3 - 没有子Ajax节点"", isParent: true }

    ]
");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}