Custom Tree v2 jQuery plugin
The other day I decided to go back to sawing one of my old Open Source project.
In the process of deliberation I decided that the previous component with the tree in its current form does not suit me anymore.
I wanted something more event driven, with a clear and simple API.
Now decided that it is already ready for Public.
')
Take, use .
Or look at example as part of GH-pages .
Under the cut a short translation of the brief API documentation.
UPD : in the comments my code for drag and drop organization.
It is executed as a jQuery plugin.
An example config, i.e. of what is transmitted when you "create" a tree:
As part of the code, a strict agreement on the parameters of the node that comes to Parsing \ Rendering is used, so I give an example of a single node (leaf):
Explanations {
handlers (leaf, controller, tree) - preset event handlers.
Everyone accepts the current node, controller, and tree object.
But beforeblur also accepts callback as the first parameter.
If you, for example, need to check whether the current node can be blur.
If "yes", then this callback must be called.
Otherwise, just do not call it, then blur will not happen.
If blur was to be produced, because it was necessary to focus on another node, then if you do not call this callback, neither the current nor focus blur will be produced.
Naturally, these callback manipulations for beforeblur will be possible only if you transmit to the config handler.beforeblur.
loader (path, callback) - what the controller will refer to for loading leaf.
Takes ['tree.root', 'leaf.name'] as the path.
Must return JS Object!
listeners are jQuery .on standards (callbacks for a text node element.
Ie, if, say, you need a contextmenu or a custom click, then you need to use listeners.
theme - CSS PREFIX_ for rendering classes
cls - a set of CSS classes when rendering:
html - HTML tags for rendering:
control - strings used for + \ -:
storeLoaded: true || false - save the “collapsed” nodes, or reboot each time
focusParentOnClose: true || false - select the parent element if its descendant had focus
focusByDblClick: true || false - double-click to select
blurFromContainerClick: true || false - blur when root is clicked
blurFromContainerDblClick: true || false - blur when double-clicking root
labelsBreak: - text caption of the node can be long, options for "trimming" if needed:
I hope that someone will find this useful.
In the process of deliberation I decided that the previous component with the tree in its current form does not suit me anymore.
I wanted something more event driven, with a clear and simple API.
Now decided that it is already ready for Public.
')
Take, use .
Or look at example as part of GH-pages .
Under the cut a short translation of the brief API documentation.
UPD : in the comments my code for drag and drop organization.
It is executed as a jQuery plugin.
An example config, i.e. of what is transmitted when you "create" a tree:
$('#tree_content').customTree({ root : 'top', init : { callback : function (controller, tree) { info('Init callback.'); } }, // for leaf callbacks handlers : { added : function (leaf, controller, tree) { }, loaded : function (leaf, controller, tree) { }, parsed : function (leaf, controller, tree) { }, open : function (leaf, controller, tree) { }, close : function (leaf, controller, tree) { }, hover : function (leaf, controller, tree) { }, unhover : function (leaf, controller, tree) { }, focus : function (leaf, controller, tree) { }, beforeblur : function (callback, leaf, controller, tree) { }, blur : function (leaf, controller, tree) { }, deleted : function (leaf, controller, tree) { }, dblclick : function (leaf, controller, tree) { } }, listeners : { // click, dblclick, contextmenu up the element Label contextmenu : function (leaf, controller, tree, event) { }, dblclick : function (leaf, controller, tree, event) { } }, storeLoaded : false, focusParentOnClose : true, // focusByDblClick: true, // blurFromContainerClick : false, // blurFromContainerDblClick : false, labelsBreak : { by : 50, expandOnHover : false, expandOnSelect : true }, loader : function (path, callback) { // ... your code for nodes loading } }); As part of the code, a strict agreement on the parameters of the node that comes to Parsing \ Rendering is used, so I give an example of a single node (leaf):
{ // – , 'unique_naming_string' : { // – , , text : 'string', // – , , leaf , folder : [true || false], // – , , "" open : [true || false] // , } } Explanations {
- root - the name for the root path of the node
- init - boot options
// , root init : { // null delay : null, // root // , preloader preloader : 'preloader', // function (controller, tree) callback : null, // jQuery , "" root method : 'fadeIn', // true (default), delay auto : true, // , focus focus : null } handlers (leaf, controller, tree) - preset event handlers.
Everyone accepts the current node, controller, and tree object.
But beforeblur also accepts callback as the first parameter.
If you, for example, need to check whether the current node can be blur.
If "yes", then this callback must be called.
Otherwise, just do not call it, then blur will not happen.
If blur was to be produced, because it was necessary to focus on another node, then if you do not call this callback, neither the current nor focus blur will be produced.
Naturally, these callback manipulations for beforeblur will be possible only if you transmit to the config handler.beforeblur.
loader (path, callback) - what the controller will refer to for loading leaf.
Takes ['tree.root', 'leaf.name'] as the path.
Must return JS Object!
listeners are jQuery .on standards (callbacks for a text node element.
Ie, if, say, you need a contextmenu or a custom click, then you need to use listeners.
theme - CSS PREFIX_ for rendering classes
cls - a set of CSS classes when rendering:
cls : { // root root : 'tree_root', // , control : 'tree_control', // , , "" status : 'tree_leaf_status', // text : 'tree_leaf_text', // "" folder : 'folder', // focus() selected : 'selected', // hover : 'hover', // loader : 'loader', // open : 'open', // container : 'container', // supressLabelTextSelection : 'unselectable', supressTreeTextSelection : 'unselectable' } html - HTML tags for rendering:
html : { // root container tree : '<UL>', // leaf container leaf : '<LI>', // , children children : '<UL>', // +\- status heading : '<DIV>', // +\- control : '<SPAN>', // , status : '<SPAN>', // , text : '<SPAN>', // container : '<DIV>' } control - strings used for + \ -:
control : { close : '+', open : '–' }, storeLoaded: true || false - save the “collapsed” nodes, or reboot each time
focusParentOnClose: true || false - select the parent element if its descendant had focus
focusByDblClick: true || false - double-click to select
blurFromContainerClick: true || false - blur when root is clicked
blurFromContainerDblClick: true || false - blur when double-clicking root
labelsBreak: - text caption of the node can be long, options for "trimming" if needed:
labelsBreak : { // by : 0, // str : '\n', // expandAlways : false, // , hover expandOnHover : false, // , focused expandOnSelect : true } Controller API
- getPath (leaf) - returns ARRAY URL for Leaf Object: ['top', 'leaf_name', 'child_name' ...]
- refresh (leaf, callback, andOpen) - reloads the transferred 'leaf',
'callback' is used on completion,
pass 'andOpen' if you need to expand the collapsed node - blur (leaf) - blur the leaf
- focus (leaf) - make focus a node
- x - current config
- x.current - the current selected node
- init - if config.init.auto == false, there will be a function to call the init tree
I hope that someone will find this useful.
Source: https://habr.com/ru/post/188778/
All Articles