大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
这绝对是我见过最完美的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>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118814.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...