`
Ozone
  • 浏览: 25406 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript页面表格排序

JavaScriptHTML浏览器 
阅读更多
javascript页面排序

今天项目中需要页面点击表头,按升降排序,查找了各方面资料,根据网上实例,自己改写了一个简单的例子
说到排序,肯定少不了Array Methods 中的 sort(),简单的介绍一下.
sort()方法可用来排列数组中的元素,语法是 
    arrayObject.sort(sortByRequest)

注释: 1.sortByRequeset是可选项，指定排列次序。必须是一个函数。
      2.sort()默认是没有参数，函数按照字母大小排列。如果是数字按照默认情况排列，会出现错误（e.g：1,11,2,21）
      3.当使用sort()后，array发生改变。

页面表格js排序，首先要得到具体哪个表格，这个不需要讲了吧！ 
    sTable = document.getElementById(tableId);

表格找到后必须对表格的内容进行应用,即得到表格tbodies的集合. 
    var tbody = table.tBodies[0];
    var colRows = tbody.rows;


得到tbodies集合以后放入Array里面 
    var aTrs = new Array;
    for (var i=0; i < colRows.length; i++) {
	      aTrs[i] = colRows[i];
    }

所有信息已经准备完毕,我们对array进行排序(也就是上面代码中的aTrs) 
     aTrs.sort(compareEle());

   其中compareEle()是指定排列次序的函数。
当把数字（aTrs）排列完毕以后，需要重新生成表格 

    var oFragment = document.createDocumentFragment();            
    for(var i=0; i < aTrs.length; i++) {
        oFragment.appendChild(aTrs[i]);
    }
        tbody.appendChild(oFragment);

这样，基本的功能已经介绍已经完成。
如果要在项目中加入这项功能需要考虑以下基本内容
1.浏览器的类型
2.需要定位是对哪一列进行排列
3.需要排列的列的数据类型。
4.是否连续排序（eg：如果按照升序排列以后，再次点击，应该按照降序列）
所以最终详细设计 
function ieOrFireFox(ob)
{
    if (ob.textContent != null)
	return ob.textContent;
    var s = ob.innerText;
    return s.substring(0, s.length);
}

//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType) {
	var table = document.getElementById(tableId);
	var tbody = table.tBodies[0];
	var colRows = tbody.rows;
	var aTrs = new Array;
         //将将得到的列放入数组，备用
	for (var i=0; i < colRows.length; i++) {
		aTrs[i] = colRows[i];
	}
                      
                 
	//判断上一次排列的列和现在需要排列的是否同一个。
	if (table.sortCol == iCol) {
		aTrs.reverse();
	} else {
		//如果不是同一列，使用数组的sort方法，传进排序函数
		aTrs.sort(compareEle(iCol, dataType));
	}
        
	var oFragment = document.createDocumentFragment();
                
	for (var i=0; i < aTrs.length; i++) {
		oFragment.appendChild(aTrs[i]);
	}                
	tbody.appendChild(oFragment);
	//记录最后一次排序的列索引
	table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
	switch(dataType) {
	case "int":
		return parseInt(sValue);
	case "float":
		return parseFloat(sValue);
	case "date":
		return new Date(Date.parse(sValue));
	default:
		return sValue.toString();
    }
}
            
//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
	return  function (oTR1, oTR2) {
		var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
		var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
		if (vValue1 < vValue2) {
			return -1;
		} else if (vValue1 > vValue2) {
			return 1;
		} else {
			return 0;
		}
       };
}


具体使用:
  将上述代码保存为 sortable.js,在同一目录下新建sortable.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script src="sortable.js" type="text/javascript"></script>
 </HEAD>

 <BODY>
 <p>Sortable demo:</p>
        <table border="1" id="tableId">
            <thead>
                <tr>
                    <th onclick="sortAble('tableId', 0)"  
                         style="cursor:pointer">name</th>
                    <th onclick="sortAble('tableId', 1, 'date')"
                         style="cursor:pointer">Birthday</th>
                    <th onclick="sortAble('tableId', 2, 'int')" 
                         style="cursor:pointer">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ozone</td>
                    <td>01/12/1982</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>OnlyBlue3</td>
                    <td>10/24/1983</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>Momo</td>
                    <td>10/14/1999</td>
                    <td>8</td>
                </tr>
            </tbody>
        </table>
  
 </BODY>
</HTML>


以上例子经过 ie6 和 firefox2.0.0.5调试通过
分享到：
| java 5.0 tiger学习笔记(二)
评论
5 楼 hankesi2000 2007-08-29  
Ozone 写道
//排序函数，iCol表示列索引，dataType表示该列的数据类型    
function compareEle(iCol, dataType) {    
    return  function (oTR1, oTR2) {    
         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);    
         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);    
         if (vValue1 < vValue2) {    
             return -1;    
         } else if (vValue1 > vValue2) {    
             return 1;    
         } else {    
             return 0;    
         }    
        };    



这里的oTR1, oTR2的值是怎么获得的？为什么会有值？
4 楼 yongsky 2007-08-05  
要对表格进行各种操作建议用DhtmlGrid,功能很全面不仅包括对表格排序还可以编辑,拖拉宽度,选定等等.
3 楼 Ozone 2007-08-01  
这样在html文件中,可以去掉<thead></thead><tbody></tbody>标签了!
2 楼 Ozone 2007-08-01  
最近一直对以前的系统中的表格添加排序功能,发现系统中的表格并没有<thead></thead><tbody></tbody>这些标签,每次出了给表头添加点击事件,还要添加而外标签.为了减少工作量,把js做了个小小调整.
function ieOrFireFox(ob){  
     if (ob.textContent != null)  
     return ob.textContent;  
     var s = ob.innerText;  
     return s.substring(0, s.length);  
}  
   
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型  
function sortAble(tableId, iCol, dataType){  
    var table = document.getElementById(tableId);  
    var tbody = table.tBodies[0];  
    var colRows = tbody.rows;  
    var aTrs = new Array;  
    //将将得到的列放入数组，备用  
    for (var i=0; i < colRows.length-1; i++) {  
         aTrs[i] = colRows[i+1];  
    }  
                                              
 //判断上一次排列的列和现在需要排列的是否同一个。  
    if (table.sortCol == iCol) {  
        aTrs.reverse();  
    } else {  
     //如果不是同一列，使用数组的sort方法，传进排序函数  
         aTrs.sort(compareEle(iCol, dataType));  
    }           
    var oFragment = document.createDocumentFragment();  
                 
    for (var i=0; i < aTrs.length; i++) {  
        oFragment.appendChild(aTrs[i]);  
    }                  
    tbody.appendChild(oFragment);  
     //记录最后一次排序的列索引  
    table.sortCol = iCol;  
 }  
 //将列的类型转化成相应的可以排列的数据类型  
function convert(sValue, dataType) {  
     switch(dataType) {  
     case "int":  
         return parseInt(sValue);  
     case "float":  
         return parseFloat(sValue);  
     case "date":  
         return new Date(Date.parse(sValue));  
     default:  
         return sValue.toString();  
     }  
 }  
               
 //排序函数，iCol表示列索引，dataType表示该列的数据类型  
function compareEle(iCol, dataType) {  
    return  function (oTR1, oTR2) {  
         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);  
         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);  
         if (vValue1 < vValue2) {  
             return -1;  
         } else if (vValue1 > vValue2) {  
             return 1;  
         } else {  
             return 0;  
         }  
        };  
 }
1 楼 Ozone 2007-07-24  
在项目使用当中,发现如果在页面中,本来表格中没有数据,通过js从其他地方添加到本页面时,无法进行排序,甚至连onclick事件都不触发。至于为什么，还没有研究明白。找了一种“偷懒方法”可以解决上述问题。即添加一个隐藏行。
<HTML>  
  <HEAD>  
   <TITLE> New Document </TITLE>  
   <script src="sortable.js" type="text/javascript"></script>  
  </HEAD>  
   
  <BODY>  
  <p>Sortable demo:</p>  
         <table border="1" id="tableId">  
             <thead>  
                 <tr>  
                     <th onclick="sortAble('tableId', 0)"    
                          style="cursor:pointer">name</th>  
                     <th onclick="sortAble('tableId', 1, 'date')"  
                          style="cursor:pointer">Birthday</th>  
                     <th onclick="sortAble('tableId', 2, 'int')"   
                          style="cursor:pointer">Age</th>  
                 </tr>  
             </thead>  
             <tbody> 
                 <tr style="display:none"></tr> 
                 <tr>  
                     <td>Ozone</td>  
                     <td>01/12/1982</td>  
                     <td>25</td>  
                 </tr>  
                 <tr>  
                     <td>OnlyBlue3</td>  
                     <td>10/24/1983</td>  
                     <td>23</td>  
                 </tr>  
                 <tr>  
                     <td>Momo</td>  
                     <td>10/14/1999</td>  
                     <td>8</td>  
                 </tr>  
             </tbody>  
         </table>  
     
  </BODY>  
 </HTML>
发表评论

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

相关推荐

    JavaScript实现表格排序

    而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...

    javaScript对表格排序

    总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...

    JavaScript实现表格排序，点击表头切换升序降序，非常简单

    &lt;title&gt;JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)"&gt;...

    javascript页面表格实现不刷新排序的例子

    本示例"javascript页面表格实现不刷新排序的例子"正是针对这一需求，通过JavaScript技术来实现在不刷新页面的情况下对表格数据进行排序。 首先，JavaScript是网页动态效果的核心，它可以在浏览器端运行，为网页添加...

    javascript实现表格排序

    JavaScript 实现表格排序是网页开发中的常见需求，尤其在数据展示和管理中起到关键作用。在本项目"tiger-auntion-TableSort-测试交流版"中，我们看到一个简洁易用的表格排序功能。下面将详细讲解如何使用 JavaScript...

    javaScript对表格自动排序

    下面我们将深入探讨如何使用JavaScript实现表格排序功能。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示表格行，`&lt;th&gt;`表示表头单元格，`&lt;td&gt;`表示数据单元格。例如： ```html 姓名 ...

    Javascript表格排序大全

    JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    四、表格排序 对于表格，我们可以扩展以上方法，监听单元格的拖放事件。在`drop`事件中，不仅要更新单元格的顺序，还要调整相关行的顺序。这可能涉及到对表格数据的重新排序，尤其是当数据与后端同步时。 五、优化...

    javascript带箭头的表格排序实例

    在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

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

    JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...

    jquery实现表格排序

    要在网页中使用jQuery表格排序插件，首先需要确保已经正确加载了jQuery库。接着可以通过以下步骤引入jQuery TableSorter插件： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery表格排序示例 &lt;!-- 引入jQuery库 --&gt; ...

    纯js实现点击表头排序,轻量级JavaScript表格内容排序代码

    这个轻量级的JavaScript表格排序实现非常实用，特别适合小型项目或对性能要求高的场景。它可以避免引入大型库的开销，同时也易于理解和维护。当然，对于更复杂的需求，例如处理日期或对象排序，可能需要进一步扩展这...

    表格排序

    `tablesort.js` 是一个用于表格排序的JavaScript库，而 `jquery-1.9.0.min.js` 是jQuery的轻量级版本，它是一个广泛使用的JavaScript库，提供了更简单、更高效的DOM操作、事件处理和动画功能。 首先，我们要理解...

    一个表格排序程序

    源码是软件开发的基础，通过查看和理解源码，开发者可以学习到如何用JavaScript实现表格排序功能，包括数据处理、事件监听、DOM操作等技术。 “工具”标签则表明这是一个开发者使用的辅助工具，可以帮助他们在自己...

    jsp页面表格排序 js文件

    在这个场景下，我们关注的是`jsp页面表格排序 js文件`，这通常涉及到前端JavaScript技术，用于实现表格数据的客户端排序，而无需每次用户点击列头时都向服务器发送请求。 `jsp页面表格排序 js文件`的核心在于...

    jquery的表格排序插件

    总结来说，jQuery的表格排序插件是提高网页交互性的一种重要工具，它简化了对HTML表格数据的排序操作，使得用户能够方便地对大量信息进行管理和分析。通过学习和使用这样的插件，开发者可以提升网站或应用程序的数据...

    原生js table表格自动排序效果

    在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序).zip

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)

    html表格排序资源

    HTML表格排序资源主要涉及到网页中数据展示的组织与管理，特别是在大数据量时，提供便捷的交互方式对数据进行排序，以提升用户体验。这里提到的两个主要工具是tablesorter和jquery-tablesort，它们都是基于...

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