ztree

最新推荐文章于 2025-06-10 09:02:43 发布

原创最新推荐文章于 2025-06-10 09:02:43 发布 · 821 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个高度评价的国产树形组件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>