`

自定义可排序表格

    博客分类：
  • Ajax
CSSJSPCacheJavaScriptHTML 
阅读更多

首先，定义一个js：

  tableSort.js:

function sort(tableId, sortColumn,nodeType) {
	var table = document.getElementById("theTable");
	var tableBody = table.tBodies[0];
	var tableRows = tableBody.rows;
	
	
	var rowArray = new Array();
	for (var i = 0; i < tableRows.length; i++) {
		rowArray[i] = tableRows[i];
	}
	if (table.sortColumn == sortColumn) {
		rowArray.reverse();
	} else {
		rowArray.sort(generateCompareTR(sortColumn, nodeType));
	}
	var tbodyFragment = document.createDocumentFragment();
	for (var i = 0; i < rowArray.length; i++) {
		tbodyFragment.appendChild(rowArray[i]);
	}
	tableBody.appendChild(tbodyFragment);
	table.sortColumn = sortColumn;
}


function generateCompareTR(sortColumn, nodeType) {
	return function compareTR(trLeft, trRight) {
		var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);
		var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType);
		if (leftValue < rightValue) {
			return -1;
		} else {
			if (leftValue > rightValue) {
				return 1;
			} else {
				return 0;
			}
		}
	};
}


function convert(value, dataType) {
	switch (dataType) {
	  case "int":
		return parseInt(value);
	  case "float":
		return parseFloat(value);
	  case "date":
		return new Date(Date.parse(value));
	  default:
		return value.toString();
	}
}

 然后是使用：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'tabel.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript" src="userjs/tableSort.js"></script>
	</head>

	<body>
		<table id="theTable" align="center" border="1">
			<thead>
				<tr>
					<td>
						标题1
					</td>
					<td onclick="sort(theTable,1,'int')">
						标题2
					</td>
					<td onclick="sort(theTable,2,'int')">
						标题3
					</td>
					<td onclick="sort(theTable,3,'int')">
						标题4
					</td>
					<td onclick="sort(theTable,4,'int')">
						标题5
					</td>
					<td onclick="sort(theTable,5,'int')">
						标题6
					</td>
					<td onclick="sort(theTable,6,'int')">
						标题7
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						1
					</td>
					<td>
						2
					</td>
					<td>
						3
					</td>
					<td>
						4
					</td>
					<td>
						5
					</td>
					<td>
						6
					</td>
					<td>
						7
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						3
					</td>
					<td>
						4
					</td>
					<td>
						5
					</td>
					<td>
						6
					</td>
					<td>
						7
					</td>
					<td>
						1
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td>
						4
					</td>
					<td>
						5
					</td>
					<td>
						6
					</td>
					<td>
						7
					</td>
					<td>
						1
					</td>
					<td>
						2
					</td>
				</tr>
				<tr>
					<td>
						4
					</td>
					<td>
						5
					</td>
					<td>
						6
					</td>
					<td>
						7
					</td>
					<td>
						1
					</td>
					<td>
						2
					</td>
					<td>
						3
					</td>
				</tr>
				<tr>
					<td>
						5
					</td>
					<td>
						6
					</td>
					<td>
						7
					</td>
					<td>
						1
					</td>
					<td>
						2
					</td>
					<td>
						3
					</td>
					<td>
						4
					</td>
				</tr>
				<tr>
					<td>
						6
					</td>
					<td>
						7
					</td>
					<td>
						1
					</td>
					<td>
						2
					</td>
					<td>
						3
					</td>
					<td>
						4
					</td>
					<td>
						5
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

 

 

然后就可以看到效果了，呵呵

分享到：
| JFreeChart中文文档
评论
1 楼 宋存义 2009-03-03  
你给发得这个代码不好使，解决一下吧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自定义表格排序(JS)

    自定义表格排序功能意味着用户可以根据需要对表格中的数据进行升序或降序排列，而不仅仅是依赖于浏览器的默认排序。本篇文章将深入探讨如何使用 JavaScript 来实现自定义表格排序。 首先，我们需要理解表格的基本...

    jquery 可自定义日期排序的tablesorter

    《jQuery实现可自定义日期排序的Tablesorter详解》 在网页开发中，表格数据的展示和排序是一项常见的需求。jQuery的Tablesorter插件提供了一种强大的解决方案，特别是对于日期排序，它允许开发者根据特定格式自定义...

    layui2.2.5表格排序功能自定义扩展

    针对这个限制，我们可以通过自定义扩展layui的源码来实现自定义排序功能。首先，我们需要了解layui表格组件的工作原理。layui表格组件在初始化时，会生成HTML结构，并根据数据源生成相应的单元格。当用户点击表头...

    很灵活的javascript 表格排序 功能强大 可自定义排序规则

    这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了用户体验。 首先，我们要理解sorttable的核心概念。在JavaScript中，排序通常...

    抛弃人工排序 WPS表格自定义巧排序.docx

    在 WPS 表格中，如何快速实现自定义排序是一个非常重要的问题。在本文档中，我们将会学习如何使用 WPS 的自定义排序功能来实现快速排序，抛弃人工排序的方法。 在 Yang Guo 的故事中，我们可以看到他如何使用 WPS ...

    自定义表格_自定义表格_android_TableView_

    - 长按事件可使用`OnLongClickListener`，实现长按菜单或拖拽排序等功能。 6. **性能优化** - 由于表格可能会显示大量数据，所以要实现视图复用机制，即`convertView`机制，避免因创建过多视图导致内存和性能问题...

    c# 功能强大 酷牛逼的表格 自定义控件

    - 组件化设计：为了提高可复用性和可维护性，自定义控件应遵循组件化设计原则，封装好自己的业务逻辑，对外提供清晰的接口。 3. XPTable项目 - XPTable_src：这个名字可能指的是一个开源项目或库，提供了类似XP...

    WPF自定义表格控件

    本文将深入探讨如何自定义一个表格控件，以满足特定的业务需求，如动态添加、删除行以及支持编辑功能，并且能够与外部的DataTable对象进行数据交互。我们将基于提供的文件`TableControl.xaml.cs`和`TableControl....

    基于QT的自定义表格编辑

    6. **排序和过滤**：为了增强表格的功能，还可以实现排序和过滤功能。这可能涉及到对数据模型的处理，以及更新UI以反映这些改变。 7. **响应式设计**：考虑跨平台兼容性和不同屏幕尺寸，我们可以利用QML的响应式...

    vue+element-ui实现穿梭框数据自定义排序

    在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...

    Dojo 自定义后台排序

    然而，有时候我们需要自定义排序逻辑，比如处理复杂的数据类型或者实现特定的排序算法。这时，我们可以在后端实现排序逻辑，并通过扩展Dojo的`store`或`data`模块来定制排序行为。例如，我们可以创建一个新的`store`...

    给WPS表格设置自定义排序.docx

    ### WPS表格自定义排序详解 #### 一、引言 在日常工作与学习中，我们经常需要使用WPS表格来处理各种数据。其中，排序功能是数据管理中不可或缺的一部分。有时候，我们需要根据特定的需求来进行非标准排序，比如按...

    AngularJS中的Directive自定义一个表格

    创建表格的需求包括：数据源来自controller中的$scope.customers，表头可以通过columnmap给列取别名，并且决定是否显示某个列，点击某个表头可以对该列进行排序，表格下方要有一行显示总行数。 接下来，我们需要...

    vc2008 自定义表格类

    这些函数可能是用于数据绑定、排序、过滤或自定义事件处理，以增强表格的实用性。 5. **示例项目**：提供的简单示例项目是一个很好的学习资源，它展示了如何在实际应用中使用这个自定义表格类。通过运行和分析示例...

    JS可拖动排序的表格

    接下来，为了实现排序功能，我们需要在`dropHandler`中添加逻辑来重新排序表格中的行。这通常涉及到DOM操作，可能需要计算行的相对位置，并更新后端数据（如果有的话）。在大多数情况下，我们还需要考虑如何在用户...

    实现table表格可按行拖拽，按列排序，并可以保存排序后的结果

    "实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    Flex中如何创建自定义排序DataGrid控件的例子

    同时，为了提高代码可维护性，可以将自定义排序逻辑封装到一个单独的服务或组件中，避免在多个地方重复编写相同代码。 在`.actionScriptProperties`、`.flexProperties`、`.project`、`.settings`、`html-template`...

    Jquery 可排序的表格

    jQuery可排序表格的核心在于其背后的算法，它通过监听用户对表头的点击事件，然后根据所选列的数据类型（数值、日期、字符串等）来决定排序逻辑。对于数值，通常按照大小排序；对于字符串，通常是按字典顺序排序；...

    在ASP.NET 2.0中操作数据之二十七：创建自定义排序用户界面

    本文主要探讨了如何在*** 2.0中使用GridView控件创建一个能够自定义排序的用户界面，并着重讲解如何在相同类别的数据前添加分界行来提升用户体验。 首先，要创建一个能够排序的GridView，需要设置GridView控件的...

    表格排序插件

    此外，该插件还具备自定义排序算法的能力，开发者可以根据具体需求编写排序逻辑，进一步提高数据处理的灵活性。 在实际使用中，"Mottie-tablesorter-eb48e66"的集成非常简便。只需在HTML文件中引入相关的CSS和...

Magicbox
Global site tag (gtag.js) - Google Analytics