- 浏览: 141992 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (119)
- ibatis (7)
- oracle (14)
- struts (4)
- js (11)
- web (6)
- java基础 (16)
- jstl (1)
- use (2)
- log4J (1)
- Json (2)
- jxl (5)
- server (1)
- spring (4)
- jquery (8)
- struts2 (1)
- AjaxAnywhere (1)
- extjs (1)
- hibernate (1)
- other (3)
- tld (1)
- jms (2)
- lib (0)
- 应用 (1)
- web前端 (2)
- linux (2)
- jvm (9)
- 缓存 (1)
- spring mvc (1)
- ftp (1)
- ide (1)
最新评论
自写的JS表格排序，目前仅支持数字排序，其他的可以扩展sort和配置来实现，并且目前只支持单行表头
<title>JS表格排序</title>
<script type="text/javascript">
var tableSort = {};
(function() {
var oTable = {};
var cellStatus = {};
var sortCells = {};
var limit = {};
var $ = function(id) {
return document.getElementById(id);
}
var objKeyExists = function(key, search) {
if (typeof key != 'number' && typeof key != 'string') {
return false;
}
for (k in search) {
if (k == key) {
return true;
}
}
return false;
}
var _addEvent = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].onclick = function() {
tableSort.sort(tableId, cellId);
}
}
var _addStyle = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].style.cursor = 'pointer';
}
var _addTitle = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].title = '点击排序';
}
var _sortTable = function(tableId, cellId) {
var rows = oTable[tableId].tBodies[0].rows;
var _rows = [];
for (var i = 1; i < rows.length; i++) {
_rows.push(rows[i]);
}
var status = -1;
if (objKeyExists(cellId, cellStatus[tableId])) {
status = 0 - cellStatus[tableId][cellId];
}
cellStatus[tableId][cellId] = status;
if (status == 1) {
oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">5</span>';
_rows.sort((function(id){
return function(a, b) {
return _sort(a, b, id);
}
}(cellId)));
} else {
oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">6</span>';
_rows.sort((function(id){
return function(a, b) {
return _rsort(a, b, id);
}
}(cellId)));
}
var oFragment = document.createDocumentFragment();
for (var i = 0; i < _rows.length; i++) {
_rows[i].className = i % 2 ? 'tr' : 'tr_spec';
_rows[i].cells[0].className = i % 2 ? 'td_spec2' : 'td_spec1';
if (limit[tableId] > 0) {
if (i >= limit[tableId]) {
_rows[i].style.display = 'none';
} else {
_rows[i].style.display = '';
}
}
oFragment.appendChild(_rows[i]);
}
oTable[tableId].tBodies[0].appendChild(oFragment);
}
var _cleanStatus = function(tableId, cellId) {
for(var i = 0; i < sortCells[tableId].length; i++) {
oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML = oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML.replace(/ <span style=\"font-family\: webdings\">[56]<\/span>$/ig, '');
}
}
var _sort = function(a, b, id) {
var param1 = a.cells[id].innerText;
var param2 = b.cells[id].innerText;
param1 = param1.replace(/[^\d.-]/g, '');
param2 = param2.replace(/[^\d.-]/g, '');
if (param1 == '-' || param1 == '') {
return 1;
}
if (param2 == '-' || param2 == '') {
return -1;
}
//如果两个参数均为字符串类型
if (isNaN(param1) && isNaN(param2)){
return param1.localeCompare(param2);
}
//如果参数1为数字，参数2为字符串
if (!isNaN(param1) && isNaN(param2)){
return -1;
}
//如果参数1为字符串，参数2为数字
if (isNaN(param1) && !isNaN(param2)){
return 1;
}
//如果两个参数均为数字
if (!isNaN(param1) && !isNaN(param2)){
if (Number(param1) > Number(param2)) {
return 1;
}
if (Number(param1) == Number(param2)) {
return 0;
}
if (Number(param1) < Number(param2)) {
return -1;
}
}
//return a.cells[id].innerText - b.cells[id].innerText;
}
var _rsort = function(a, b, id) {
var param1 = b.cells[id].innerText;
var param2 = a.cells[id].innerText;
param1 = param1.replace(/[^\d.-]/g, '');
param2 = param2.replace(/[^\d.-]/g, '');
if (param1 == '-' || param1 == '') {
return -1;
}
if (param2 == '-' || param2 == '') {
return 1;
}
//如果两个参数均为字符串类型
if (isNaN(param1) && isNaN(param2)){
return param1.localeCompare(param2);
}
//如果参数1为数字，参数2为字符串
if (!isNaN(param1) && isNaN(param2)){
return -1;
}
//如果参数1为字符串，参数2为数字
if (isNaN(param1) && !isNaN(param2)){
return 1;
}
//如果两个参数均为数字
if (!isNaN(param1) && !isNaN(param2)){
if (Number(param1) > Number(param2)) {
return 1;
}
if (Number(param1) == Number(param2)) {
return 0;
}
if (Number(param1) < Number(param2)) {
return -1;
}
}
//return b.cells[id].innerText - a.cells[id].innerText;
}
tableSort = {
init : function(tableId, cells, rows) {
oTable[tableId] = $(tableId);
sortCells[tableId] = cells;
cellStatus[tableId] = {};
limit[tableId] = rows ? rows : 0;
for (var i = 0; i < cells.length; i++) {
_addEvent(tableId, cells[i]);
_addStyle(tableId, cells[i]);
_addTitle(tableId, cells[i]);
}
if (rows > 0) {
for (var i = 1; i < $(tableId).rows.length; i++) {
if (i > rows) {
$(tableId).rows[i].style.display = 'none';
}
}
}
},
sort : function(tableId, cellId) {
_cleanStatus(tableId, cellId);
_sortTable(tableId, cellId);
}
}
})();
</script>
<style type="text/css">
*{font-size:12px;}
</style>
<table id="t1" width="400" border="1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
<td>第五列</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>-0.1</td>
<td>2009-01-01</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>-0.3</td>
<td>2008-01-01</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2008-03-01</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>-0.1</td>
<td>2009-02-01</td>
<td>-</td>
</tr>
</table>
<br />
<table id="t2" width="400" border="1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
<td>第五列</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>-0.1</td>
<td>2009-01-01</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>-0.3</td>
<td>2008-01-01</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2008-03-01</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>-0.1</td>
<td>2009-02-01</td>
<td>-</td>
</tr>
</table>
<script type="text/javascript">
tableSort.init('t1', [0, 1, 2, 3]);
tableSort.init('t2', [0, 1, 2, 3], 2);
</script>
发表评论
-
js中英文字符串相关操作
2011-09-05 22:34 1040一、判断是否中英文 <script language=& ... -
js 常识
2011-04-02 15:42 7101.document.write(""); ... -
js正则表达式
2011-03-14 13:25 722JS的正则表达式//校验是否全由数字组成 function ... -
js中for in的用法
2011-02-21 15:22 852在js中for in的用法 for(var i=0;i& ... -
showModel的使用体会
2010-12-21 11:30 1192ShowModalDialog函数的功 ... -
js 判断时间格式
2010-08-26 23:49 12112.1 短时间，形如 (13:04:06) ... -
textarea控制字数js
2010-08-26 23:48 690onkeypress='if (this.value.leng ... -
JS计算两日期时间差
2010-08-15 16:18 2310/** * 字符串传Date * @param { ... -
js合并单元格
2010-08-13 00:43 1114数据是动态生成的。如： 姓名 性别 年龄 科目 分数 张三 男 ... -
js 验证表单
2010-08-08 21:37 400<script language="javas ...
相关推荐
JavaScript 表格排序双击可进行按表格列排序
Blue Table，Js表格排序插件，排序完成之后需要执行的函数 可以收到一个对象作为参数，前一次排序的对象排序列坐标和当前被排序列坐标
收集起来js表格排序、支持中文、日期、英文、数值排序，多个Javascript表格排序方法，完美解决
各种各样的js表格排序列子，只要修改一下参数就可以用了。
带箭头的javascript表格排序。直接使用源码
用js实现对表格的排序，小demo一个，希望对新手们有点帮助
超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序
功能强大的javascript表格排序，可以设定排序规则，设定哪些列排序，哪些列不排序。运行速度快。两部操作就搞定，使用方便简单！解决服务器端数据库排序的压力！
javascript表格排序案例(面向对象)案例资料
js表格排序,数据区别色彩 这是扩展自网上的一个例子,使用外部js对表格进行操作
javascript 表格排序多种数据类型排序(中文混合数字排序).zip
javascript表格排序（顺序和逆序）并高亮显示，通过使用排序后。然所在的那一列进行高亮显示
网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)
内涵表格排序代码, 支持string number， 不支持date类型。
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
套入表格，实现按列排序，含css样式，增强表格美观度。非常强大，非常好用，不容错过！
JavaScript实现表格排序，按数字、日期、汉字排序！
Blue Table，Js表格排序插件，排序完成之后需要执行的函数 可以收到一个对象作为参数，前一次排序的对象排序列坐标和当前被排序列坐标。