Tree2.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. o2.widget = o2.widget || {};
  2. o2.require("o2.widget.Tree", null, false);
  3. o2.widget.Tree2 = new Class({
  4. Extends: o2.widget.Tree,
  5. });
  6. o2.widget.Tree2.Node = new Class({
  7. Implements: [Options, Events],
  8. options: {
  9. "expand": true,
  10. "title": "",
  11. "text": "",
  12. "action": "",
  13. "icon": "folder.png"
  14. },
  15. imgs: {
  16. "expand": "expand.gif",
  17. "collapse":"collapse.gif",
  18. "blank": "blank.gif"
  19. },
  20. tree: null,
  21. level: 0,
  22. levelNode:[],
  23. initialize: function(tree, options){
  24. this.setOptions(options);
  25. if (options.icon=="none") this.options.icon = "";
  26. this.tree = tree;
  27. this.levelNode = [];
  28. this.children = [];
  29. this.parentNode = null;
  30. this.previousSibling = null;
  31. this.nextSibling = null;
  32. this.firstChild = null;
  33. this.node = new Element("div",{
  34. "styles": this.tree.css.treeNode
  35. });
  36. this.itemNode = new Element("div", {
  37. "styles": this.tree.css.treeItemNode
  38. }).inject(this.node);
  39. this.childrenNode = new Element("div", {
  40. "styles": this.tree.css.treeChildrenNode
  41. }).inject(this.node);
  42. if (!this.options.expand){
  43. this.childrenNode.setStyle("display", "none");
  44. }
  45. },
  46. setText: function(value){
  47. var textDivNode = this.textNode.getElement("div");
  48. if (textDivNode) textDivNode.set("text", value);
  49. },
  50. setTitle: function(value){
  51. var textDivNode = this.textNode.getElement("div");
  52. if (textDivNode) textDivNode.set("title", value);
  53. },
  54. load: function(){
  55. this.nodeTable = new Element("table", {
  56. "border": "0",
  57. "cellpadding": "0",
  58. "cellspacing": "0",
  59. "styles": {"width": "fit-content", "table-layout": "fixed"}
  60. }).inject(this.itemNode);
  61. this.nodeTable.setStyles(this.tree.css.nodeTable);
  62. var tbody = new Element("tbody").inject(this.nodeTable);
  63. this.nodeArea = new Element("tr").inject(tbody);
  64. this.createLevelNode();
  65. this.createOperateNode();
  66. this.createIconNode();
  67. this.createTextNode();
  68. },
  69. createLevelNode: function(){
  70. for (var i=0; i<this.level; i++){
  71. var td = new Element("td",{
  72. "styles": this.tree.css.blankLevelNode
  73. }).inject(this.nodeArea);
  74. // var img = new Element("img", {
  75. // "src": o2.tree.path+this.tree.options.style+"/"+this.imgs.blank,
  76. // "width": td.getStyle("width"),
  77. // "height": td.getStyle("height"),
  78. // "border": "0"
  79. // }).inject(td);
  80. this.levelNode.push(td);
  81. }
  82. },
  83. createOperateNode: function(){
  84. this.operateNode = new Element("td",{
  85. "styles": this.tree.css.operateNode
  86. }).inject(this.nodeArea);
  87. this.operateNode.addEvent("click", function(){
  88. this.expandOrCollapse();
  89. }.bind(this));
  90. var img = new Element("img", {
  91. "src": this.tree.path+this.tree.options.style+"/"+this.imgs.blank,
  92. "width": this.operateNode.getStyle("width"),
  93. "height": this.operateNode.getStyle("height"),
  94. "border": "0",
  95. "styles": {
  96. //"margin-top": "6px"
  97. }
  98. }).inject(this.operateNode);
  99. },
  100. createIconNode: function(){
  101. if (this.options.icon){
  102. this.iconNode = new Element("td",{
  103. "styles": this.tree.css.iconNode
  104. }).inject(this.nodeArea);
  105. this.iconNode.setStyle("background", "url("+this.tree.path+this.tree.options.style+"/"+this.options.icon+") center center no-repeat");
  106. //
  107. //var img = new Element("img",{
  108. // "src": this.tree.path+this.tree.options.style+"/"+this.options.icon
  109. //});
  110. //img.inject(this.iconNode);
  111. }
  112. },
  113. createTextNode: function(){
  114. this.textNode = new Element("td",{
  115. "styles": this.tree.css.textNode
  116. }).inject(this.nodeArea);
  117. // var width = this.tree.container.getSize().x - (this.level*20+40);
  118. // this.textNode.setStyle("width", ""+width+"px");
  119. var textDivNode = new Element("div", {
  120. "styles": {"display": "inline-block"},
  121. // "html": this.options.text,
  122. "title": this.options.title
  123. });
  124. textDivNode.setStyles(this.tree.css.textDivNode);
  125. if (this.tree.options.text=="html"){
  126. textDivNode.set("html", this.options.text);
  127. }else{
  128. textDivNode.set("text", this.options.text);
  129. }
  130. textDivNode.addEvent("click", function(e){
  131. this.clickNode(e);
  132. }.bind(this));
  133. textDivNode.inject(this.textNode);
  134. },
  135. clickNode: function(e){
  136. this.selectNode(e);
  137. this.doAction(e);
  138. },
  139. selectNode: function(){
  140. if (this.tree.currentNode){
  141. var textDivNode = this.tree.currentNode.textNode.getElement("div");
  142. textDivNode.setStyles(this.tree.css.textDivNode);
  143. }
  144. var textDivNode = this.textNode.getElement("div");
  145. textDivNode.setStyles(this.tree.css.textDivNodeSelected);
  146. this.tree.currentNode = this;
  147. },
  148. doAction: function(e){
  149. if (typeOf(this.options.action)=="string"){
  150. Browser.exec(this.options.action);
  151. }else if(typeOf(this.options.action)=="function"){
  152. this.options.action.apply(this, [this]);
  153. }
  154. },
  155. setOperateIcon: function(){
  156. var imgStr = (this.options.expand) ? this.imgs.expand : this.imgs.collapse;
  157. imgStr = this.tree.path+this.tree.options.style+"/"+imgStr;
  158. if (!this.firstChild) imgStr = this.tree.path+this.tree.options.style+"/"+this.imgs.blank;
  159. var img = this.operateNode.getElement("img");
  160. if (!img){
  161. img = new Element("img", {
  162. "src": imgStr,
  163. "width": this.operateNode.getStyle("width"),
  164. "height": this.operateNode.getStyle("height"),
  165. "border": "0"
  166. }).inject(this.operateNode);
  167. }else{
  168. img.set("src", imgStr);
  169. }
  170. },
  171. insertChild: function(obj){
  172. var treeNode = new o2.widget.Tree.Node(this.tree, obj);
  173. var tmpTreeNode = this.previousSibling;
  174. this.previousSibling = treeNode;
  175. treeNode.nextSibling = this;
  176. treeNode.previousSibling = tmpTreeNode;
  177. if (tmpTreeNode){
  178. tmpTreeNode.nextSibling = treeNode;
  179. }else{
  180. this.parentNode.firstChild = treeNode;
  181. }
  182. treeNode.parentNode = this.parentNode;
  183. treeNode.level = this.level;
  184. treeNode.load();
  185. treeNode.node.inject(this.node, "before");
  186. this.parentNode.children.push(treeNode);
  187. return treeNode;
  188. },
  189. appendChild: function(obj){
  190. var treeNode = new o2.widget.Tree.Node(this.tree, obj);
  191. if (this.children.length){
  192. treeNode.previousSibling = this.children[this.children.length-1];
  193. treeNode.previousSibling.nextSibling = treeNode;
  194. }else{
  195. this.firstChild = treeNode;
  196. this.setOperateIcon();
  197. }
  198. treeNode.level = this.level+1;
  199. treeNode.parentNode = this;
  200. treeNode.load();
  201. treeNode.node.inject(this.childrenNode);
  202. this.children.push(treeNode);
  203. return treeNode;
  204. },
  205. expandOrCollapse: function(){
  206. this.tree.expandOrCollapseNode(this);
  207. },
  208. destroy: function(){
  209. if (this.previousSibling) this.previousSibling.nextSibling = this.nextSibling;
  210. if (this.nextSibling) this.nextSibling.previousSibling = this.previousSibling;
  211. if (this.parentNode){
  212. if (this.parentNode.firstChild==this){
  213. this.parentNode.firstChild = this.nextSibling;
  214. }
  215. this.parentNode.children.erase(this);
  216. }
  217. this.node.destroy();
  218. delete this;
  219. }
  220. });