jquery——zTree, 完美好用的树插件

最新推荐文章于 2024-05-10 09:39:31 发布

吉普赛的歌

最新推荐文章于 2024-05-10 09:39:31 发布

阅读量4.4w

点赞数 4

分类专栏：前端 - jQuery插件文章标签： jquery tree 产品

本文链接：https://blog.csdn.net/yenange/article/details/7262682

版权

前端 - jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Demo

这绝对是我见过最完美的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>

吉普赛的歌

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
11
评论
jquery——zTree, 完美好用的树插件

Demo这绝对是我见过最完美的tree了，虽然是国产货，但一点不输国外产品，国外的还没有见过这么强的。__________________________________________________________________________________下面是简单的使用demo: ZTREE DEMO - Standard Data
复制链接

扫一扫