demo.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. window.addEvent('domready',function(){
  2. tree = new Mif.Tree({
  3. initialize: function(){
  4. new Mif.Tree.KeyNav(this);
  5. },
  6. container: $('tree_container'),// tree container
  7. forest: true,
  8. types: {// node types
  9. folder: {
  10. openIcon: 'mif-tree-open-icon',//css class open icon
  11. closeIcon: 'mif-tree-close-icon'// css class close icon
  12. }
  13. },
  14. dfltType: 'folder',//default node type
  15. height: 18//node height
  16. });
  17. var jsonChildren = [
  18. {
  19. "property":{
  20. "name": "nodeA"
  21. }
  22. },
  23. {
  24. "property":{
  25. "name": "nodeB"
  26. },
  27. "children": [
  28. {
  29. "property":{
  30. "name": "nodeB.1"
  31. }
  32. },
  33. {
  34. "property":{
  35. "name": "nodeB.2",
  36. "expandTo": true //expandTo
  37. },
  38. "children":[
  39. {
  40. "property":{
  41. "name": "nodeB.2.1"
  42. }
  43. }
  44. ]
  45. },
  46. {
  47. "property":{
  48. "name": "nodeB.3"
  49. }
  50. }
  51. ]
  52. },
  53. {
  54. "property":{
  55. "name": "nodeC"
  56. }
  57. }
  58. ];
  59. var json = [
  60. {
  61. "property": {
  62. "name": "root"
  63. },
  64. "children": [
  65. {
  66. "property": {
  67. "name": "node1"
  68. }
  69. },
  70. {
  71. "property": {
  72. "name": "node2"
  73. },
  74. "state": {
  75. "open": true
  76. },
  77. "children":[
  78. {
  79. "property": {
  80. "name": "node2.1"
  81. }
  82. },
  83. {
  84. "property": {
  85. "name": "node2.2",
  86. "expandTo": true//expandTo
  87. },
  88. "children": [
  89. {
  90. "property":{
  91. "name": "node2.2.1"
  92. }
  93. },
  94. {
  95. "property":{
  96. "name": "node2.2.2"
  97. }
  98. },
  99. {
  100. "property":{
  101. "name": "node2.2.3",
  102. "loadOptions": {"json": jsonChildren},
  103. "loadable": true
  104. }
  105. }
  106. ]
  107. }
  108. ]
  109. },
  110. {
  111. "property": {
  112. "name": "node4"
  113. }
  114. },
  115. {
  116. "property": {
  117. "name": "node3"
  118. }
  119. }
  120. ]
  121. }
  122. ];
  123. // load tree from json.
  124. tree.load({
  125. json: json
  126. });
  127. });