2009-07-20

JavaScript+jQuery两栏选择控件

Web
Views: 18410 | Add Comments

两栏选择功能经常用到, 就是有一栏显示可选的数据, 另一栏显示当前已选择的数据. 我包装成一个JavaScript控件, 方便使用. 使用时需要引入两个JavaScript文件, 因为使用了jQuery, 所以还需要引入jQuery的js库文件:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TableView.js"></script>
<script type="text/javascript" src="SelectorView.js"></script>

在HTML文件中写上:

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

<script type="text/javascript">
<!--
var sel = new SelectorView('sel_div'); // sel_div 是 HTML 节点 id
sel.src.header = {
	'id'		: 'Id',
	'name'		: 'Name',
	'text'		: 'Text'
};
sel.dst.header = {
	'id'		: 'Id',
	'name'		: 'Name'
};
sel.src.dataKey = 'id';
sel.dst.dataKey = 'id';
sel.src.title = '可选';
sel.dst.title = '已选';
sel.render();

sel.src.add({id: 1, name: 'Tom', text: 'Tomcat'});
sel.src.add({id: 2, name: 'Jerry', text: 'Jerrimy'});
sel.src.add({id: 3, name: 'Jim', text: 'System Engineer'});
sel.src.add({id: 4, name: 'Lucy', text: 'Lucy & Lily'});
//-->
</script>

演示地址: http://www.ideawu.net/person/two-column-selector/two-column-selector.html

Related posts:

  1. JavaScript分页控件
  2. JavaScript 设置浏览器标题闪动
  3. 强大的纯JS数据图工具-flot
  4. JavaScript数据表格和分页控件文档升级
  5. 宽带网络运营商劫持网站的技术分析
Posted by ideawu at 2009-07-20 16:43:35 Tags:

Leave a Comment