[Original] jquery ListBox plugin (ListBox plug-in)

Reprinted please indicate the author (think8848) and the source (http://think8848.cnblogs.com ). Do not modify the content of this article without the consent of the author.

These two days the project will use functions similar to ListBox. I thought there were a lot of jquery plug-ins, but I didn't think it was actually easy to find. What should I do? Let's get it done by myself, so it took me one night to prepare one:

The ListBox plug-in supports drag-and-drop and multiple options.

Application description:

HTML:

 
<Ul id = "Left"> </ul>
 

Javascript:

 
$ ('# Left'). ListBox ({data:'/data/index? '+ New date (). gettime (), width: 200, height: 300 });
 

Default options:

Options:

DND: whether drag-and-drop is supported. The default value is false.

Dndscope: supports the related scopes during drag-and-drop. For example, if the dndscope values of a ListBox and B ListBox are the same, the elements in the two listboxes can be dragged and dropped.

Height: everyone on Earth knows that the default value is 'auto'

Width: The Martian knows. The default value is 'auto'

Data: data source, which can be a URL or an array of objects. The default value is [].

Both remote and local data are in two formats:

1. {value: '', text :''}

2. ['','']. In this case, place the value in the first element.

Multiselect: whether to allow multiple selections. The default value is false.

Ajaxsettings: If you need to obtain data remotely, the default $. Ajax option is defined here.

Default Value:

Type: 'get'

Datatype: 'json'

Success: funtion (data ){}

Events:

Delete version 1.1

Itemselected: The selected element in ListBox is triggered;

Definition: function (data) {}. The parameter data is the selected element array.

1.1 New Version

Selectchange: triggered when the selected element in The ListBox changes;

Definition: function (data) {}. The parameter data is the selected element array.

Methods:

Additem: add an element;

Definition: function (data) {}, where the data type is {value: '', text:''} or ['','']

Example:

 
$ ('# Btnadditem '). click (function () {$ ('# left '). listBox (). additem ({value: 3, text: 'C '});});
 

Addrange: add an element array;

Definition: function (data) {}, where the data type is an array consisting of {value: '', text:''} or ['','']

Example:

 
$ ('# Btnaddrange '). click (function () {$ ('# left '). listBox (). addrange ([{value: 4, text: 'D '}, ['5', 'E']);});
 

Clear: Clear all elements

Definition: function (){}

Example:

$ ('# Btnclear'). Click (function () {$ (' # left'). ListBox (). Clear ();});
 

Getdata: Get the data associated with the specified jquery object

Definition: function (a) {}, parameter A is the tag of The ListBox element, and the dom structure of the ListBox element is <li> <A> </a> </LI>

Example:

 
$ ('# Btngetdata '). click (function () {var A =$ ('# Left A: First'); if (. size ()> 0) {var data =$ ('# left '). listBox (). getdata (a); alert ("{value: '" + data. value + "', text:'" + data. text + "'}");}});
 

Getdatas: Get all data

Definition: function (){}

Example:

$ ('# Btngetdatas'). Click (function () {alert ($ ('# left'). ListBox (). getdatas (). Length );});
 

Getselected: Get all selected data

Definition: function (){}

Example:

 
$ ('# Btngetselected'). Click (function () {alert ($ (' # left'). ListBox (). getselected (). Length );});
 

1.1 New Version

Reload: Reload the data in ListBox

Definition: function (data, ajaxsettings) {}, parameter data, ajaxsettins defines the definition of data with the same name attribute in Options

Example:

$ ('# Btnreload '). click (function () {$ ('# left '). listBox (). reload ({data: '/data/Index', ajaxsettings: {data: {ID: 'A '}}});});
 

Removeitem: deletes the element of the specified value.

Definition: function (data) {}. The parameter data can be a single value or a {value: ''} object.

Example:

 
$ ('# Btnremoveitem'). Click (function () {$ ('# left'). ListBox (). removeitem ({value: 1 });});
 

Removerange: deletes the elements of the array with the specified value.

Definition: function (data) {}. The parameter data is a single value or an array of {value: ''} objects.

Example:

$ ('# Btnremoverange '). click (function () {var datas =$ ('# left '). listBox (). getdatas (); $ ('# left '). listBox (). removerange (datas );});
 

Setselection: select the element of the specified value

Definition: function (value) {}, parameter value is a single value

Example:

 
$ ('# Btnsetselection'). Click (function () {$ ('# left'). ListBox (). setselection (1 );});
 

You can also use $ ('# selector'). ListBox ('methodname', arguments) to call a method. For example:

$ ('# Btncallmethod '). click (function () {var A =$ ('# Left A: First'); if (. size ()> 0) {var data =$ ('# left '). listBox ('getdata', a); alert ("{value: '" + data. value + "', text:'" + data. text + "'}");}});
 

OK. Now my requirements are basically met. Let's do it first. You are welcome to submit bugs or improvement suggestions during the trial. Thank you.

Download source code and example (vs2010 ASP. net mvc 3)