Giter VIP home page Giter VIP logo

combo-tree's Introduction

1.3.1 Updates

  • Outsource libraries cancelled.
  • Refactoring JS and CSS.
  • Many bugs resolved on both UI and Functionality sides.

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.
  • selectAll: {true/false} | default: false | decide if use 'select all' feature.

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.
  • selectAll(): select all 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 Dataset

Three parameter are needed: id, title and subs (array).

Can contain the following options:

  • isSelectable: {true/false} | default: true | allows or disallows item to be selected

  • collapse: {true/false} | default: false | makes sub lists collapsed at start

    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

combo-tree's People

Contributors

erhanfirat avatar grishat avatar h3rb avatar iatanasov77 avatar jesusads avatar khalilbsaibes avatar kshepherd avatar modeverv avatar ngroesz avatar viktorsgolubevs avatar weanaschnitzl avatar yomiolatunji avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.