SortView - JavaScript 排序控件(v1.1)

介绍

SortView 是用于显示排序按钮/链接的控件, 并包含 js 排序功能. 这些排序控件附加在指定的 HTMLElement 里. 结合 TableView, 可以实现非常强大的数据表格功能. SortView 可单独使用, 但依赖 jQuery 库.

示例

<table>
	<tr>
		<th field="id">Id</th>
		<th field="name">Name</th>
		<th field="name_cn">中文名</th>
		<th field="text">Text</th>
		<th field="input">输入</th>
	</tr>
</table>

<script type="text/javascript">
<!--
var rows = []; // datasource

var sort = new SortView();
sort.fields = {
	'id'	: ['int', null],
	'name'	: [null, null]
};

var elements = {};
var ths = $('table th').each(function(i, th){
	var k = $(th).attr('field');
	if(k != undefined){
		elements[k] = th;
	}
});
sort.onclick = function(field, order){
	sort.sort(rows);
	// do with rows...
}

sort.render(elements);
//-->
</script>

API文档

查看API文档

开发指导

创建

SortView 的工作原理是将排序链接/按钮附加到指定节点内部, 这些节点可以是 div, 或者表格单元格. SortView.fields 定义了各个字段的数据类型和排序函数.

<div id="id_div"></div>
<div id="name_div"></div>

<script type="text/javascript">
<!--
var sort = new SortView();
sort.fields = {
	'id'	: ['int', null],
	'name'	: [null, null]
};
var elements = {
	'id' : document.getElementById('id_div'),
	'name' : document.getElementById('name_div')
};
sort.render(elements);
//-->
</script>

SortView.render() 方法接受要添加入排序链接/按钮的节点列表(HTMLElement).

排序事件

重写 SortView.onclick 方法, 可捕获排序字段. 其两个参数指示是哪个字段要排序, 以及排序的方向.

sort.onclick = function(field, order){
	sort.sort(rows);
	// do with rows...
}

排序函数

SortView.sort() 是一个内置的排序函数, 可对 JavaScript 对象的数组进行排序, 默认进行自然排序.