6fae502254a06f99282fc9d38875b48275814c0f.svn-base 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. $(function() {
  2. "use strict";
  3. $.widget('custom.cwTreeView', {
  4. options: {
  5. width: '100%',
  6. height: 'auto',
  7. maxDepth: 3,
  8. delegateDataSource: function(data, alterObj) {
  9. // return promise
  10. },
  11. onClickTreeItem: function(element, data) {
  12. },
  13. },
  14. _isLoading: false,
  15. _init: function() {
  16. this.selectedItem = null;
  17. },
  18. _create: function() {
  19. this.main = $('<div>', {
  20. 'class': 'cw-widget-content'
  21. });
  22. $(this.element).css( {
  23. width: this.options.width,
  24. height: this.options.height
  25. });
  26. this.main.appendTo(this.element);
  27. this._loadData({
  28. depth: 0,
  29. id: null,
  30. element: this.main
  31. });
  32. },
  33. reload: function(item) {
  34. this._reloadData(item);
  35. },
  36. reset: function(data) {
  37. if (data.children != null) {
  38. data.children.remove();
  39. }
  40. this._loadData(data);
  41. },
  42. _reloadData: function(data) {
  43. if (data.children != null) {
  44. data.children.remove();
  45. }
  46. this._loadData(data);
  47. },
  48. _loadData: function(data) {
  49. var self = this;
  50. if (self._isLoading) return;
  51. var alterObj = {
  52. Id: 'Id',
  53. Name: 'Name',
  54. IsFunction: true
  55. };
  56. var promise = this.options.delegateDataSource(data, alterObj);
  57. if (promise === null) {
  58. data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
  59. return;
  60. }
  61. self._isLoading = true;
  62. promise.always(function() {
  63. self._isLoading = false;
  64. });
  65. promise.done(function(array) {
  66. if (array === null || array.length === 0) {
  67. if (data.depth > 0) {
  68. data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
  69. }
  70. return;
  71. }
  72. var ul = $('<ul>');
  73. var li = $('<li>', {
  74. 'class': 'cw-tree-item-li'
  75. });
  76. var span = $('<span>', {
  77. // 'class': 'cw-tree-item-arrow-expand cw-icon-arrow-right',
  78. 'class': 'cw-icon-arrow-right',
  79. 'style': 'width: 17px; height: 16px; float: left; clear: both; margin-top: 3px;'
  80. });
  81. var div = $('<div>', {
  82. 'class': 'cw-rc-all cw-tree-item cw-item',
  83. 'style': 'display: inline-block'
  84. });
  85. var currentDepth = data.depth + 1;
  86. if (data.depth === 0) {
  87. ul.addClass('cw-tree-dropdown-root');
  88. }
  89. else {
  90. ul.addClass('cw-tree-dropdown');
  91. }
  92. $.each(array, function(i, item) {
  93. var cli = li.clone();
  94. var cdiv = div.clone();
  95. var cspan = span.clone();
  96. if (currentDepth < self.options.maxDepth) {
  97. self._on(cspan, {
  98. click: 'onToggleExpand'
  99. });
  100. }
  101. else {
  102. cspan.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
  103. }
  104. cli.data({
  105. parentData: data,
  106. depth: currentDepth,
  107. element: cli,
  108. div: cdiv,
  109. span: cspan,
  110. data: item
  111. });
  112. cdiv.text(alterObj.IsFunction ? item[alterObj.Name]() : item[alterObj.Name]);
  113. self._on(cdiv, {
  114. click: 'onItemClick',
  115. dblclick: 'onToggleExpand',
  116. mouseenter: 'onItemHoverIn',
  117. mouseleave: 'onItemHoverOut',
  118. });
  119. cli.append(cspan);
  120. cli.append(cdiv);
  121. ul.append(cli);
  122. });
  123. data.element.append(ul);
  124. data.children = ul;
  125. if (data.depth > 0) {
  126. data.span
  127. .removeClass('cw-icon-arrow-right')
  128. .addClass('cw-tree-item-arrow-expand cw-icon-arrow-down');
  129. }
  130. });
  131. },
  132. onItemHoverIn: function(event) {
  133. var self = $(event.delegateTarget).parent();
  134. var data = self.data();
  135. if (this.selectedItem === data) {
  136. return;
  137. }
  138. var classes = 'cw-tree-item-hover cw-fill-state-hover';
  139. if (data.div.hasClass(classes) === false) {
  140. data.div.addClass(classes);
  141. }
  142. },
  143. onItemHoverOut: function(event) {
  144. var self = $(event.delegateTarget).parent();
  145. var data = self.data();
  146. var classes = 'cw-tree-item-hover cw-fill-state-hover';
  147. if (data.div.hasClass(classes)) {
  148. data.div.removeClass(classes);
  149. }
  150. },
  151. onToggleExpand: function(event) {
  152. var self = $(event.delegateTarget).parent();
  153. var data = self.data();
  154. if (typeof data.span === 'undefined') return false;
  155. //if (typeof data.children === 'undefined') {
  156. // data.span.removeClass('cw-icon-arrow-down cw-icon-arrow-right')
  157. // return;
  158. //}
  159. if (data.span.hasClass('cw-icon-arrow-right')) {
  160. if (data.span.hasClass('cw-tree-item-arrow-expand') === false) {
  161. this._loadData(data);
  162. }
  163. else {
  164. data.span
  165. .removeClass('cw-icon-arrow-right')
  166. .addClass('cw-icon-arrow-down');
  167. data.children.css('display', '');
  168. }
  169. }
  170. else {
  171. if (typeof data.children !== 'undefined') {
  172. data.span
  173. .addClass('cw-icon-arrow-right')
  174. .removeClass('cw-icon-arrow-down');
  175. data.children.css('display', 'none');
  176. }
  177. }
  178. return false;
  179. },
  180. onItemClick: function(event) {
  181. if (this._isLoading) return false;
  182. var self = $(event.delegateTarget).parent();
  183. var data = self.data();
  184. if (this.selectedItem !== null) {
  185. this.selectedItem.element.removeAttr('treeitem-selected');
  186. this.selectedItem.div.removeClass('cw-fill-state-pressed cw-tree-item-selected');
  187. }
  188. data.element.attr('treeitem-selected', true);
  189. data.div.addClass('cw-fill-state-pressed cw-tree-item-selected');
  190. if (data.span.hasClass('cw-tree-item-arrow-expand') === false) {
  191. this._loadData(data);
  192. }
  193. this.options.onClickTreeItem(self, data);
  194. this.selectedItem = data;
  195. //console.log(self.text());
  196. },
  197. _refresh: function() {
  198. },
  199. _destroy: function() {
  200. },
  201. _setOptions: function(key, value) {
  202. this._super(key, value);
  203. },
  204. //_setOptions: function() {
  205. // this._superApply(arguments);
  206. // this._refresh();
  207. //},
  208. });
  209. });