TableView - JavaScript 数据表格控件(v1.1)

介绍

TableView是一个用于显示数据表格的JavaScript控件. 集成的分页控件, 可对表格中的数据集进行客户端分页, 亦可对表格中的数据集进行客户端排序.

示例

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

<script type="text/javascript">
<!--
var table = new TableView('table_div');
table.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名',
	text		: 'Text',
	input		: '输入'
};
table.dataKey = 'id';
table.display.filter = true;
table.display.pager = true;
table.pager.size = 3;

var input_html = '<input type="text" name="a" size="2" class="textbox" />';

// table.addRange() 可以用来添加数据列表.
table.add({id: 0, name: 'None', name_cn: '幽灵', text: 'None', input: input_html});
table.add({id: 1, name: 'Tom', name_cn: '汤姆', text: 'Tomcat', input: input_html});
table.add({id: 2, name: 'Jerry', name_cn: '杰瑞', text: 'Jerrimy', input: input_html});
});
table.render();
//-->
</script>

API文档

查看API文档

开发指导

创建

TableView生成数据表格控件的HTML代码, 添加到指定的节点当中. 这个节点一般是div节点. 创建一个TableView的实例后, 需要设置dataKey(所要显示的记录的主键), 调用add/addRange方法将记录/记录列表添加到表格中, 然后调用render()方法将控件渲染到页面上.

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

<script type="text/javascript">
<!--
var table = new TableView('table_div');
table.header = {
	id			: 'Id',
	name		: 'Name',
	name_cn		: '中文名'
};
table.dataKey = 'id';
table.add({id: 0, name: 'None', name_cn: '幽灵'});
table.render();
//-->
</script>

双击行事件

重写dblclick回调函数, 捕获行的双击事件, 可以用来做其他的操作, 比如对记录进行编辑.

<script type="text/javascript">
<!--
table.dblclick = function(id){
	// AJAX获取相应id的记录, 然后编辑
}
//-->
</script>

获取选中记录列表/记录主键列表

获取当前表格已经选中的记录, 可以进行批量删除或者批量编辑操作.

<script type="text/javascript">
<!--
var rows = table.getSelected(); // Array[Object]
var ids = table.getSelectedKeys(); // Array[Key]
//-->
</script>

实现客户端分页

TableView使用PagerView作为其分页控件.

<script type="text/javascript">
<!--
table.display.pager = true;
table.render();
//-->
</script>

实现服务器端分页

要实现服务器端分页, 一般不再使用TableViewr的分页功能, 而是再独立添加一个PagerView, 这样, PagerView可以做更大的控制.

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

<script type="text/javascript">
<!--
var table = new TableView('table_div');
...
var pager = new PagerView('pager_div');
...

pager.onclick = function(index){
	$.getJSON(url, params, function(response){
		list_table.clear();
		list_table.addRange(response.items);
		// 因为查询条件可能变化, 结果数量有变化, 所以要重新生成分页控件.
		pager.itemCount = response.itemCount;
		pager.render();
	});
};
//-->
</script>

显示选项

TableView控件包含了5个可独立控制是否显示的子控件, 分别是: title(标题), count(记数), marker(行选择框), filter(过滤器), pager(分页). 使用方法如:

table.display.title = true; // 显示标题
table.display.marker = true; // 显示行选择框
table.display.pager = false; // 不显示分页控件

服务器端排序

当设定 TableView.display.sort 为 true 时, TableView 可进行所有字段的自然排序. 如需要进行服务器端排序, 可重写 TableView.sort.onclick() 方法, 详见 SortView 的文档.