[转]jQuery ListBox Plugin(ListBox插件)

转载

mb5fdb131956bf3 2017-10-17 15:49:00

文章标签 数组数据 ajax javascript asp.net 文章分类 代码人生

这两天项目中要用到类似于ListBox的功能了，本以为有很多jQuery插件，没有想到的是，居然没有搜到好用的，咋办呢，自已动手丰衣足食吧，于是花了一个晚上的时间做出来一个，上效果图：

[转]jQuery ListBox Plugin(ListBox插件)_数组

该ListBox插件支持拖放，多选。

应用说明:

HTML:

`<``ul` `id="left"></``ul``>`

Javascript:

`$(``'#left'``).listbox({` `data:` `'/Data/Index?'` `+` `new` `Date().getTime(),` `width: 200,` `height: 300` `});`

默认选项说明:

Options:

　　dnd: 是否支持拖放，默认false

　　dndscope: 支持拖放时相关的作用域，举例来说，即，A ListBox和B ListBox的dndscope相同，则这两个ListBox中的元素是可以相互拖放的

　　height: 地球人都知道，默认'auto'

　　width: 火星人也知道了，默认'auto'

　　data: 数据源，即可以是url也可以是对象数组，默认为[]；

　　　　无论是远程还是本地数据均有两种格式：

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

　　　　2. ['', '']，在这种情况下，请将value置于第一个元素

　　multiselect: 是否允许多选，默认false

　　ajaxsettings: 如果需要从远程获取数据，这里定义了$.ajax的默认选项

　　　　默认:

　　　　type: 'GET'

　　　　dataType: 'json'

　　　　success: funtion(data){}

Events:

　　2011.9.30 1.1版删除

　　itemselected: ListBox中的元素选中的被触发；

　　　　定义：function(data){}，参数data为选中的元素数组

　　2011.9.30 1.1版新增

　　selectchange: ListBox中的元素选中项发生变化时被触发；

　　　　定义：function(data){}，参数data为选中的元素数组

Methods:

　　addItem: 添加一个元素；

　　　　定义：function(data){}，其中data类型为{value: '', text: ''}或['', '']

　　　　示例：　　　　

`$(``'#btnAddItem'``).click(``function` `() {` `$(``'#left'``).listbox().addItem({ value: 3, text:` `'c'` `});` `});`

　　addRange: 添加元素数组;

　　　　定义：function(data){}，其中data类型为由{value: '', text: ''}或['', '']组成的数组

　　　　示例:　　

`$(``'#btnAddRange'``).click(``function` `() {` `$(``'#left'``).listbox().addRange([{ value: 4, text:` `'d'` `}, [``'5'``,` `'e'``]]);` `});`

　　clear: 清除所有元素

　　　　定义: function(){}

　　　　示例:

`$(``'#btnClear'``).click(``function` `() {` `$(``'#left'``).listbox().clear();` `});`

　　getData: 获取与指定jQuery对象关联的数据

　　　　定义:function(a){},参数a为ListBox元素的a标签，ListBox元素的DOM结构为<li><a></a></li>

　　　　示例:

`$(``'#btnGetData'``).click(``function` `() {` `var` `a = $(``'#left a:first'``);` `if` `(a.size() > 0) {` `var` `data = $(``'#left'``).listbox().getData(a);` `alert(``"{value: '"` `+ data.value +` `"', text: '"` `+ data.text +` `"'}"``);` `}` `});`

　　getDatas: 获取所有数据

　　　　定义: function(){}

　　　　示例:

`$(``'#btnGetDatas'``).click(``function` `() {` `alert($(``'#left'``).listbox().getDatas().length);` `});`

　　getSelected: 获取所有选中的数据

　　　　定义:function(){}

　　　　示例:

`$(``'#btnGetSelected'``).click(``function` `() {` `alert($(``'#left'``).listbox().getSelected().length);` `});`

　　2011.9.30 1.1版新增

　　reload: 重新加载ListBox中的数据

　　　　定义:function(data,ajaxsettings){}，参数data，ajaxsettins定义同Options中同名属性data的定义

　　　　示例:　　　　

`$(``'#btnReload'``).click(``function` `() {` `$(``'#left'``).listbox().reload({ data:` `'/Data/Index'``, ajaxsettings: {` `data: { id:` `'a'` `}` `}` `});` `});`

　　removeItem: 删除指定value值的元素

　　　　定义:function(data){}，参数data可以为单个值，也可以为{value:''}对象

　　　　示例:

`$(``'#btnRemoveItem'``).click(``function` `() {` `$(``'#left'``).listbox().removeItem({ value: 1 });` `});`

　　removeRange: 删除指定value值数组的元素

　　　　定义:function(data){}，参数data为单个值，或{value:''}对象的数组

　　　　示例:

`$(``'#btnRemoveRange'``).click(``function` `() {` `var` `datas = $(``'#left'``).listbox().getDatas();` `$(``'#left'``).listbox().removeRange(datas);` `});`

　　setSelection: 选中指定value值的元素

　　　　定义: function(value){}，参数value为单个值

　　　　示例:

`$(``'#btnSetSelection'``).click(``function` `() {` `$(``'#left'``).listbox().setSelection(1);` `});`

调用方法时，可以也可以使用$('#selector').listbox('methodName',arguments)方式，例:

`$(``'#btnCallMethod'``).click(``function` `() {` `var` `a = $(``'#left a:first'``);` `if` `(a.size() > 0) {` `var` `data = $(``'#left'``).listbox(``'getData'``, a);` `alert(``"{value: '"` `+ data.value +` `"', text: '"` `+ data.text +` `"'}"``);` `}` `});`