index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jstree basic demos</title>
  6. <style>
  7. html { margin:0; padding:0; font-size:62.5%; }
  8. body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
  9. h1 { font-size:1.8em; }
  10. .demo { overflow:auto; border:1px solid silver; min-height:100px; }
  11. </style>
  12. <link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
  13. </head>
  14. <body>
  15. <h1>HTML demo</h1>
  16. <div id="html" class="demo">
  17. <ul>
  18. <li data-jstree='{ "opened" : true }'>Root node
  19. <ul>
  20. <li data-jstree='{ "selected" : true }'>Child node 1</li>
  21. <li>Child node 2</li>
  22. </ul>
  23. </li>
  24. </ul>
  25. </div>
  26. <h1>Inline data demo</h1>
  27. <div id="data" class="demo"></div>
  28. <h1>Data format demo</h1>
  29. <div id="frmt" class="demo"></div>
  30. <h1>AJAX demo</h1>
  31. <div id="ajax" class="demo"></div>
  32. <h1>Lazy loading demo</h1>
  33. <div id="lazy" class="demo"></div>
  34. <h1>Callback function data demo</h1>
  35. <div id="clbk" class="demo"></div>
  36. <h1>Interaction and events demo</h1>
  37. <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
  38. <div id="evts" class="demo"></div>
  39. <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  40. <script src="./../../dist/jstree.min.js"></script>
  41. <script>
  42. // html demo
  43. $('#html').jstree();
  44. // inline data demo
  45. $('#data').jstree({
  46. 'core' : {
  47. 'data' : [
  48. { "text" : "Root node", "children" : [
  49. { "text" : "Child node 1" },
  50. { "text" : "Child node 2" }
  51. ]}
  52. ]
  53. }
  54. });
  55. // data format demo
  56. $('#frmt').jstree({
  57. 'core' : {
  58. 'data' : [
  59. {
  60. "text" : "Root node",
  61. "state" : { "opened" : true },
  62. "children" : [
  63. {
  64. "text" : "Child node 1",
  65. "state" : { "selected" : true },
  66. "icon" : "jstree-file"
  67. },
  68. { "text" : "Child node 2", "state" : { "disabled" : true } }
  69. ]
  70. }
  71. ]
  72. }
  73. });
  74. // ajax demo
  75. $('#ajax').jstree({
  76. 'core' : {
  77. 'data' : {
  78. "url" : "./root.json",
  79. "dataType" : "json" // needed only if you do not supply JSON headers
  80. }
  81. }
  82. });
  83. // lazy demo
  84. $('#lazy').jstree({
  85. 'core' : {
  86. 'data' : {
  87. "url" : "//www.jstree.com/fiddle/?lazy",
  88. "data" : function (node) {
  89. return { "id" : node.id };
  90. }
  91. }
  92. }
  93. });
  94. // data from callback
  95. $('#clbk').jstree({
  96. 'core' : {
  97. 'data' : function (node, cb) {
  98. if(node.id === "#") {
  99. cb([{"text" : "Root", "id" : "1", "children" : true}]);
  100. }
  101. else {
  102. cb(["Child"]);
  103. }
  104. }
  105. }
  106. });
  107. // interaction and events
  108. $('#evts_button').on("click", function () {
  109. var instance = $('#evts').jstree(true);
  110. instance.deselect_all();
  111. instance.select_node('1');
  112. });
  113. $('#evts')
  114. .on("changed.jstree", function (e, data) {
  115. if(data.selected.length) {
  116. alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
  117. }
  118. })
  119. .jstree({
  120. 'core' : {
  121. 'multiple' : false,
  122. 'data' : [
  123. { "text" : "Root node", "children" : [
  124. { "text" : "Child node 1", "id" : 1 },
  125. { "text" : "Child node 2" }
  126. ]}
  127. ]
  128. }
  129. });
  130. </script>
  131. </body>
  132. </html>