zTree (一) Checkbox

最新推荐文章于 2020-09-29 17:28:33 发布

weixin_30641465

最新推荐文章于 2020-09-29 17:28:33 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/albert-think/p/10033052.html

本文详细介绍了zTree树形控件的配置与使用方法，包括如何通过JavaScript初始化树形结构，以及如何实现节点的选择与数据的绑定。通过实例代码展示了zTree的基本用法，适合前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zTree</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<link rel="stylesheet" href="${ctx}/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery.ztree.excheck.js"></script>
<body>
<div style="margin-left: 50px;margin-top: 10px;">
    name:<input id="myData" type="text" placeholder="选中的内容" />
    <ul id="treeDemo" class="ztree" style="margin-top: 10px; width: 200px; height: 150px;">
    </ul>
    <button id="myButton" style="margin-top: 10px;">选中的元素</button>
</div>

<script>
    function createTree(url, treeId) {
        var zTree; //用于保存创建的树节点
        var setting = { //设置
            check: {
                enable: true
            },
            view: {
                showLine: true, //显示辅助线
                dblClickExpand: true,
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            }
        };
       /* $.ajax({ //请求数据,创建树
            type: 'GET',
            url: url,
            dataType: "json", //返回的结果为json
            success: function(data) {
                zTree = $.fn.zTree.init($(treeId), setting, data); //创建树
            },
            error: function(data) {
                alert("创建树失败!");
            }
        });*/
        zTree = $.fn.zTree.init($(treeId), setting, url); //创建树
    }
    $(document).ready(function() {
        var data=[
            {
                "id": 1,
                "pid": 0,
                "name": "pNode 1",
                "open": true,
                "attr": "id1"
            }, {
                "id": 11,
                "pid": 1,
                "name": "pNode 11",
                "attr": "id11"
            }, {
                "id": 111,
                "pid": 11,
                "name": "leaf node 111",
                "attr": "id111"
            }, {
                "id": 112,
                "pid": 11,
                "name": "leaf node 112",
                "attr": "id112"
            }, {
                "id": 12,
                "pid": 1,
                "name": "pNode 12",
                "attr": "id12"
            }, {
                "id": 2,
                "pid": 0,
                "name": "pNode 2",
                "attr": "id2"
            }, {
                "id": 21,
                "pid": 2,
                "name": "pNode 21",
                "open": true,
                "attr": "id21"
            }
        ];
        createTree(data, "#treeDemo"); //创建
        $("#myButton").click(function() {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = treeObj.getCheckedNodes(true);
            if(0 === nodes.length) {
                alert("请选择!");
                return;
            }
            var dataNodes = "";
            for(var i = 0; i < nodes.length; i++) {
                dataNodes += nodes[i].name + ",";
            }
            alert(dataNodes); //获取选中节点的值
        });
    });

</script>
</body>
</html>