在树中可视化JSON或XML数据 数据树

  • 源码大小:10.58KB
  • 所需积分:1积分
  • 源码编号:19JP-3336
  • 浏览次数:623次
  • 最后更新:2023年06月02日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Data Tree是一个易于使用但完全可自定义的jQuery树视图插件,用于在分层树结构中可视化JSON或XML数据。

更多功能:

  • 从本地服务器或web服务器加载数据。
  • 懒惰加载子树中的数据。
  • 支持深度链接。例如。https://yourwebsite.com/#tree0:0,0;
  • 保留跨页转换状态。
  • 自动数据缓存以获得更好的性能。
  • 简洁的UI设计。

参见:

  • 格式化JSON字符串的10个最佳JSON查看器工具
  • JavaScript中的10个最佳在线JSON数据转换器

如何使用它:

1.创建一个容器来容纳树。

  1. <div id="tree"></div>

2.在HTML页面中加载数据树插件的文件。

  1. <link rel="stylesheet" href="data-tree.css" />
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="data-tree.js"></script>

3.初始化数据树并指定JSON或XML数据源的路径。

  1. // XML
  2. new DataTree({
  3. fpath: 'xml.xml',
  4. container: '#tree'
  5. });
  6.  
  7. // JSON
  8. new DataTree({
  9. fpath: 'xml.xml',
  10. container: '#tree'
  11. json: true
  12. });
  13.  
  14. // fetch data from a web service
  15. new DataTree({
  16. fpath: 'web_service.php?level=root',
  17. container: '#tree'
  18. });

4.初始化数据树并指定JSON或XML数据源的路径。

  1. // XML
  2. new DataTree({
  3. fpath: 'xml.xml',
  4. container: '#tree'
  5. });
  6.  
  7. // JSON
  8. new DataTree({
  9. fpath: 'xml.xml',
  10. container: '#tree'
  11. });
  12.  
  13. // fetch data from a web service
  14. new DataTree({
  15. fpath: 'web_service.php?level=root',
  16. container: '#tree'
  17. });

5.自定义树的完整配置。

  1. new DataTree({
  2.  
  3. // how attributes should behave in the resultant
  4. // 'show', 'hide', or 'ignore'
  5. attrs: 'show',
  6.  
  7. // pass true to apply this to all attributes,
  8. // or an array of attribute names.
  9. attrsAsClasses: true,
  10.  
  11. // identical to attrsAsClasses, except attributes will become jQuery data
  12. // i.e. accessible via .data())on the element rather than classes.
  13. attrsAsData: true,
  14.  
  15. // whether to allow caching on the root-level data request
  16. cache: true,
  17.  
  18. // container to hold the tree
  19. container: '',
  20.  
  21. // path to the JSON or XML data
  22. fpathL: '',
  23.  
  24. // whether or not to show the names of nodes in the tree
  25. hideNodeNames: false,
  26.  
  27. // a boolean, if you're loading data over a web service (via fpath), which tells DataTree to conver the JSON response to XML before output
  28. // or a literal JSON string of JavaScript object from which to generate the tree - the JSON equivalent to xml
  29. json: '',
  30.  
  31. // pass XML string here
  32. xml: '',
  33.  
  34. // pass true if you are loading your XML over JSON-P rather than locally
  35. jsonp: false,
  36.  
  37. // if true, sub-tree request responses will be cached and not re-fetched from the server should the same sub-tree request be triggered again later
  38. noSubTreeCache: false,
  39.  
  40. // if true, the steps taken navigating the tree will not be logged in the URL hash.
  41. // this means the tree returns to its original state on page refresh
  42. noURLTracking: false,
  43.  
  44. // open the tree at a specific node
  45. openAtPath: '',
  46.  
  47. // whether the tree should be fully expanded when the page loads
  48. startExpanded: false,
  49.  
  50. // load more data when expanded
  51. subTreeBranches: '',
  52.  
  53. // invoked when a user clicks the plus/minus link next to a node, i.e. expands or collapses it. Your callback function will automatically be passed 4 arguments:
  54. // event (event object) - a jQuery click event object.
  55. // li (jQuery object) - a jQuery reference to the node LI
  56. // li (jQuery object) - a string, either 'open' or 'close', depending on whether the corresponding node LI's children are currently visible or hidden
  57. // XPath (string) - the XPath of the node LI.
  58. plusMinCallback: function(event, li, li, XPath){},
  59.  
  60. // click callback
  61. // it receives the same data as above, except the 4th argument.
  62. clickCallback: function(event, li, li){},
  63.  
  64. // it is automatically passed a jQuery reference to the tree ul as its only argument.
  65. renderCallback: function(event){},
  66.  
  67. // invoked when a sub-tree branch (see subTreeBranches) is expanded
  68. // return the URL to the XML to load into it
  69. // it is automatically passed a jQuery reference to the clicked LI as its only argument.
  70. subTreeRequest: function(){},
  71.  
  72. // useful if you want to tweak the XML before tree output starts to be generated.
  73. XMLCallback: function(event){},
  74.  
  75. });

6.获取与LI匹配选择器相关的XML节点/JS对象。

  1. instance.getNode(selector);

7.跳转到树的特定分支,对应于传递的jQuery选择器。

  1. instance.jumpTo(selector, closeOthers);

更新日志:

2022-10-26

  • 更新JS

预览截图