123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261 |
- $(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();
- //},
- });
- });
|