zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
var setting={ check: { enable:false //设置 zTree 的节点上是否显示 checkbox / radio }, data: { simpleData: { enable:true,// 使用简单数据格式(Array) idKey: "category_id",// 节点数据中保存唯一标识的属性名称 pIdKey: "parent_id",// 节点数据中保存其父节点唯一标识的属性名称 rootPId: 0 // 用于修正根节点父节点数据,即 pIdKey 指定的属性值。 }, key : { name : "category_name" // zTree 节点数据保存节点名称的属性名称。 } }, callback: { onClick: function() { } } }; var zNodes={json_encode($categories, JSON_UNESCAPED_UNICODE)}; $(function(){ $.fn.zTree.init($("#tree"),setting,zNodes); var treeObj = $.fn.zTree.getZTreeObj("tree"); //获取节点 var nodes = treeObj.getNodes(); if (nodes.length > 0) { //treeObj.selectNode(nodes[0].children[0]); //$(".curSelectedNode").trigger("click"); //setting.callback.onClick(null, setting.treeId, nodes[0].children[0]);//调用事件 // 默认选中,并指定URL var treeNode = treeObj.getNodeByParam("category_id", nodes[0].children[0].category_id); $("#list").attr("src",treeNode.url); treeObj.selectNode(nodes[0].children[0]); } });
JSON数据格式
[{"category_id":"1","category_name":"编程语言","parent_id":0,"sort":0,"model":"3","title":"文章模型","link_url":"language","open":"true","target":"list"},{"category_id":"2","category_name":"PHP","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"php","open":"true","url":"\/user\/content\/show\/2","target":"list"},{"category_id":"3","category_name":"Javascript","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"javascript","open":"true","url":"\/user\/content\/show\/3","target":"list"},{"category_id":"4","category_name":"Python","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"python","open":"true","url":"\/user\/content\/show\/4","target":"list"},{"category_id":"5","category_name":"Ruby","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"ruby","open":"true","url":"\/user\/content\/show\/5","target":"list"},{"category_id":"6","category_name":"Java","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"java","open":"true","url":"\/user\/content\/show\/6","target":"list"},{"category_id":"7","category_name":"Object-C","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"object-c","open":"true","url":"\/user\/content\/show\/7","target":"list"},{"category_id":"8","category_name":"Swift","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"swift","open":"true","url":"\/user\/content\/show\/8","target":"list"},{"category_id":"9","category_name":"数据存储","parent_id":0,"sort":0,"model":"3","title":"文章模型","link_url":"database","open":"true","target":"list"},{"category_id":"10","category_name":"MySQL\/MariaDB","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"mysql-mariadb","open":"true","url":"\/user\/content\/show\/10","target":"list"},{"category_id":"11","category_name":"SQLServer","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"sqlserver","open":"true","url":"\/user\/content\/show\/11","target":"list"},{"category_id":"12","category_name":"Oracle","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"oracle","open":"true","url":"\/user\/content\/show\/12","target":"list"},{"category_id":"13","category_name":"PostgreSQL","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"pgsql","open":"true","url":"\/user\/content\/show\/13","target":"list"},{"category_id":"14","category_name":"Redis","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"redis","open":"true","url":"\/user\/content\/show\/14","target":"list"},{"category_id":"15","category_name":"Memcache","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"memcached","open":"true","url":"\/user\/content\/show\/15","target":"list"},{"category_id":"16","category_name":"Mongodb","parent_id":"9","sort":0,"model":"3","title":"文章模型","link_url":"mongodb","open":"true","url":"\/user\/content\/show\/16","target":"list"},{"category_id":"17","category_name":"搜索技术","parent_id":0,"sort":0,"model":"3","title":"文章模型","link_url":"search","open":"true","target":"list"},{"category_id":"18","category_name":"Xunsearch","parent_id":"17","sort":0,"model":"3","title":"文章模型","link_url":"xunsearch","open":"true","url":"\/user\/content\/show\/18","target":"list"},{"category_id":"19","category_name":"Solr","parent_id":"17","sort":0,"model":"3","title":"文章模型","link_url":"solr","open":"true","url":"\/user\/content\/show\/19","target":"list"},{"category_id":"20","category_name":"Sphinx\/Coreseek","parent_id":"17","sort":0,"model":"3","title":"文章模型","link_url":"sphinx-coreseek","open":"true","url":"\/user\/content\/show\/20","target":"list"},{"category_id":"21","category_name":"Elasticsearch","parent_id":"17","sort":0,"model":"3","title":"文章模型","link_url":"elasticsearch","open":"true","url":"\/user\/content\/show\/21","target":"list"},{"category_id":"22","category_name":"服务器运维","parent_id":0,"sort":0,"model":"3","title":"文章模型","link_url":"linux","open":"true","target":"list"},{"category_id":"23","category_name":"CentOS","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"centos","open":"true","url":"\/user\/content\/show\/23","target":"list"},{"category_id":"24","category_name":"Ubuntu","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"ubuntu","open":"true","url":"\/user\/content\/show\/24","target":"list"},{"category_id":"25","category_name":"Shell脚本","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"shell","open":"true","url":"\/user\/content\/show\/25","target":"list"},{"category_id":"26","category_name":"Batch批处理","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"batch","open":"true","url":"\/user\/content\/show\/26","target":"list"},{"category_id":"27","category_name":"Nginx","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"nginx","open":"true","url":"\/user\/content\/show\/27","target":"list"},{"category_id":"28","category_name":"Apache","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"apache","open":"true","url":"\/user\/content\/show\/28","target":"list"},{"category_id":"29","category_name":"负载均衡","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"load-balancer","open":"true","url":"\/user\/content\/show\/29","target":"list"},{"category_id":"30","category_name":"数据库主从同步","parent_id":"22","sort":0,"model":"3","title":"文章模型","link_url":"master-slave","open":"true","url":"\/user\/content\/show\/30","target":"list"},{"category_id":"31","category_name":"关于","parent_id":0,"sort":0,"model":"1","title":"单页模型","link_url":"about","open":"true","url":"\/user\/content\/show\/31","target":"list"},{"category_id":"32","category_name":"CSS","parent_id":"1","sort":0,"model":"3","title":"文章模型","link_url":"css-style","open":"true","url":"\/user\/content\/show\/32","target":"list"}]
官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
GIT库:https://gitee.com/zTree/zTree_v3
访客评论