文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用sort()函数与文件碎片实现表格的前端排序

2023-06-27 10:43

关注

本篇内容介绍了“怎么用sort()函数与文件碎片实现表格的前端排序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

表格排序在网页的利用也很多,特别是一些信息系统输出一个密密层层的表格给人看,客户肯定会提出表格排序的要求。很多人定式思惟地认为表格的排序一定要通过数据库后端进行交互,使用带 order by asc/desc 的语句去实现,然后再利用 ajax 似乎很完善似得。其实根本就不用与数据库打交道。在前端给出任意一个表格,都能够利用 sort() 函数与文件碎片实现表格的前端排序。在 jquery 里面是有一个 advanceTable 的插件做这件事,但是这个插件相当不好的是什么呢?与平常的插件一样,代码写得天花龙凤,没有任何注释,一点都不好改,而且不能实现于任意表格,任意浏览器。下面给出一种利用    Javascript 兼容 IE6 的原生态、无插件、不连接数据库的方法去实现这个功能。

一、基本目标

在网页中有以下的表格,点击表头的任意一项可以实现排序,再点击实现逆序排列

二、HTML布局

这个不会就没成心思了。 学过网页都知道表格怎样整。唯一注意的是,实现悬停鼠标手型表示,在前后放一个<a ></a>夹着就能够了,不用担心单击会跳转的问题,没有 href 属性就没问题了。为这个表格设置一个id为myTable,便于以后做事。

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" /> 
<title>表格排序</title> 
</head> 
<body> 
<table width="100%" id="myTable"> 
<thead> 
<tr> 
<th onclick="SortTable('myTable',0)"><a >ID</a></th> 
<th onclick="SortTable('myTable',1)"><a >用户名</a></th> 
<th onclick="SortTable('myTable',2)"><a >地点</a></th> 
</tr> 
</thead> 
<tbody> 
<tr> <td>1</td> <td>黄</td> <td>Antwerp</td> </tr> 
<tr> <td>2</td> <td>赵</td> <td>Brussels</td> </tr> 
<tr> <td>3</td> <td>张</td> <td>Netherlands</td> </tr> 
<tr> <td>4</td> <td>李</td> <td>Gierle</td> </tr> 
<tr> <td>5</td> <td>陈</td> <td>London</td> </tr> 
<tr> <td>6</td> <td>李</td> <td>Mechelen</td> </tr> 
<tr> <td>7</td> <td>钱</td> <td>Lier</td> </tr> 
<tr> <td>8</td> <td>唐</td> <td>Luik</td> </tr> 
<tr> <td>9</td> <td>莫</td> <td>北京</td> </tr> 
<tr> <td>10</td> <td>王</td> <td>香港</td> </tr> 
<tr> <td>11</td> <td>陈</td> <td>Lille</td> </tr> 
</tbody> 
</table> 
</body> 
</html> 

三、核心脚本

关键是对 soft(softfunction())排序函数的写作,利用到文件碎片的思想

<script> //这个东西是用来判断是不是逆序 
var IsAsc=true; function SortTable(TableID,Col){ 
IsAsc=!IsAsc; 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0];//能够取到tbody的里的所有节点 
var DataRows=DBody.rows;//能够取到tbody里面的所有行节点,DataRows相当于1个数组 //把援用数组的值存到正常数组操作 
var MyArr=new Array(); 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} //判断上次排序的列和这次是不是为同一列 
if(DBody.CurrentCol==Col){ 
MyArr.reverse();//将数组颠倒 
} else{ 
//javascript要求必须sort(function())
自己写比对函数,写出你认为怎样才算小于、怎样才是大于,怎样才是等于 MyArr.sort( //传过来的对象是MyArr这个数组的任意两个元素tr1与tr2,行1与行2 
function compare(TR1,TR2){ 
var value1,value2; //如果你现在是在排序号的,也就是是在比较ID那一列,最左列,第0列,那末我必须依照数字去处理 if(Col==0){ //取当前行的自定义标签与后一行的自定义标签 
value1=parseInt(TR1.cells[Col].innerHTML); 
value2=parseInt(TR2.cells[Col].innerHTML); 
if(value1<value2) //⑴代表前者小于后者 return ⑴; 
else if(value1>value2) //1代表前者大于后者 
return 1; else //0代表两个值相等 return 0; } //否则,依照字符串来排 else{ //把列中比对单元格里面的值转化成字符串再比较 
value1=TR1.cells[Col].innerHTML+""; value2=TR2.cells[Col].innerHTML+""; //直接调用javascript的中文比对方法,这个方法能够自动比对字符串并且返回相应的结果的 
return value1.localeCompare(value2); } } ); } //创建一个文档碎片,将所有的行都添加进去,相当于一个暂存架,如果直接加到document.body里面,会插入一行,就刷新一次,如果数据多了就会影响用户体验 //先将行全部放在暂存架里面,然后将暂存架里面的行,一起添加到document.body,这样表格只会刷新一次。 //就像你去商店购物,要先将要买的物品(行)全部写在单子上(文档碎片),然后超市全部购买,而不会想到一样东西就去一次 
var frag=document.createDocumentFragment(); for(var i=0;i<MyArr.length;i++){ frag.appendChild(MyArr[i]);//将数组里的行全部添加到文档碎片中 } DBody.appendChild(frag);//将文档碎片中的行全部添加到 body中 DBody.CurrentCol=Col;//记录下当前排序的列 } </script>

备注:如果单元格里面寄存的不是一个正常的值怎样办呢,或单元格里面有一堆东西,你可以为所有单元格赋予一个自定义属性,通过比对这个单元格的自定义属性,以后排序函数的取值改成 TR1.cells[Col].getAttribute("")+""便可,就变成比对这个自定义属性的值了,这类情况多见于动态网页里面的大工程。

“怎么用sort()函数与文件碎片实现表格的前端排序”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