zTree用法

最新推荐文章于 2022-03-06 22:27:09 发布

罗汉松驻扎的工作基地

最新推荐文章于 2022-03-06 22:27:09 发布

阅读量1.9w

点赞数

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/41346717

版权

声明：笔者刚刚当程序员，有误请包涵

zTree树形结构前端控件
官网 http://www.ztree.me/v3/main.php#_zTreeInfo
这是个非常灵活的树形控件，有很多款式，非常好用
如图1

使用这个控件有以下步骤：
第一，到官网上下载插件，放到你的工程里面
如图2

第二，在页面中引入了js和css之后就可以写代码了，
我把最简单的例子贴出来：



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="First.aspx.cs" Inherits="ZTreeTest1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: ""
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };

            function zTreeOnClick(event, treeId, treeNode) {

                $("#inp").val("id="+treeNode.id + ", name=" + treeNode.name + ",pId=" + treeNode.pId);
            };

            var zNodes = [
                            { id: 1, pId: 0, name: "[core] 基本功能演示" },
                            { id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据" },
                            { id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据" },
                            { id: 103, pId: 1, name: "不显示连接线" },
                            { id: 104, pId: 1, name: "不显示节点图标" },
                            { id: 105, pId: 1, name: "自定义图标 -- icon 属性" },
                            { id: 106, pId: 1, name: "自定义图标 -- iconSkin 属性" },
                            { id: 107, pId: 1, name: "自定义字体" },
                            { id: 115, pId: 1, name: "超链接演示" },
                            { id: 108, pId: 1, name: "异步加载节点数据" },
                            { id: 109, pId: 1, name: "用 zTree 方法异步加载节点数据" },
                            { id: 110, pId: 1, name: "用 zTree 方法更新节点数据" },
                            { id: 111, pId: 1, name: "单击节点控制" },
                            { id: 112, pId: 1, name: "展开 / 折叠父节点控制" },
                            { id: 113, pId: 1, name: "根据参数查找节点" },
                            { id: 114, pId: 1, name: "其他鼠标事件监听" },

                            { id: 2, pId: 0, name: "[excheck] 复/单选框功能演示" },
                            { id: 201, pId: 2, name: "Checkbox 勾选操作" },
                            { id: 206, pId: 2, name: "Checkbox nocheck 演示" },
                            { id: 207, pId: 2, name: "Checkbox chkDisabled 演示" },
                            { id: 208, pId: 2, name: "Checkbox halfCheck 演示" },
                            { id: 202, pId: 2, name: "Checkbox 勾选统计" },
                            { id: 203, pId: 2, name: "用 zTree 方法勾选 Checkbox" },
                            { id: 204, pId: 2, name: "Radio 勾选操作" },
                            { id: 209, pId: 2, name: "Radio nocheck 演示" },
                            { id: 210, pId: 2, name: "Radio chkDisabled 演示" },
                            { id: 211, pId: 2, name: "Radio halfCheck 演示" },
                            { id: 205, pId: 2, name: "用 zTree 方法勾选 Radio" },

                            { id: 3, pId: 0, name: "[exedit] 编辑功能演示", open: false },
                            { id: 301, pId: 3, name: "拖拽节点基本控制", file: "exedit/drag" },
                            { id: 302, pId: 3, name: "拖拽节点高级控制", file: "exedit/drag_super" },
                            { id: 303, pId: 3, name: "用 zTree 方法移动 / 复制节点", file: "exedit/drag_fun" },
                            { id: 304, pId: 3, name: "基本增 / 删 / 改节点", file: "exedit/edit" },
                            { id: 305, pId: 3, name: "高级增 / 删 / 改节点", file: "exedit/edit_super" },
                            { id: 306, pId: 3, name: "用 zTree 方法增 / 删 / 改节点", file: "exedit/edit_fun" },
                            { id: 307, pId: 3, name: "异步加载 & 编辑功能共存", file: "exedit/async_edit" },
                            { id: 308, pId: 3, name: "多棵树之间的数据交互", file: "exedit/multiTree" },

                            { id: 4, pId: 0, name: "大数据量演示", open: false },
                            { id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },
                            { id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },
                            { id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },

                            { id: 5, pId: 0, name: "组合功能演示", open: false },
                            { id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },
                            { id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },
                            { id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },
                            { id: 504, pId: 5, name: "添加自定义控件", file: "super/diydom" },
                            { id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" },
                            { id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },
                            { id: 513, pId: 5, name: "OutLook 样式的左侧菜单", file: "super/left_menuForOutLook" },
                            { id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },
                            { id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file: "super/select_menu_checkbox" },
                            { id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file: "super/select_menu_radio" },
                            { id: 508, pId: 5, name: "右键菜单的实现", file: "super/rightClickMenu" },
                            { id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" },
                            { id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" },

                            { id: 6, pId: 0, name: "其他扩展功能演示", open: false },
                            { id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },
                            { id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },
                            { id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }
                        ];

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

        })//end document.ready

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="inp" name='inp' style=" width:300px"/>
        <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
    </div>
    </form>
</body>
</html>
运行结果如图3

注释：
我们先看到html部分，
页面只有一个input和一个ul
ul是用来作为树形结构的载体
input是用来显示东西

然后我们看到js部分
这里可以分为3块，

第一块是setting：树形结构的配置

第二块是zNodes：节点的json
这串长长的json有三个特点：1有独一无二的id；有父节点id（pId）；有名字（name）
到时候你自己的程序后台就可以返回一系列带有该结构的json
就可以显示你想要的内容。具体一点就是用$.getJson
例如：
$.getJSON("返回json的地址", function (data) {

                var t = $("#tree");
                t = $.fn.zTree.init(t, setting, data);
            })//end get json

第三块：初始化 $.fn.zTree.init

这个控件可能用起来最麻烦的就是取构造那个treeNode的json
慢慢拼，还是可以拼出来的！！！！

最后贴一段带有checkbox的树形结构（很常用）
注意记得引入 jquery.ztree.excheck-3.5.js

代码如下：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>

    <script type="text/javascript">

        function onCheck(e, treeId, treeNode) {
            alert("id="+treeNode.id+ " ,name="+treeNode.name + " ,pId="+treeNode.pId);
        }

        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "", "N": "" }
            },
            callback: {
                onCheck: onCheck
            }
        };

        var zNodes = [
           { id: 1, pId: 0, name: "随意勾选 1" },
           { id: 11, pId: 1, name: "随意勾选 1-1" },
           { id: 111, pId: 11, name: "随意勾选 1-1-1" },
           { id: 112, pId: 11, name: "随意勾选 1-1-2" },
           { id: 12, pId: 1, name: "随意勾选 1-2" },
           { id: 121, pId: 12, name: "随意勾选 1-2-1" },
           { id: 122, pId: 12, name: "随意勾选 1-2-2" },
           { id: 2, pId: 0, name: "随意勾选 2" },
           { id: 21, pId: 2, name: "随意勾选 2-1" },
           { id: 22, pId: 2, name: "随意勾选 2-2" },
           { id: 221, pId: 22, name: "随意勾选 2-2-1" },
           { id: 222, pId: 22, name: "随意勾选 2-2-2" },
           { id: 23, pId: 2, name: "随意勾选 2-3" }
       ];

           $(document).ready(function () {
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                $("#btn").click(function () {

                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var nodes = treeObj.getCheckedNodes(true);

                    var idList = "";
                    $.each(nodes, function (index, info) {
                        if (idList != "") {
                            idList += ",";
                        }

                        idList += info.id;
                    });

                    alert(idList);
                })

           });


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id='inp' name='inp' />

    <input id='btn' type="button" value='click' />
    <ul id="treeDemo" class="ztree">
    </ul>

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

贴图4：