Skip to content

ComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more.

License

Notifications You must be signed in to change notification settings

ronaaron/combo-tree

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

1.2.1 Updates

  • Filter is fixed & updated.
  • icontains.js dependency is deprecated.

ComboTree jQuery Plugin v 1.2.1

ComboTree is a jQuery Plugin which is a combobox item within tree structured data list and multiple/single selection options and more. It has been developed to manage large amount of choices in a combobox and multi selection feature.

Features:

  • Tree structured data list in combobox dropdown menu
  • Multiple & Single selection
  • Cascade selection (for multiple mode)
  • Returns selected item(s) as title or id array
  • Filtering (for multiple mode)
  • Consumes JSON source
  • Key controls are available for both selection and filter inputs.

Dependencies:

  • jQuery

Configurations:

  • isMultiple: {true/false} | default: false | decide if it is multiple selection behaviour or single
  • cascadeSelect: {true/false} | default: false | decide if parent selection should cascade to children in multiple selection
  • source: {JSON Data Array} | takes source of combobox dropdown menu as a JSON array.
  • selected: {JSON Data Array} | takes the list of ID's that corespond from the source.
  • collapse: {true/false} | default: false | makes sub lists collapsed.

Methods

  • getSelectedIds(): Returns selected item(s) id list as array or null. (i.e. [12, 5, 7], [7], null)
  • getSelectedNames(): Returns selected item(s) name list as array or null. (i.e. ["Piegon", "Cat", "Horse"], ["Lion"], null)
  • setSource(): You can initialize ComboTree then set source after your JSON data is retrieved.
  • clearSelection(): Clear selected items.
  • setSelection(selectionIdList): Set selected values of combotree by id array or single id parameter. If you want to clear previous selections please use clearSelection() before setSelection(). (i.e. ct1.setSelection([12, 5, 7]) | ct1.setSelection(5)

Events

  • onChange(callBackFunction): Triggers after selection changes.

Usage

There should be an input element to apply and a JSON Data source.

comboTree1 = $('#justAnInputBox').comboTree({
	source : SampleJSONData,
	isMultiple: true,
	cascadeSelect: true,
	selected: ['0']
});

// Array, One title/id, or False value return
var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();

// To remove plugin
comboTree1.destroy();

Source

Three parameter are needed: id, title and subs.

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
        subs: [
            {
                id: 10,
                title: 'Piegon'
            }, {
                id: 11,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }, {
        id: 2,
        title: 'Rabbit'
    }, {
        id: 3,
        title: 'Fox'
    }, {
        id: 5,
        title: 'Cats',
        subs: [
            {
                id: 50,
                title: 'Kitty'
            }, {
                id: 51,
                title: 'Bigs',
                subs: [
                    {
                        id: 510,
                        title: 'Cheetah'
                    }, {
                        id: 511,
                        title: 'Jaguar'
                    }, {
                        id: 512,
                        title: 'Leopard'
                    }
                ]
            }
        ]
    }, {
        id: 6,
        title: 'Fish'
    }
];

You can donate to support me

https://www.blockchain.com/btc/address/15c5AxBVgNxkwaHSTBZMiCV5PL41DKe88v

About

ComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.0%
  • HTML 13.2%
  • CSS 10.8%