jquery——zTree, 完美好用的树插件
这绝对是我见过最完美的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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。