tree-checkbox-list

Modal dialog with checkbox tree list

Tree checkbox list

Modal dialog with checkbox list in tree. Depends on jquery.

Changelog is in the bottom of this readme.

html:

<a href="#" id="myOpener">Open</a>

js:

$(function() {
 
    var Tree = require('tree-checkbox-list');
    var tree = new Tree($('#myOpener'), '/data.json', 'click');
 
    // ....
 
    var selected = tree.getSelection();
 
});

data.json:

{
    "first": {
        "title": "First item"
    },
    "second": {
        "title": "Second item",
        "items: {
            "second_first": {
                "title": "First item in second section"
            }
        }
    }
}

When you creating new instance of Tree object, you just have to set element, which will trigger open action of your tree. Second argument is optional and it is address of json with your data (loads with browser-http package). Of course you can set data directly into data property in your tree object.

tree.data = { /* my custom data object */ };

Third argument is name of event which triggers open action. Argument is also optional and default is click.

Method getSelection() returns items from data object which were selected.

If you want to send data via form, you can get just array with names.

var selected = tree.serialize();

Look for options in modal-dialog package.

This package can write summary of selected items into text input (max 3 items).

tree.setSummaryElement($('#summaryInput'));

Another option is set summary into div element. This will render ul list into it with list of selected items with Remove link.

  • 1.0.0
    • Initial version