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

时间：2022-12-14 17:17:05

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>

相关文章