一棵小树

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zTreeDemo.aspx.cs" Inherits="Log.zTreeDemo" %>

<!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="Content/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="Content/jquery/1.9.1/jquery.min.js"></script>
    <script src="Content/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        //http://www.treejs.cn
        //pIdKey的值如果不设置(pid),默认为pId(上过当)
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            }
        };
        var treeNodes = [
           { id: 1, pid: 0, name: "View1" },
           { id: 11, pid: 1, name: "View2" },
           { id: 12, pid: 1, name: "View3" },
           { id: 111, pid: 11, name: "View4" },
           { id: 1112, pid: 111, name: "View4" }
        ];

        $(document).ready(function () {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, treeNodes);
            //zTree = $(".ztree").zTree(setting, treeNodes);
        });


    </script>

    <%--
    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($("#tree"), setting, zNodes);
    });
    //
	--%>
</head>
<body>
    <table>
        <tr>
            <td>
                <ul id="tree" class="ztree" style="width: 260px; overflow: auto;"></ul>
            </td>
        </tr>
    </table>
</body>
</html>

 

转载于:https://www.cnblogs.com/shiyige-216/p/7717574.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值