tree-checkbox-list
v1.4.4
Published
[ABANDONED] Modal dialog with checkbox tree list
Downloads
22
Maintainers
Readme
Tree checkbox list
Modal dialog with checkbox list in tree. Depends on jquery.
Abandoned
Unfortunately I don't have any more time to maintain this repository :-(
Installation
$ npm install tree-checkbox-list
Usage
$(function() {
var Tree = require('tree-checkbox-list');
var tree = new Tree(window.jQuery);
tree.data = {
"first": {
"title": "First item"
},
"second": {
"title": "Second item",
"items": {
"second_first": {
"title": "First item in second section"
}
}
}
}
// ....
var selected = tree.getSelection();
});
Method getSelection()
returns items from data
object which were selected.
If you need to get selected items with their full paths (like in your data variable), just call getSelection
method with
true argument
var selected = tree.getSelection(true);
Default values
tree.defaults = [
'first', 'second_first'
];
Default values is just plain array with names of checked items.
Get array with names
If you want to send data via form, you can get just array with names.
var selected = tree.serialize();
// now you can pass this variable to JSON.stringify method and add it to input
Just like with getSection
method, here you can also get fully expanded object (not array) of selected items and their
parents.
var selected = tree.serialize(true);
You can automatize this by setting resultElement. It can be only text input and after every change, stringified array of names will be added into this input.
Also if you set this result element and it has got some value in it, tree-checkbox-list will parse it like JSON and pass it
into the defaults
value (see below).
tree.setResultElement($('#resultInput'));
When you need to automatically pass full results (with full paths) into result element, just call it with true as second argument.
tree.setResultElement($('#resultInput'), true);
Maximized results can be also set.
tree.setResultElement($('#resultInput'), false, false);
Change style
Look for options in modal-dialog package.
Render summary into text input
This package can write summary of selected items into text input (max 3 items).
tree.setSummaryElement($('#summaryInput'));
Advanced summary
Another option is set summary into div
element. This will render ul
list into it with list of selected items with
Remove
link.
Immediate rendering
Summary is rendered after tree-checkbox-list is open for the first time, but it will be probably better to render it
immediately. Just call method prepare
.
tree.prepare();
Example of modal dialog
Tests
$ npm test
Changelog
1.4.3 - 1.4.4
- Move under Carrooi organization
- Abandon project
1.4.2
- Little optimization
- Updated modules
1.4.0 - 1.4.1
- Added counter of selected items
- Some refactoring
- Added info with info about other selected items which are not visible (in searching)
1.3.0
- Added tests
- Many optimizations
getSelection
andserialize
method can return items with full paths- Summary in div element is rendered with full paths
- Max items in summary can be configured
- Result element can contain full results
1.2.0
- Default value from result element
- Removed dependency on some stupid opener
- Outputs are rendered in
prepare
method - Removed loading data via http
1.1.1
- Head title wrapped into span
1.1.0
- Added resultElement options
1.0.1
- Typo in readme
1.0.0
- Initial version