SelectorView - JavaScript 两栏选择器(Multiselect)(v1.1)

介绍

SelectorView是一个用于显示两栏(备选框, 已选框)选择器控件的JavaScript控件.

示例

<div id="sel_div"></div>

<script type="text/javascript">
<!--
var sel = new SelectorView('sel_div');
sel.src.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名',
	text		: 'Text'
};
sel.dst.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名'
};
sel.src.dataKey = 'id';
sel.src.title = '可选';

sel.dst.dataKey = 'id';
sel.dst.title = '已选';
sel.render();

var input_html = '...';
sel.src.add({id: 0, name: 'None', name_cn: '幽灵', text: 'None'});
sel.src.add({id: 1, name: 'Tom', name_cn: '汤姆', text: 'Tomcat'});
//-->
</script>

API文档

查看API文档

开发指导

创建

SelectorView由两个TableView而成组合, 备选框命名为src, 已选框命名为dst. 所以, 创建SelectorView, 相当于创建两个TableView的过程:

<div id="table_div"></div>

<script type="text/javascript">
<!--
var sel = new SelectorView('sel_div');
sel.src.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名',
	text		: 'Text'
};
sel.dst.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名'
};
sel.src.dataKey = 'id';
sel.src.title = '可选';

sel.dst.dataKey = 'id';
sel.dst.title = '已选';
sel.render();
//-->
</script>