zTree最简单的树 -- 标准 JSON 数据

2017-02-07 20:42:56  访问(2867) 赞(0) 踩(0)


相关下载:源码下载  zTree_v3-master.zip     

  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WebForms_WebPages_zTree_v1_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></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 = {};
    
        var zNodes = [
            {
                name: "父节点1 - 展开", open: true,
                children: [
                    {
                        name: "父节点11 - 折叠",
                        children: [
                            { name: "叶子节点111" },
                            { name: "叶子节点112" },
                            { name: "叶子节点113" },
                            { name: "叶子节点114" }
                        ]
                    },
                    {
                        name: "父节点12 - 折叠",
                        children: [
                            { name: "叶子节点121" },
                            { name: "叶子节点122" },
                            { name: "叶子节点123" },
                            { name: "叶子节点124" }
                        ]
                    },
                    { name: "父节点13 - 没有子节点", isParent: true }
                ]
            },
            {
                name: "父节点2 - 折叠",
                children: [
                    {
                        name: "父节点21 - 展开", open: true,
                        children: [
                            { name: "叶子节点211" },
                            { name: "叶子节点212" },
                            { name: "叶子节点213" },
                            { name: "叶子节点214" }
                        ]
                    },
                    {
                        name: "父节点22 - 折叠",
                        children: [
                            { name: "叶子节点221" },
                            { name: "叶子节点222" },
                            { name: "叶子节点223" },
                            { name: "叶子节点224" }
                        ]
                    },
                    {
                        name: "父节点23 - 折叠",
                        children: [
                            { name: "叶子节点231" },
                            { name: "叶子节点232" },
                            { name: "叶子节点233" },
                            { name: "叶子节点234" }
                        ]
                    }
                ]
            },
            { name: "父节点3 - 没有子节点", isParent: true }
    
        ];
    
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <h1>zTree最简单的树 -- 标准 JSON 数据</h1>
            <div class="content_wrap">
                <div class="zTreeDemoBackground left">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </form>
    </body>
    </html>
    
    


标签:zTree    树控件    组件DEMO 

上一条:

下一条:


 

相关评论

评论加载中……
 

发表评论

类型:
内容:
  (Alt+Enter)
 
  ┈全部┈  
 
(显示默认分类)