您的位置：首页 > Web前端 > JQuery

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

2015-08-20 23:42 771 查看

Demo

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

__________________________________________________________________________________

下面是简单的使用demo:

[html] view
plaincopy

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航