627 lines
21 KiB
JavaScript
627 lines
21 KiB
JavaScript
/*
|
|
* jQuery treegrid Plugin 0.3.0
|
|
* https://github.com/maxazan/jquery-treegrid
|
|
*
|
|
* Copyright 2013, Pomazan Max
|
|
* Licensed under the MIT licenses.
|
|
*/
|
|
(function($) {
|
|
|
|
var methods = {
|
|
/**
|
|
* Initialize tree
|
|
*
|
|
* @param {Object} options
|
|
* @returns {Object[]}
|
|
*/
|
|
initTree: function(options) {
|
|
var settings = $.extend({}, this.treegrid.defaults, options);
|
|
return this.each(function() {
|
|
var $this = $(this);
|
|
$this.treegrid('setTreeContainer', $(this));
|
|
$this.treegrid('setSettings', settings);
|
|
settings.getRootNodes.apply(this, [$(this)]).treegrid('initNode', settings);
|
|
$this.treegrid('getRootNodes').treegrid('render');
|
|
});
|
|
},
|
|
/**
|
|
* Initialize node
|
|
*
|
|
* @param {Object} settings
|
|
* @returns {Object[]}
|
|
*/
|
|
initNode: function(settings) {
|
|
return this.each(function() {
|
|
var $this = $(this);
|
|
$this.treegrid('setTreeContainer', settings.getTreeGridContainer.apply(this));
|
|
$this.treegrid('getChildNodes').treegrid('initNode', settings);
|
|
$this.treegrid('initExpander').treegrid('initIndent').treegrid('initEvents').treegrid('initState').treegrid('initChangeEvent').treegrid("initSettingsEvents");
|
|
});
|
|
},
|
|
initChangeEvent: function() {
|
|
var $this = $(this);
|
|
//Save state on change
|
|
$this.on("change", function() {
|
|
var $this = $(this);
|
|
$this.treegrid('render');
|
|
if ($this.treegrid('getSetting', 'saveState')) {
|
|
$this.treegrid('saveState');
|
|
}
|
|
});
|
|
return $this;
|
|
},
|
|
/**
|
|
* Initialize node events
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
initEvents: function() {
|
|
var $this = $(this);
|
|
//Default behavior on collapse
|
|
$this.on("collapse", function() {
|
|
var $this = $(this);
|
|
$this.removeClass('treegrid-expanded');
|
|
$this.addClass('treegrid-collapsed');
|
|
});
|
|
//Default behavior on expand
|
|
$this.on("expand", function() {
|
|
var $this = $(this);
|
|
$this.removeClass('treegrid-collapsed');
|
|
$this.addClass('treegrid-expanded');
|
|
});
|
|
|
|
return $this;
|
|
},
|
|
/**
|
|
* Initialize events from settings
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
initSettingsEvents: function() {
|
|
var $this = $(this);
|
|
//Save state on change
|
|
$this.on("change", function() {
|
|
var $this = $(this);
|
|
if (typeof($this.treegrid('getSetting', 'onChange')) === "function") {
|
|
$this.treegrid('getSetting', 'onChange').apply($this);
|
|
}
|
|
});
|
|
//Default behavior on collapse
|
|
$this.on("collapse", function() {
|
|
var $this = $(this);
|
|
if (typeof($this.treegrid('getSetting', 'onCollapse')) === "function") {
|
|
$this.treegrid('getSetting', 'onCollapse').apply($this);
|
|
}
|
|
});
|
|
//Default behavior on expand
|
|
$this.on("expand", function() {
|
|
var $this = $(this);
|
|
if (typeof($this.treegrid('getSetting', 'onExpand')) === "function") {
|
|
$this.treegrid('getSetting', 'onExpand').apply($this);
|
|
}
|
|
|
|
});
|
|
|
|
return $this;
|
|
},
|
|
/**
|
|
* Initialize expander for node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
initExpander: function() {
|
|
var $this = $(this);
|
|
var cell = $this.find('td').get($this.treegrid('getSetting', 'treeColumn'));
|
|
var tpl = $this.treegrid('getSetting', 'expanderTemplate');
|
|
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
|
|
if (expander) {
|
|
expander.remove();
|
|
}
|
|
$(tpl).prependTo(cell).click(function() {
|
|
$($(this).closest('tr')).treegrid('toggle');
|
|
});
|
|
return $this;
|
|
},
|
|
/**
|
|
* Initialize indent for node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
initIndent: function() {
|
|
var $this = $(this);
|
|
$this.find('.treegrid-indent').remove();
|
|
var tpl = $this.treegrid('getSetting', 'indentTemplate');
|
|
var expander = $this.find('.treegrid-expander');
|
|
var depth = $this.treegrid('getDepth');
|
|
for (var i = 0; i < depth; i++) {
|
|
$(tpl).insertBefore(expander);
|
|
}
|
|
return $this;
|
|
},
|
|
/**
|
|
* Initialise state of node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
initState: function() {
|
|
var $this = $(this);
|
|
if ($this.treegrid('getSetting', 'saveState') && !$this.treegrid('isFirstInit')) {
|
|
$this.treegrid('restoreState');
|
|
} else {
|
|
if ($this.treegrid('getSetting', 'initialState') === "expanded") {
|
|
$this.treegrid('expand');
|
|
} else {
|
|
$this.treegrid('collapse');
|
|
}
|
|
}
|
|
return $this;
|
|
},
|
|
/**
|
|
* Return true if this tree was never been initialised
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isFirstInit: function() {
|
|
var tree = $(this).treegrid('getTreeContainer');
|
|
if (tree.data('first_init') === undefined) {
|
|
tree.data('first_init', $.cookie(tree.treegrid('getSetting', 'saveStateName')) === undefined);
|
|
}
|
|
return tree.data('first_init');
|
|
},
|
|
/**
|
|
* Save state of current node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
saveState: function() {
|
|
var $this = $(this);
|
|
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
|
|
|
var stateArrayString = $.cookie($this.treegrid('getSetting', 'saveStateName')) || '';
|
|
var stateArray = (stateArrayString === '' ? [] : stateArrayString.split(','));
|
|
var nodeId = $this.treegrid('getNodeId');
|
|
|
|
if ($this.treegrid('isExpanded')) {
|
|
if ($.inArray(nodeId, stateArray) === -1) {
|
|
stateArray.push(nodeId);
|
|
}
|
|
} else if ($this.treegrid('isCollapsed')) {
|
|
if ($.inArray(nodeId, stateArray) !== -1) {
|
|
stateArray.splice($.inArray(nodeId, stateArray), 1);
|
|
}
|
|
}
|
|
$.cookie($this.treegrid('getSetting', 'saveStateName'), stateArray.join(','));
|
|
}
|
|
return $this;
|
|
},
|
|
/**
|
|
* Restore state of current node.
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
restoreState: function() {
|
|
var $this = $(this);
|
|
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
|
var stateArray = $.cookie($this.treegrid('getSetting', 'saveStateName')).split(',');
|
|
if ($.inArray($this.treegrid('getNodeId'), stateArray) !== -1) {
|
|
$this.treegrid('expand');
|
|
} else {
|
|
$this.treegrid('collapse');
|
|
}
|
|
|
|
}
|
|
return $this;
|
|
},
|
|
/**
|
|
* Method return setting by name
|
|
*
|
|
* @param {type} name
|
|
* @returns {unresolved}
|
|
*/
|
|
getSetting: function(name) {
|
|
if (!$(this).treegrid('getTreeContainer')) {
|
|
return null;
|
|
}
|
|
return $(this).treegrid('getTreeContainer').data('settings')[name];
|
|
},
|
|
/**
|
|
* Add new settings
|
|
*
|
|
* @param {Object} settings
|
|
*/
|
|
setSettings: function(settings) {
|
|
$(this).treegrid('getTreeContainer').data('settings', settings);
|
|
},
|
|
/**
|
|
* Return tree container
|
|
*
|
|
* @returns {HtmlElement}
|
|
*/
|
|
getTreeContainer: function() {
|
|
return $(this).data('treegrid');
|
|
},
|
|
/**
|
|
* Set tree container
|
|
*
|
|
* @param {HtmlE;ement} container
|
|
*/
|
|
setTreeContainer: function(container) {
|
|
return $(this).data('treegrid', container);
|
|
},
|
|
/**
|
|
* Method return all root nodes of tree.
|
|
*
|
|
* Start init all child nodes from it.
|
|
*
|
|
* @returns {Array}
|
|
*/
|
|
getRootNodes: function() {
|
|
return $(this).treegrid('getSetting', 'getRootNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
|
},
|
|
/**
|
|
* Method return all nodes of tree.
|
|
*
|
|
* @returns {Array}
|
|
*/
|
|
getAllNodes: function() {
|
|
return $(this).treegrid('getSetting', 'getAllNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
|
},
|
|
/**
|
|
* Mthod return true if element is Node
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
isNode: function() {
|
|
return $(this).treegrid('getNodeId') !== null;
|
|
},
|
|
/**
|
|
* Mthod return id of node
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
getNodeId: function() {
|
|
if ($(this).treegrid('getSetting', 'getNodeId') === null) {
|
|
return null;
|
|
} else {
|
|
return $(this).treegrid('getSetting', 'getNodeId').apply(this);
|
|
}
|
|
},
|
|
/**
|
|
* Method return parent id of node or null if root node
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
getParentNodeId: function() {
|
|
return $(this).treegrid('getSetting', 'getParentNodeId').apply(this);
|
|
},
|
|
/**
|
|
* Method return parent node or null if root node
|
|
*
|
|
* @returns {Object[]}
|
|
*/
|
|
getParentNode: function() {
|
|
if ($(this).treegrid('getParentNodeId') === null) {
|
|
return null;
|
|
} else {
|
|
return $(this).treegrid('getSetting', 'getNodeById').apply(this, [$(this).treegrid('getParentNodeId'), $(this).treegrid('getTreeContainer')]);
|
|
}
|
|
},
|
|
/**
|
|
* Method return array of child nodes or null if node is leaf
|
|
*
|
|
* @returns {Object[]}
|
|
*/
|
|
getChildNodes: function() {
|
|
return $(this).treegrid('getSetting', 'getChildNodes').apply(this, [$(this).treegrid('getNodeId'), $(this).treegrid('getTreeContainer')]);
|
|
},
|
|
/**
|
|
* Method return depth of tree.
|
|
*
|
|
* This method is needs for calculate indent
|
|
*
|
|
* @returns {Number}
|
|
*/
|
|
getDepth: function() {
|
|
if ($(this).treegrid('getParentNode') === null) {
|
|
return 0;
|
|
}
|
|
return $(this).treegrid('getParentNode').treegrid('getDepth') + 1;
|
|
},
|
|
/**
|
|
* Method return true if node is root
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isRoot: function() {
|
|
return $(this).treegrid('getDepth') === 0;
|
|
},
|
|
/**
|
|
* Method return true if node has no child nodes
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isLeaf: function() {
|
|
return $(this).treegrid('getChildNodes').length === 0;
|
|
},
|
|
/**
|
|
* Method return true if node last in branch
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isLast: function() {
|
|
if ($(this).treegrid('isNode')) {
|
|
var parentNode = $(this).treegrid('getParentNode');
|
|
if (parentNode === null) {
|
|
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').last().treegrid('getNodeId')) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').last().treegrid('getNodeId')) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
/**
|
|
* Method return true if node first in branch
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isFirst: function() {
|
|
if ($(this).treegrid('isNode')) {
|
|
var parentNode = $(this).treegrid('getParentNode');
|
|
if (parentNode === null) {
|
|
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').first().treegrid('getNodeId')) {
|
|
return true;
|
|
}
|
|
} else {
|
|
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').first().treegrid('getNodeId')) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
/**
|
|
* Return true if node expanded
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isExpanded: function() {
|
|
return $(this).hasClass('treegrid-expanded');
|
|
},
|
|
/**
|
|
* Return true if node collapsed
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isCollapsed: function() {
|
|
return $(this).hasClass('treegrid-collapsed');
|
|
},
|
|
/**
|
|
* Return true if at least one of parent node is collapsed
|
|
*
|
|
* @returns {Boolean}
|
|
*/
|
|
isOneOfParentsCollapsed: function() {
|
|
var $this = $(this);
|
|
if ($this.treegrid('isRoot')) {
|
|
return false;
|
|
} else {
|
|
if ($this.treegrid('getParentNode').treegrid('isCollapsed')) {
|
|
return true;
|
|
} else {
|
|
return $this.treegrid('getParentNode').treegrid('isOneOfParentsCollapsed');
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* Expand node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
expand: function() {
|
|
if (!this.treegrid('isLeaf') && !this.treegrid("isExpanded")) {
|
|
this.trigger("expand");
|
|
this.trigger("change");
|
|
return this;
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* Expand all nodes
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
expandAll: function() {
|
|
var $this = $(this);
|
|
$this.treegrid('getRootNodes').treegrid('expandRecursive');
|
|
return $this;
|
|
},
|
|
/**
|
|
* Expand current node and all child nodes begin from current
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
expandRecursive: function() {
|
|
return $(this).each(function() {
|
|
var $this = $(this);
|
|
$this.treegrid('expand');
|
|
if (!$this.treegrid('isLeaf')) {
|
|
$this.treegrid('getChildNodes').treegrid('expandRecursive');
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* Collapse node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
collapse: function() {
|
|
return $(this).each(function() {
|
|
var $this = $(this);
|
|
if (!$this.treegrid('isLeaf') && !$this.treegrid("isCollapsed")) {
|
|
$this.trigger("collapse");
|
|
$this.trigger("change");
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* Collapse all nodes
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
collapseAll: function() {
|
|
var $this = $(this);
|
|
$this.treegrid('getRootNodes').treegrid('collapseRecursive');
|
|
return $this;
|
|
},
|
|
/**
|
|
* Collapse current node and all child nodes begin from current
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
collapseRecursive: function() {
|
|
return $(this).each(function() {
|
|
var $this = $(this);
|
|
$this.treegrid('collapse');
|
|
if (!$this.treegrid('isLeaf')) {
|
|
$this.treegrid('getChildNodes').treegrid('collapseRecursive');
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* Expand if collapsed, Collapse if expanded
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
toggle: function() {
|
|
var $this = $(this);
|
|
if ($this.treegrid('isExpanded')) {
|
|
$this.treegrid('collapse');
|
|
} else {
|
|
$this.treegrid('expand');
|
|
}
|
|
return $this;
|
|
},
|
|
/**
|
|
* Rendering node
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
render: function() {
|
|
return $(this).each(function() {
|
|
var $this = $(this);
|
|
//if parent colapsed we hidden
|
|
if ($this.treegrid('isOneOfParentsCollapsed')) {
|
|
$this.hide();
|
|
} else {
|
|
$this.show();
|
|
}
|
|
if (!$this.treegrid('isLeaf')) {
|
|
$this.treegrid('renderExpander');
|
|
$this.treegrid('getChildNodes').treegrid('render');
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* Rendering expander depends on node state
|
|
*
|
|
* @returns {Node}
|
|
*/
|
|
renderExpander: function() {
|
|
return $(this).each(function() {
|
|
var $this = $(this);
|
|
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
|
|
if (expander) {
|
|
|
|
if (!$this.treegrid('isCollapsed')) {
|
|
expander.removeClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
|
expander.addClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
|
} else {
|
|
expander.removeClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
|
expander.addClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
|
}
|
|
} else {
|
|
$this.treegrid('initExpander');
|
|
$this.treegrid('renderExpander');
|
|
}
|
|
});
|
|
}
|
|
};
|
|
$.fn.treegrid = function(method) {
|
|
if (methods[method]) {
|
|
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
} else if (typeof method === 'object' || !method) {
|
|
return methods.initTree.apply(this, arguments);
|
|
} else {
|
|
$.error('Method with name ' + method + ' does not exists for jQuery.treegrid');
|
|
}
|
|
};
|
|
/**
|
|
* Plugin's default options
|
|
*/
|
|
$.fn.treegrid.defaults = {
|
|
initialState: 'expanded',
|
|
saveState: false,
|
|
saveStateMethod: 'cookie',
|
|
saveStateName: 'tree-grid-state',
|
|
expanderTemplate: '<span class="treegrid-expander"></span>',
|
|
indentTemplate: '<span class="treegrid-indent"></span>',
|
|
expanderExpandedClass: 'treegrid-expander-expanded',
|
|
expanderCollapsedClass: 'treegrid-expander-collapsed',
|
|
treeColumn: 0,
|
|
getExpander: function() {
|
|
return $(this).find('.treegrid-expander');
|
|
},
|
|
getNodeId: function() {
|
|
var template = /treegrid-([A-Za-z0-9_-]+)/;
|
|
if (template.test($(this).attr('class'))) {
|
|
return template.exec($(this).attr('class'))[1];
|
|
}
|
|
return null;
|
|
},
|
|
getParentNodeId: function() {
|
|
var template = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
|
if (template.test($(this).attr('class'))) {
|
|
return template.exec($(this).attr('class'))[1];
|
|
}
|
|
return null;
|
|
},
|
|
getNodeById: function(id, treegridContainer) {
|
|
var templateClass = "treegrid-" + id;
|
|
return treegridContainer.find('tr.' + templateClass);
|
|
},
|
|
getChildNodes: function(id, treegridContainer) {
|
|
var templateClass = "treegrid-parent-" + id;
|
|
return treegridContainer.find('tr.' + templateClass);
|
|
},
|
|
getTreeGridContainer: function() {
|
|
return $(this).closest('table');
|
|
},
|
|
getRootNodes: function(treegridContainer) {
|
|
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
|
var classNames = $(element).attr('class');
|
|
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
|
var templateParentClass = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
|
return templateClass.test(classNames) && !templateParentClass.test(classNames);
|
|
});
|
|
return $(result);
|
|
},
|
|
getAllNodes: function(treegridContainer) {
|
|
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
|
var classNames = $(element).attr('class');
|
|
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
|
return templateClass.test(classNames);
|
|
});
|
|
return $(result);
|
|
},
|
|
//Events
|
|
onCollapse: null,
|
|
onExpand: null,
|
|
onChange: null
|
|
|
|
};
|
|
})(jQuery);
|