diff --git a/.gitignore b/.gitignore index 435cf9a..26dd205 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ /nbproject /node_modules -/bower_modules \ No newline at end of file +/bower_modules +/.idea/ diff --git a/examples/example-events.html b/examples/example-events.html index e31ea54..d76e60c 100644 --- a/examples/example-events.html +++ b/examples/example-events.html @@ -22,7 +22,11 @@ }, onExpand: function() { alert("Expanded: " + $(this).attr("id")); - }}); + }, + onClick: function(node_id) { + alert("You clicked on " + node_id); + } + }); $('#node-1').on("change", function() { alert("Event from " + $(this).attr("id")); }); @@ -73,7 +77,7 @@

TreeGrid events exam Node 1-2-1Additional info - +

Code

@@ -95,16 +99,16 @@

Code

$('.tree').treegrid({ onChange: function() { alert("Changed: "+$(this).attr("id")); - }, + }, onCollapse: function() { alert("Collapsed: "+$(this).attr("id")); - }, + }, onExpand: function() { alert("Expanded "+$(this).attr("id")); }}); $('#node-1').on("change", function() { alert("Event from " + $(this).attr("id")); - }); + }); }); </script> @@ -124,7 +128,7 @@

Code

<tr class="treegrid-4 treegrid-parent-3"> <td>Node 1-2-1</td><td>Additional info</td> </tr> - </table> + </table> </body> </html> @@ -152,4 +156,4 @@

