ztree

本文介绍了一个高度评价的国产树形组件ZTree,并提供了一个简单易懂的使用示例,展示了如何利用jQuery初始化树形结构并实现点击事件。

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

这绝对是我见过最完美的tree了,虽然是国产货,但一点不输国外产品,国外的还没有见过这么强的。

__________________________________________________________________________________

下面是简单的使用demo:

<!DOCTYPE html>  
<html>  
<head>  
    <title>ZTREE DEMO - Standard Data </title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />  
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>  
    <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        var setting = {  
            view: {  
                selectedMulti: false        //禁止多点选中  
            },  
            data: {  
                simpleData: {  
                    enable:true,  
                    idKey: "id",  
                    pIdKey: "pId",  
                    rootPId: ""  
                }  
            },  
            callback: {  
                onClick: function(treeId, treeNode) {  
                    var treeObj = $.fn.zTree.getZTreeObj(treeNode);  
                    var selectedNode = treeObj.getSelectedNodes()[0];  
                    $("#txtId").val(selectedNode.id);  
                    $("#txtAddress").val(selectedNode.name);  
                }  
            }  
        };  
        var zNodes =[  
            {id:1, pId:0, name:"广东", open:true},  
            {id:101, pId:1, name:"广州", file:"core/standardData"},  
            {id:102, pId:1, name:"深圳", file:"core/simpleData"},  
            {id:103, pId:1, name:"东莞", file:"core/noline"}  
        ];  
  
        $(document).ready(function(){  
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
        });  
    </script>  
</head>  
<body>  
    <div style="float:left;" >  
        <ul id="treeDemo" class="ztree">  
        </ul>  
    </div>  
    <div style="float:left;" >  
        id: <input id="txtId" type="text" value="" /><br />  
        地名:<input id="txtAddress" type="text" value="" />  
    </div>  
</body>  
</html>  

03-20
### zTree JavaScript 树形控件 使用说明 #### 什么是 ZTreeZTree 是一款基于 jQuery 的强大树形控件插件,支持多种功能配置和扩展。它能够轻松实现复杂的树结构展示,并提供丰富的交互方式。 --- #### 创建带有复选框的树 为了创建一个带复选框的树形控件,可以按照以下方式进行初始化: ```javascript // 初始化 ZTree 控件 var setting = { check: { // 配置复选框选项 enable: true, // 启用复选框 chkStyle: "checkbox", // 设置样式为 checkbox radioType: "all" // 支持全选/半选逻辑 }, data: { simpleData: { enable: true // 开启简单数据模式 } } }; $(document).ready(function () { $.fn.zTree.init($("#treeDemo"), setting, [ { id: 1, pId: 0, name: "父节点1" }, { id: 11, pId: 1, name: "子节点1-1" }, { id: 12, pId: 1, name: "子节点1-2" } ]); }); ``` 上述代码展示了如何通过 `setting` 参数启用复选框并加载简单的树形数据[^1]。 --- #### 动态设置节点状态 可以通过 API 方法动态修改某个节点的状态,例如设置某节点被勾选或取消勾选: ```javascript // 获取已初始化的 ZTree 对象实例 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); // 定位到指定 ID 节点 var node = zTree.getNodeByParam("id", 1); // 勾选该节点 (true 表示勾选, false 取消勾选) zTree.checkNode(node, true, true); zTree.updateNode(node); // 更新节点显示状态 ``` 此部分实现了对特定节点的操作控制。 --- #### 获取当前选中的节点 当用户完成选择后,可通过如下方法获取所有已被勾选的节点列表: ```javascript var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var checkedNodes = treeObj.getCheckedNodes(true); // 返回所有被勾选的节点数组 console.log(checkedNodes.map(node => node.name)); // 打印名称集合 ``` 这段代码用于提取用户最终选定的结果集。 --- #### 自定义 DOM 结构 除了默认渲染外,还可以利用 `name` 属性来自定义每个节点的内容区域。这种方式允许开发者完全掌控 HTML 输出形式而不局限于内置模板[^2]。 例如,在 JSON 数据源中加入额外字段作为占位符供前端解析使用即可达成目标效果。 --- #### 下载地址及相关资源链接 官方文档提供了详尽的功能描述以及案例演示页面,请访问官网下载最新版本文件包及其依赖库[jQuery](https://jquery.com/)一起引入项目环境当中测试运行。 [ZTree Official Website](http://www.treejs.cn/v3/main.php) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值