$(function() { "use strict"; $.widget('custom.cwTreeView', { options: { width: '100%', height: 'auto', maxDepth: 3, delegateDataSource: function(data, alterObj) { // return promise }, onClickTreeItem: function(element, data) { }, }, _isLoading: false, _init: function() { this.selectedItem = null; }, _create: function() { this.main = $('<div>', { 'class': 'cw-widget-content' }); $(this.element).css( { width: this.options.width, height: this.options.height }); this.main.appendTo(this.element); this._loadData({ depth: 0, id: null, element: this.main }); }, reload: function(item) { this._reloadData(item); }, reset: function(data) { if (data.children != null) { data.children.remove(); } this._loadData(data); }, _reloadData: function(data) { if (data.children != null) { data.children.remove(); } this._loadData(data); }, _loadData: function(data) { var self = this; if (self._isLoading) return; var alterObj = { Id: 'Id', Name: 'Name', IsFunction: true }; var promise = this.options.delegateDataSource(data, alterObj); if (promise === null) { data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down'); return; } self._isLoading = true; promise.always(function() { self._isLoading = false; }); promise.done(function(array) { if (array === null || array.length === 0) { if (data.depth > 0) { data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down'); } return; } var ul = $('<ul>'); var li = $('<li>', { 'class': 'cw-tree-item-li' }); var span = $('<span>', { // 'class': 'cw-tree-item-arrow-expand cw-icon-arrow-right', 'class': 'cw-icon-arrow-right', 'style': 'width: 17px; height: 16px; float: left; clear: both; margin-top: 3px;' }); var div = $('<div>', { 'class': 'cw-rc-all cw-tree-item cw-item', 'style': 'display: inline-block' }); var currentDepth = data.depth + 1; if (data.depth === 0) { ul.addClass('cw-tree-dropdown-root'); } else { ul.addClass('cw-tree-dropdown'); } $.each(array, function(i, item) { var cli = li.clone(); var cdiv = div.clone(); var cspan = span.clone(); if (currentDepth < self.options.maxDepth) { self._on(cspan, { click: 'onToggleExpand' }); } else { cspan.removeClass('cw-icon-arrow-right cw-icon-arrow-down'); } cli.data({ parentData: data, depth: currentDepth, element: cli, div: cdiv, span: cspan, data: item }); cdiv.text(alterObj.IsFunction ? item[alterObj.Name]() : item[alterObj.Name]); self._on(cdiv, { click: 'onItemClick', dblclick: 'onToggleExpand', mouseenter: 'onItemHoverIn', mouseleave: 'onItemHoverOut', }); cli.append(cspan); cli.append(cdiv); ul.append(cli); }); data.element.append(ul); data.children = ul; if (data.depth > 0) { data.span .removeClass('cw-icon-arrow-right') .addClass('cw-tree-item-arrow-expand cw-icon-arrow-down'); } }); }, onItemHoverIn: function(event) { var self = $(event.delegateTarget).parent(); var data = self.data(); if (this.selectedItem === data) { return; } var classes = 'cw-tree-item-hover cw-fill-state-hover'; if (data.div.hasClass(classes) === false) { data.div.addClass(classes); } }, onItemHoverOut: function(event) { var self = $(event.delegateTarget).parent(); var data = self.data(); var classes = 'cw-tree-item-hover cw-fill-state-hover'; if (data.div.hasClass(classes)) { data.div.removeClass(classes); } }, onToggleExpand: function(event) { var self = $(event.delegateTarget).parent(); var data = self.data(); if (typeof data.span === 'undefined') return false; //if (typeof data.children === 'undefined') { // data.span.removeClass('cw-icon-arrow-down cw-icon-arrow-right') // return; //} if (data.span.hasClass('cw-icon-arrow-right')) { if (data.span.hasClass('cw-tree-item-arrow-expand') === false) { this._loadData(data); } else { data.span .removeClass('cw-icon-arrow-right') .addClass('cw-icon-arrow-down'); data.children.css('display', ''); } } else { if (typeof data.children !== 'undefined') { data.span .addClass('cw-icon-arrow-right') .removeClass('cw-icon-arrow-down'); data.children.css('display', 'none'); } } return false; }, onItemClick: function(event) { if (this._isLoading) return false; var self = $(event.delegateTarget).parent(); var data = self.data(); if (this.selectedItem !== null) { this.selectedItem.element.removeAttr('treeitem-selected'); this.selectedItem.div.removeClass('cw-fill-state-pressed cw-tree-item-selected'); } data.element.attr('treeitem-selected', true); data.div.addClass('cw-fill-state-pressed cw-tree-item-selected'); if (data.span.hasClass('cw-tree-item-arrow-expand') === false) { this._loadData(data); } this.options.onClickTreeItem(self, data); this.selectedItem = data; //console.log(self.text()); }, _refresh: function() { }, _destroy: function() { }, _setOptions: function(key, value) { this._super(key, value); }, //_setOptions: function() { // this._superApply(arguments); // this._refresh(); //}, }); });