Code

} - \ No newline at end of file + diff --git a/js/jquery.treegrid.js b/js/jquery.treegrid.js index f605f13..e385675 100644 --- a/js/jquery.treegrid.js +++ b/js/jquery.treegrid.js @@ -5,7 +5,7 @@ * Copyright 2013, Pomazan Max * Licensed under the MIT licenses. */ -(function($) { +(function ($) { var methods = { /** @@ -14,9 +14,9 @@ * @param {Object} options * @returns {Object[]} */ - initTree: function(options) { + initTree: function (options) { var settings = $.extend({}, this.treegrid.defaults, options); - return this.each(function() { + return this.each(function () { var $this = $(this); $this.treegrid('setTreeContainer', $(this)); $this.treegrid('setSettings', settings); @@ -30,18 +30,18 @@ * @param {Object} settings * @returns {Object[]} */ - initNode: function(settings) { - return this.each(function() { + 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() { + initChangeEvent: function () { var $this = $(this); //Save state on change - $this.on("change", function() { + $this.on("change", function () { var $this = $(this); $this.treegrid('render'); if ($this.treegrid('getSetting', 'saveState')) { @@ -55,16 +55,16 @@ * * @returns {Node} */ - initEvents: function() { + initEvents: function () { var $this = $(this); //Default behavior on collapse - $this.on("collapse", function() { + $this.on("collapse", function () { var $this = $(this); $this.removeClass('treegrid-expanded'); $this.addClass('treegrid-collapsed'); }); //Default behavior on expand - $this.on("expand", function() { + $this.on("expand", function () { var $this = $(this); $this.removeClass('treegrid-collapsed'); $this.addClass('treegrid-expanded'); @@ -77,24 +77,45 @@ * * @returns {Node} */ - initSettingsEvents: function() { + initSettingsEvents: function () { var $this = $(this); //Save state on change - $this.on("change", function() { + $this.on("change", function () { var $this = $(this); if (typeof($this.treegrid('getSetting', 'onChange')) === "function") { $this.treegrid('getSetting', 'onChange').apply($this); } }); + + try { + if (typeof($this.treegrid('getSetting', 'onClick')) === "function") { + var allNodes = $(this).treegrid('getSetting', 'getAllNodes').apply(this, [$(this).treegrid('getTreeContainer')]); + var $tree_this = $(this); + if (allNodes) { + for (var idx in allNodes) { + //$(oneNode).on("click", function () { + allNodes[idx].onclick = function () { + if (typeof($tree_this.treegrid('getSetting', 'onClick')) === "function") { + $tree_this.treegrid('getSetting', 'onClick').apply($tree_this, [$(this).attr("id")]); + } + }; + // ); + } + } + } + } catch (e) { + + } + //Default behavior on collapse - $this.on("collapse", function() { + $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() { + $this.on("expand", function () { var $this = $(this); if (typeof($this.treegrid('getSetting', 'onExpand')) === "function") { $this.treegrid('getSetting', 'onExpand').apply($this); @@ -109,7 +130,7 @@ * * @returns {Node} */ - initExpander: function() { + initExpander: function () { var $this = $(this); var cell = $this.find('td').get($this.treegrid('getSetting', 'treeColumn')); var tpl = $this.treegrid('getSetting', 'expanderTemplate'); @@ -117,7 +138,7 @@ if (expander) { expander.remove(); } - $(tpl).prependTo(cell).click(function() { + $(tpl).prependTo(cell).click(function () { $($(this).closest('tr')).treegrid('toggle'); }); return $this; @@ -127,7 +148,7 @@ * * @returns {Node} */ - initIndent: function() { + initIndent: function () { var $this = $(this); $this.find('.treegrid-indent').remove(); var tpl = $this.treegrid('getSetting', 'indentTemplate'); @@ -143,7 +164,7 @@ * * @returns {Node} */ - initState: function() { + initState: function () { var $this = $(this); if ($this.treegrid('getSetting', 'saveState') && !$this.treegrid('isFirstInit')) { $this.treegrid('restoreState'); @@ -161,7 +182,7 @@ * * @returns {Boolean} */ - isFirstInit: function() { + isFirstInit: function () { var tree = $(this).treegrid('getTreeContainer'); if (tree.data('first_init') === undefined) { tree.data('first_init', $.cookie(tree.treegrid('getSetting', 'saveStateName')) === undefined); @@ -173,7 +194,7 @@ * * @returns {Node} */ - saveState: function() { + saveState: function () { var $this = $(this); if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') { @@ -199,7 +220,7 @@ * * @returns {Node} */ - restoreState: function() { + restoreState: function () { var $this = $(this); if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') { var stateArray = $.cookie($this.treegrid('getSetting', 'saveStateName')).split(','); @@ -218,7 +239,7 @@ * @param {type} name * @returns {unresolved} */ - getSetting: function(name) { + getSetting: function (name) { if (!$(this).treegrid('getTreeContainer')) { return null; } @@ -229,7 +250,7 @@ * * @param {Object} settings */ - setSettings: function(settings) { + setSettings: function (settings) { $(this).treegrid('getTreeContainer').data('settings', settings); }, /** @@ -237,7 +258,7 @@ * * @returns {HtmlElement} */ - getTreeContainer: function() { + getTreeContainer: function () { return $(this).data('treegrid'); }, /** @@ -245,7 +266,7 @@ * * @param {HtmlE;ement} container */ - setTreeContainer: function(container) { + setTreeContainer: function (container) { return $(this).data('treegrid', container); }, /** @@ -255,7 +276,7 @@ * * @returns {Array} */ - getRootNodes: function() { + getRootNodes: function () { return $(this).treegrid('getSetting', 'getRootNodes').apply(this, [$(this).treegrid('getTreeContainer')]); }, /** @@ -263,7 +284,7 @@ * * @returns {Array} */ - getAllNodes: function() { + getAllNodes: function () { return $(this).treegrid('getSetting', 'getAllNodes').apply(this, [$(this).treegrid('getTreeContainer')]); }, /** @@ -271,7 +292,7 @@ * * @returns {String} */ - isNode: function() { + isNode: function () { return $(this).treegrid('getNodeId') !== null; }, /** @@ -279,7 +300,7 @@ * * @returns {String} */ - getNodeId: function() { + getNodeId: function () { if ($(this).treegrid('getSetting', 'getNodeId') === null) { return null; } else { @@ -291,7 +312,7 @@ * * @returns {String} */ - getParentNodeId: function() { + getParentNodeId: function () { return $(this).treegrid('getSetting', 'getParentNodeId').apply(this); }, /** @@ -299,7 +320,7 @@ * * @returns {Object[]} */ - getParentNode: function() { + getParentNode: function () { if ($(this).treegrid('getParentNodeId') === null) { return null; } else { @@ -311,7 +332,7 @@ * * @returns {Object[]} */ - getChildNodes: function() { + getChildNodes: function () { return $(this).treegrid('getSetting', 'getChildNodes').apply(this, [$(this).treegrid('getNodeId'), $(this).treegrid('getTreeContainer')]); }, /** @@ -321,7 +342,7 @@ * * @returns {Number} */ - getDepth: function() { + getDepth: function () { if ($(this).treegrid('getParentNode') === null) { return 0; } @@ -332,7 +353,7 @@ * * @returns {Boolean} */ - isRoot: function() { + isRoot: function () { return $(this).treegrid('getDepth') === 0; }, /** @@ -340,7 +361,7 @@ * * @returns {Boolean} */ - isLeaf: function() { + isLeaf: function () { return $(this).treegrid('getChildNodes').length === 0; }, /** @@ -348,7 +369,7 @@ * * @returns {Boolean} */ - isLast: function() { + isLast: function () { if ($(this).treegrid('isNode')) { var parentNode = $(this).treegrid('getParentNode'); if (parentNode === null) { @@ -368,7 +389,7 @@ * * @returns {Boolean} */ - isFirst: function() { + isFirst: function () { if ($(this).treegrid('isNode')) { var parentNode = $(this).treegrid('getParentNode'); if (parentNode === null) { @@ -388,7 +409,7 @@ * * @returns {Boolean} */ - isExpanded: function() { + isExpanded: function () { return $(this).hasClass('treegrid-expanded'); }, /** @@ -396,7 +417,7 @@ * * @returns {Boolean} */ - isCollapsed: function() { + isCollapsed: function () { return $(this).hasClass('treegrid-collapsed'); }, /** @@ -404,7 +425,7 @@ * * @returns {Boolean} */ - isOneOfParentsCollapsed: function() { + isOneOfParentsCollapsed: function () { var $this = $(this); if ($this.treegrid('isRoot')) { return false; @@ -421,7 +442,7 @@ * * @returns {Node} */ - expand: function() { + expand: function () { if (!this.treegrid('isLeaf') && !this.treegrid("isExpanded")) { this.trigger("expand"); this.trigger("change"); @@ -434,7 +455,7 @@ * * @returns {Node} */ - expandAll: function() { + expandAll: function () { var $this = $(this); $this.treegrid('getRootNodes').treegrid('expandRecursive'); return $this; @@ -444,8 +465,8 @@ * * @returns {Node} */ - expandRecursive: function() { - return $(this).each(function() { + expandRecursive: function () { + return $(this).each(function () { var $this = $(this); $this.treegrid('expand'); if (!$this.treegrid('isLeaf')) { @@ -458,8 +479,8 @@ * * @returns {Node} */ - collapse: function() { - return $(this).each(function() { + collapse: function () { + return $(this).each(function () { var $this = $(this); if (!$this.treegrid('isLeaf') && !$this.treegrid("isCollapsed")) { $this.trigger("collapse"); @@ -472,7 +493,7 @@ * * @returns {Node} */ - collapseAll: function() { + collapseAll: function () { var $this = $(this); $this.treegrid('getRootNodes').treegrid('collapseRecursive'); return $this; @@ -482,8 +503,8 @@ * * @returns {Node} */ - collapseRecursive: function() { - return $(this).each(function() { + collapseRecursive: function () { + return $(this).each(function () { var $this = $(this); $this.treegrid('collapse'); if (!$this.treegrid('isLeaf')) { @@ -496,7 +517,7 @@ * * @returns {Node} */ - toggle: function() { + toggle: function () { var $this = $(this); if ($this.treegrid('isExpanded')) { $this.treegrid('collapse'); @@ -510,8 +531,8 @@ * * @returns {Node} */ - render: function() { - return $(this).each(function() { + render: function () { + return $(this).each(function () { var $this = $(this); //if parent colapsed we hidden if ($this.treegrid('isOneOfParentsCollapsed')) { @@ -530,8 +551,8 @@ * * @returns {Node} */ - renderExpander: function() { - return $(this).each(function() { + renderExpander: function () { + return $(this).each(function () { var $this = $(this); var expander = $this.treegrid('getSetting', 'getExpander').apply(this); if (expander) { @@ -550,7 +571,7 @@ }); } }; - $.fn.treegrid = function(method) { + $.fn.treegrid = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { @@ -572,36 +593,36 @@ expanderExpandedClass: 'treegrid-expander-expanded', expanderCollapsedClass: 'treegrid-expander-collapsed', treeColumn: 0, - getExpander: function() { + getExpander: function () { return $(this).find('.treegrid-expander'); }, - getNodeId: function() { + 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() { + 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) { + getNodeById: function (id, treegridContainer) { var templateClass = "treegrid-" + id; return treegridContainer.find('tr.' + templateClass); }, - getChildNodes: function(id, treegridContainer) { + getChildNodes: function (id, treegridContainer) { var templateClass = "treegrid-parent-" + id; return treegridContainer.find('tr.' + templateClass); }, - getTreeGridContainer: function() { + getTreeGridContainer: function () { return $(this).closest('table'); }, - getRootNodes: function(treegridContainer) { - var result = $.grep(treegridContainer.find('tr'), function(element) { + 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_-]+)/; @@ -609,8 +630,8 @@ }); return $(result); }, - getAllNodes: function(treegridContainer) { - var result = $.grep(treegridContainer.find('tr'), function(element) { + 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); @@ -620,7 +641,8 @@ //Events onCollapse: null, onExpand: null, - onChange: null + onChange: null, + onClick: null }; })(jQuery);