jqListbox
A jQuery plugin to create a listbox that works as you want.
With this jQuery plugin you can create a listbox which can contain an array of almost any kind of item: string, Number, Object, etc. You can define your own render and encoder functions. Insert, multi insert, move up and down is supported out of the box - and much more!
Check out the GitHub Repository!
Read the manual
Features
- internally stores an array of your items
- wire up your own render function for the items
- wire up your own encoder function (for example use
JSON.stringifyto post in a hidden input) - custom before... and after... callbacks are supported for inserting, updating, deleting, clearing, etc.
- implement your own insert, update and remove logic: show dialogs, ask for confirmation, etc.
-
transfermethods to copy or move elements between two jqListbox'es (from v1.1)
- CRUD methods are included by default
- multi insert, multi update methods
- move up and down logic is included by default
- allow or block operations via custom callbacks
- separate your store and display logic
- unit tested (70+ unit tests, 190+ assertions, 97%+ coverage) and linted
Example: Core functionality
This is a very simple example using a div with some CSS to display our scrollable list.
The list contains Objects but only the title field is displayed.
This example uses the build in JSON.stringify() encoder to transform the list to a JSON
string in the textarea field.
There are several ways to do things in jqListbox. For example updating multiple (selected) items: you can update all of the selected items with the same data or you can update each selected items with different data.
Example: Custom item renderer
This example is using the itemRenderer option in a creative way. As you can see you can
really render your items as you want!
Also this one is using a custom select render method - not the built in (automatic)
selectedClass!
The first example is using Bootstrap's Modal for asking for user input, but the second one just throws simple JS prompt boxes. With jqListbox it's up to you how to do things, how to interact with the user.
Example: Dual listbox
This example is using the transferSelectedTo method to move the selected elements between the
listboxes. For this setup both listboxes should contain the same type of elements. There are two other methods
available: transferByIndexTo and transferByIndexMultiTo methods.
Example: Custom item encoder
This example is using the listboxValueEncoder option to transform the items to the
needed target value. This target value can be posted in a hidden input for example.
Also we are using multiUpdate here. With multiUpdate you can update all of
the selected elements with different data.
We are using the onBeforeItemInsert callback to limit the number of elements to
10.