demo.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. window.addEvent('domready',function(){
  2. var tree = new Mif.Tree({
  3. container: $('tree_container'),
  4. forest: true,
  5. initialize: function(){
  6. this.initCheckbox('simple');
  7. new Mif.Tree.KeyNav(this);
  8. },
  9. types: {
  10. folder: {
  11. openIcon: 'mif-tree-open-icon',
  12. closeIcon: 'mif-tree-close-icon'
  13. },
  14. loader: {
  15. openIcon: 'mif-tree-loader-open-icon',
  16. closeIcon: 'mif-tree-loader-close-icon',
  17. dropDenied: ['inside','after']
  18. },
  19. disabled: {
  20. openIcon: 'mif-tree-open-icon',
  21. closeIcon: 'mif-tree-close-icon',
  22. dragDisabled: true,
  23. cls: 'disabled'
  24. },
  25. book: {
  26. openIcon: 'mif-tree-book-icon',
  27. closeIcon: 'mif-tree-book-icon',
  28. loadable: true
  29. },
  30. bin: {
  31. openIcon: 'mif-tree-bin-open-icon',
  32. closeIcon: 'mif-tree-bin-close-icon'
  33. }
  34. },
  35. dfltType: 'folder',
  36. height: 18,
  37. onCheck: function(node){
  38. $('log').adopt(new Element('li').set('html', node.name + ' checked'));
  39. },
  40. onUnCheck: function(node){
  41. $('log').adopt(new Element('li').set('html', node.name + ' unchecked'));
  42. }
  43. });
  44. //tree.initSortable();
  45. var json = [
  46. {
  47. "property": {
  48. "name": "root"
  49. },
  50. "children": [
  51. {
  52. "property": {
  53. "name": "node1"
  54. }
  55. },
  56. {
  57. "property": {
  58. "name": "node2",
  59. "hasCheckbox": false
  60. },
  61. "children":[
  62. {
  63. "property": {
  64. "name": "node2.1"
  65. },
  66. "state": {
  67. "checked": "checked"
  68. }
  69. },
  70. {
  71. "property": {
  72. "name": "node2.2"
  73. }
  74. }
  75. ]
  76. },
  77. {
  78. "property": {
  79. "name": "node4"
  80. }
  81. },
  82. {
  83. "property": {
  84. "name": "node3",
  85. "hasCheckbox": false
  86. }
  87. }
  88. ]
  89. }
  90. ];
  91. // load tree from json.
  92. tree.load({
  93. json: json
  94. });
  95. });