JS实现前台数据格式排序

1.比较函数生成器:

复制代码 代码如下:

/**

* 比较函数生成器

*

*
@param iCol

*            数据行数

*
@param sDataType

*            该行的数据类型

*
@return

*/

function  generateCompareTRs(iCol, sDataType) {

return   function  compareTRs(oTR1, oTR2) {

vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);

vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

if  (vValue1 < vValue2) {

return  -1;

}  else   if  (vValue1 > vValue2) {

return  1;

}  else  {

return  0;

}

};

}

2.处理比较字符类型:

复制代码 代码如下:

/**

* 处理排序的字段类型

*

*
@param sValue

*            字段值 默认为字符类型即比较ASCII码

*
@param sDataType

*            字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)

* @return

*/

function  convert(sValue, sDataType) {

switch  (sDataType) {

case   "int" :

return  parseInt(sValue);

case   "float" :

return  parseFloat(sValue);

case   "date" :

return   new  Date(Date.parse(sValue));

default :

return  sValue.toString();

}

}

3.主函数:

复制代码 代码如下:

/**

* 通过表头对表列进行排序

*

* @param sTableID

*            要处理的表ID<table id=‘‘>

* @param iCol

*            字段列id eg: 0 1 2 3 ...

* @param sDataType

*            该字段数据类型 int,float,date 缺省情况下当字符串处理

*/

function  sortTable(sTableID, iCol, sDataType) {

var  oTable = document.getElementById(sTableID);

var  oTBody = oTable.tBodies[0];

var  colDataRows = oTBody.rows;

var  aTRs =  new  Array;

for  (  var  i = 0; i < colDataRows.length; i++) {

aTRs[i] = colDataRows[i];

}

if  (oTable.sortCol == iCol) {

aTRs.reverse();

}  else  {

aTRs.sort(generateCompareTRs(iCol, sDataType));

}

var  oFragment = document.createDocumentFragment();

for  (  var  j = 0; j < aTRs.length; j++) {

oFragment.appendChild(aTRs[j]);

}

oTBody.appendChild(oFragment);

oTable.sortCol = iCol;

}

将以上问代码封装到一个js文件中,在html页面中引用。

测试test.html:

复制代码 代码如下:

< html   xmlns = "http://www.w3.org/1999/xhtml" >

< title > 表列排序 </ title >

< script   type = "text/javascript"   src = "js/sortTable.js" > </ script >

< body >

< table   border = "1"   id = "tblSort" >

< thead   style = "color: red; bgcolor: blank" >

< tr >

< th   onclick = " sortTable(‘tblSort‘,0);"   style = "cursor: pointer" > LastName </ th >

< th   onclick = " sortTable(‘tblSort‘,1,‘int‘);"   style = "cursor: pointer" > Number </ th >

< th   onclick = " sortTable(‘tblSort‘,2,‘date‘);"   style = "cursor: pointer" > Date </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td > A </ td >

< td > 1 </ td >

< td > 5/9/2008 </ td >

</ tr >

< tr >

< td > B </ td >

< td > 3 </ td >

< td > 6/9/2008 </ td >

</ tr >

< tr >

< td > D </ td >

< td > 6 </ td >

< td > 5/4/2008 </ td >

</ tr >

< tr >

< td > E </ td >

< td > -5 </ td >

< td > 5/4/2007 </ td >

</ tr >

< tr >

< td > H </ td >

< td > 34 </ td >

< td > 5/8/2008 </ td >

</ tr >

< tr >

< td > C </ td >

< td > 12 </ td >

< td > 1/4/2018 </ td >

</ tr >

</ tbody >

</ table >

</ body >

</ html >

时间: 2024-10-13 05:01:09

JS实现前台数据格式排序的相关文章

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

  先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的! 介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很

js数组元素由小到大排序实例代码

js数组元素由小到大排序实例代码:有时候需要对数组中的数字进行排序,下面是一段将数组中数字由小到大排序的代码实例,希望能够帮到大家.实例代码如下: var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98]; var len=arr.length; console.log(arr.join(",")); var newarr=[]; for(var i=0;i<len;i++){ newarr.push(Math.min.apply(nu

JS处理前台页面的所有异常

/// <reference path="../../Scripts/jquery-1.4.1-vsdoc.js" /> /// <reference path="yzg.prototype.js" /> /* 作者 : 颜佐光 时间 : 2012-4-5 Email : [email protected] 备注 : 本JS为颜佐光所编写,可以用于任何场景,也可以更改代码,但是不能更改或者去掉作者的名字和备注,否则将追究法律责任. */ (f

通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中  先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数

js 数组排序和算法排序

1.算法排序 a.插入排序 var arr = [23,34,3,4,23,44,333,444]; var arrShow = (function insertionSort(array){ if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){ for (var i = 1; i < array.length; i++) { var key = array[i]; var j = i - 1; while (j >

js数组的sort排序的原理和应用

1.js sort()方法的应用: 首先:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字.比较函数应该具有两个参数 a 和 b,其返回值如下: 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值. 若 a 等于

JS实现ul,li排序效果

<!DOCTYPE html> <html> <head> <title>js列表排序</title> <meta charset="utf-8"> </head> <style type="text/css"> </style> <script type="text/javascript"> window.onload=fun

用sorttable.js对表格进行排序

对表格进行排序的实现步骤: 第一:下载sorttable.js,链接:http://www.kryogenix.org/code/browser/sorttable/,(不需要jquery.js) 第二:导入该sorttable.js,(不需要jquery.js) 第导入:在 table标签添加一个class="sortable". 至此,即可实现正反序的排列 如果想不对某列排序,只要在此列的<th>标签加上class="sorttable_nosort"

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul id="ul1"> <li> <img src="images/1.jpg" width="200" height="150" />&l