基于 lou/multi-select 选择控件,在此基础上添加数据绑定,做了进一步封装。
除了引用multi-select
所需的文件,还要额外引入
<script src="./js/jquery.multi-select-data.js"></script>
将选择框放到合适的位置
<select id='optgroup' multiple='multiple' style="display: none"></select>
- 准备数据,形如:
var data = [
{
INDEX: '0',
SELECT: false,
TEXT: 'one',
CHANNEL: '0',
LABEL: 'billing',
VALID: '0'
}, {
INDEX: '1',
SELECT: false,
TEXT: 'two',
CHANNEL: '1',
LABEL: 'billing',
VALID: '0'
}, {
INDEX: '2',
SELECT: true,
TEXT: 'three',
CHANNEL: '2',
LABEL: 'billing',
VALID: '1'
}
];
- 初始化对象
var multiSelect = new MultiSelect($('#optgroup'), 'INDEX', 'TEXT', {name: 'VALID', select: '1'});
MultiSelect有四个参数:
- 第一个参数:DOM元素
- 第二个参数:对应option的value值的列,请确保此值唯一
- 第三个参数:对应option的text值得列
- 第四个参数:初始化时,用于筛选选中数据的对象,例如上方,表示'VALID'值为'1'的option将置入已选中的列表中。
- 选中后的回调事件
multiSelect.onEvent('afterSelect',function (values) {});
- 取消选中后的回调事件
multiSelect.onEvent('afterDeselect',function (values) {});
- 绑定数据
multiSelect.init(data)
- 获取原数据
multiSelect.getOrigin()
- 清空
multiSelect.empty();
- 选中所有
multiSelect.selectAll();
- 取消所有
multiSelect.unSelectAll();
- 获取相比刚初始化时,仍在选中框的数据
multiSelect.getUpdate();
- 获取相比刚初始化时,被取消选中的数据
multiSelect.getDelete();
- 获取相比刚初始化时,新选中的数据
multiSelect.getAdd();
- 获取全部选择的
multiSelect.getSelected();
- 获取全部未选择的
multiSelect.getDeselect();
注意:getUpdate()、getDelete()、getAdd()三个方法可以传入一个列名为参数,作为对比条件
,例如
multiSelect.getAdd('CHANNEL');
表示,根据CHANNEL列,取最终选中列表与初始选中列表的差集,如果不传此值,会把KEY列作为对比条件
。