ComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more. It has been developed to manage large amount of choices and multi selection property.
##Features:
- Tree structured data list in combobox dropdown menu
- Multi/Single selection optional
- It returns selection(s) data as Title/Id array
- Filtering
- JSON Data source
- Key Controls
##Dependencies:
- jQuery
- icontains.js (filtering. It can be found in repository)
##Configurations:
- isMultiple: {True/False} | decide if it is multiple selection behaviour or single
- source: {JSON Data Array} | takes source of combobox dropdown menu as a JSON array.
##Usage
There should be an input element to apply and a JSON Data source.
comboTree1 = $('#justAnInputBox').comboTree({
source : SampleJSONData,
isMultiple: true
});
// Array, One title/id, or False value return
var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();
// To remove plugin
comboTree1.destroy();
##Sample JSON DATA
Three parameter are needed: id, title and subs.
var SampleJSONData = [
{
id: 0,
title: 'choice 1 '
}, {
id: 1,
title: 'choice 2',
subs: [
{
id: 10,
title: 'choice 2 1'
}, {
id: 11,
title: 'choice 2 2'
}, {
id: 12,
title: 'choice 2 3'
}
]
}, {
id: 2,
title: 'choice 3'
}, {
id: 3,
title: 'choice 4'
}, {
id: 4,
title: 'choice 5'
}, {
id: 5,
title: 'choice 6',
subs: [
{
id: 50,
title: 'choice 6 1'
}, {
id: 51,
title: 'choice 6 2',
subs: [
{
id: 510,
title: 'choice 6 2 1'
}, {
id: 511,
title: 'choice 6 2 2'
}, {
id: 512,
title: 'choice 6 2 3'
}
]
}
]
}, {
id: 6,
title: 'choice 7'
}
];
##User Friendly
Key controls, well designed and esasy-read code structure, definitions and clear variable names are choosen to be read and used as much as comfortable I could.