<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>K2046.TableSorter</title>
<style type="text/css">
body{font-size:12px;line-height:25px;}
tr{height:25px;}
td{font-size:12px;text-align:center;}
.SortDe
</style>
</head>
<body>
<table border="0" style="border:solid 1px #DDDDDD;width:500px;" cellpadding="0" cellspacing="0" id="tb1">
<tbody>
<tr>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;" >sequence</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">name</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">ID</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">position</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">gender</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">work</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">arrival</th>
</tr>
<tr>
<td>1</td>
<td>Andy Lau</td>
<td>8008</td>
<td>CEO</td>
<td>Men</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>Qi Long</td>
<td>8004</td>
<td>Manager</td>
<td>Men</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>Lian Guang</td>
<td>8003</td>
<td>Manager</td>
<td>Men</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>Xue You</td>
<td>8009</td>
<td>ViceCEO</td>
<td>Men</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>Bozhi</td>
<td>8005</td>
<td>assistant</td>
<td>woman</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>Edison Chen</td>
<td>8001</td>
<td>CFO</td>
<td>Men</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>Lin Chen</td>
<td>8002</td>
<td>Probation</td>
<td>woman</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>Yu Zhang</td>
<td>8007</td>
<td>SeniorManager</td>
<td>woman</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>Mark Zhou</td>
<td>8006</td>
<td>ViceCEO</td>
<td>Men</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</tbody>
</table>
<br />
<script language="javascript" type="text/javascript">
function TableSorter(table)
{
this.Table = this.$(table);
if(this.Table.rows.length <= 1){
return;
}
this.Init(arguments);
}
TableSorter.prototype.Init = function(args)
{
this.ViewState = [];
for(var x = 0; x < this.Table.rows[0].cells.length; x++)
{
this.ViewState[x] = false;
}
if(args.length > 1)
{
for(var x = 1; x < args.length; x++)
{
if(args[x] > this.Table.rows[0].cells.length){
continue;
}
else
{
this.Table.rows[0].cells[args[x]].onclick = this.GetFunction(this,"Sort",args[x]);
this.Table.rows[0].cells[args[x]].style.cursor = "pointer";
}
}
}
else
{
for(var x = 0; x < this.Table.rows[0].cells.length; x++)
{
this.Table.rows[0].cells[x].onclick = this.GetFunction(this,"Sort",x);
this.Table.rows[0].cells[x].style.cursor = "pointer";
}
}
}
TableSorter.prototype.$ = function(element)
{
return document.getElementById(element);
}
TableSorter.prototype.GetFunction = function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
TableSorter.prototype.Sort = function(col)
{
var SortAsNumber = true;
for(var x = 0; x < this.Table.rows[0].cells.length; x++){
this.Table.rows[0].cells[x].className = this.NormalCss;
}
var Sorter = [];
for(var x = 1; x < this.Table.rows.length; x++){
Sorter[x-1] = [this.Table.rows[x].cells[col].innerHTML, x];
SortAsNumber = SortAsNumber && this.IsNumeric(Sorter[x-1][0]);
}
if(SortAsNumber){
for(var x = 0; x < Sorter.length; x++){
for(var y = x + 1; y < Sorter.length; y++){
if(parseFloat(Sorter[y][0]) < parseFloat(Sorter[x][0])){
var tmp = Sorter[x];
Sorter[x] = Sorter[y];
Sorter[y] = tmp;
}
}
}
}
else{
Sorter.sort();
}
if(this.ViewState[col]){
Sorter.reverse();
this.ViewState[col] = false;
this.Table.rows[0].cells[col].className = this.SortDescCss;
}
else{
this.ViewState[col] = true;
this.Table.rows[0].cells[col].className = this.SortAscCss;
}
var Rank = [];
for(var x = 0; x < Sorter.length; x++){
Rank[x] = this.GetRowHtml(this.Table.rows[Sorter[x][1]]);
}
for(var x = 1; x < this.Table.rows.length; x++){
for(var y = 0; y < this.Table.rows[x].cells.length; y++){
this.Table.rows[x].cells[y].innerHTML = Rank[x-1][y];
}
}
this.OnSorted(this.Table.rows[0].cells[col], this.ViewState[col]);
}
TableSorter.prototype.GetRowHtml = function(row){
var result = [];
for(var x = 0; x < row.cells.length; x++){
result[x] = row.cells[x].innerHTML;
}
return result;
}
TableSorter.prototype.IsNumeric = function(num){
return /^\d+(\.\d+)?$/.test(num);
}
TableSorter.prototype.OnSorted = function(cell, IsAsc){
return;
}
new TableSorter("tb1");
</script>
</body>
</html>
分享到：
相关推荐
"js排序表格，实现按列排序"这个主题主要涉及JavaScript（js）如何用于实现对HTML表格的动态排序，同时结合CSS样式提升表格的美观度。 首先，我们需要理解HTML表格的基本结构，它由`<table>`标签定义，内部包含`...
"实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能，适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在...
虽然易语言的高级表格控件可能会提供内置的排序功能，但为了实现高效排序，开发者可能需要了解和实现如快速排序、归并排序等高效的排序算法。这些算法能在大数据量时显著提高性能。 在提供的压缩包文件中，"易语言...
本教程将深入探讨如何实现`DataGridView`的多列排序功能，特别是当用户按住Shift键进行连续排序时。 首先，了解`DataGridView`的基本排序功能。`DataGridView`控件支持单列点击排序，当用户点击某一列的头时，它会...
在"易语言excel多列排序"这个主题中，我们主要探讨的是如何利用易语言编写程序，实现对Excel电子表格中的数据进行多列排序的功能。在Excel中，排序功能是数据分析和整理数据的关键操作，而多列排序则意味着可以根据...
本实例将详细讲解如何在`DataGridView`中实现多列排序功能。 首先，我们要了解`DataGridView`的基本排序机制。默认情况下，`DataGridView`只支持单列排序，当用户点击列头时，该列的数据会按照升序或降序排列。但是...
然后，根据当前的排序状态（即是否已经按该列排序以及排序方式），确定新的排序方向。通常，可以设置一个变量来记录当前排序列和排序方式。 接下来，源码可能包含以下步骤： 1. **数据结构定义**：定义一个结构体...
jqGrid 是一个强大的 jQuery 插件，...总结，jqGrid 提供了强大的列标题定制、列锁定和排序功能，极大地增强了表格的可用性和功能性。通过理解和运用这些特性，开发者可以构建出符合用户需求的高效数据展示和操作界面。
总的来说，表格拼音列排序是一个实用的工具，它结合了汉字到拼音的转换技术和表格排序功能，使我们在处理中文数据时能够更加便捷。了解并掌握这一技能，对于从事数据分析、项目管理以及任何需要处理汉字数据的工作都...
而`js`文件则是实现拖动排序和点击排序功能的JavaScript代码。 在实际应用中，开发者可以将这些代码片段整合到自己的项目中，通过调整CSS样式适应不同的设计需求，或者对JavaScript代码进行优化以处理更复杂的表格...
排序功能是高级表格的核心特性之一，它允许用户按照指定列的数据进行升序或降序排列。实现这一功能通常有两种主要方法：冒泡排序和二分查找。在易语言中，我们通常会选择性能更高的二分查找算法，因为它在处理大量...
在JavaScript编程中，实现表格数据按表头中的某一列进行排序的功能，与Excel电子表格的排序功能类似，是一项常见的需求。这种功能对于数据展示和分析至关重要，尤其在Web应用程序中，用户经常需要对数据进行动态排序...
为了提供更好的用户体验，开发者经常需要实现表格的交互功能，比如按照列排序和拖拽行排序。在这个项目中，我们将利用jQuery库以及两个插件：jquery.tablednd_0_5.js和jquery.tablesorter.js来实现这些功能。 首先...
首先，确保在表格初始化时设置`multisort`选项为`true`，这将启用多列排序功能。接着，可以通过`sortorder`参数指定默认的排序顺序，如'asc'（升序）或'desc'（降序）。在`colModel`中，为每列定义`sortable`属性，...
接下来，为了实现排序功能，我们需要在`dropHandler`中添加逻辑来重新排序表格中的行。这通常涉及到DOM操作，可能需要计算行的相对位置，并更新后端数据（如果有的话）。在大多数情况下，我们还需要考虑如何在用户...
本文将深入探讨如何使用jQuery实现表格数据的排序功能，这在Web开发中是一个常见的需求，特别是在处理大量数据展示时。 首先，我们需要一个包含数据的HTML表格。表格通常由`<table>`标签定义，每行数据由`<tr>`标签...
比如，你可以设置默认的排序列和排序顺序，添加自定义的排序标志，甚至创建带有排序功能的下拉菜单。这些高级特性使得这款插件在处理复杂的表格数据时也能游刃有余。 总结来说，"表格排序插件"，尤其是"Mottie-...
而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求，尤其对于数据展示丰富的网页，如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能，让表格数据可以根据用户的需求进行...
首先，我们要理解表格的拖动和排序功能是如何实现的。在Web页面上，我们可以利用HTML5的`<table>`元素来构建基础的表格结构。然后，通过JavaScript库，如jQuery或原生的JavaScript，来增加动态交互性。在这个案例中...