`
61party
  • 浏览: 1047958 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JavaScript 表格排序 －《JavaScript高级程序设计》源码

 
阅读更多

《JavaScript高级程序设计》，英文书名为《Professional JavaScript for Web Developers》中的源码。

书是本绝对的好书，是《JavaScript权威指南》很好的补充。

第十二章，表格排序的原码，支持字符串，整形，浮点型，日期型，其它如图标排序。

原码直接下载地址：http://media.wiley.com/product_ancillary/88/07645790/DOWNLOAD/579088CodeExamples.zip

解压后，在文件夹 Chapter 12 里。

一、字符串，整形，浮点型，日期型排序

<html>
<head>
<title>TableSortExample</title>
<scripttype="text/javascript">

functionconvert(sValue,sDataType){
switch(sDataType){
case"int":
returnparseInt(sValue);
case"float":
returnparseFloat(sValue);
case"date":
returnnewDate(Date.parse(sValue));
default:
returnsValue.toString();

}
}

functiongenerateCompareTRs(iCol,sDataType){

returnfunctioncompareTRs(oTR1,oTR2){
varvValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
varvValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);

if(vValue1<vValue2){
return-1;
}elseif(vValue1>vValue2){
return1;
}else{
return0;
}
};
}

functionsortTable(sTableID,iCol,sDataType){
varoTable=document.getElementById(sTableID);
varoTBody=oTable.tBodies[0];
varcolDataRows=oTBody.rows;
varaTRs=newArray;

for(vari=0;i<colDataRows.length;i++){
aTRs[i]=colDataRows[i];
}

if(oTable.sortCol==iCol){
aTRs.reverse();
}else{
aTRs.sort(generateCompareTRs(iCol,sDataType));
}

varoFragment=document.createDocumentFragment();
for(vari=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
oTable.sortCol=iCol;
}

</script>
</head>
<body>
<p>Clickonthetableheadertosortinascendingorder.</p>
<tableborder="1"id="tblSort">
<thead>
<tr>
<thonclick="sortTable('tblSort',0)"
style="cursor:pointer">LastName</th>
<thonclick="sortTable('tblSort',1)"
style="cursor:pointer">FirstName</th>
<thonclick="sortTable('tblSort',2,'date')"
style="cursor:pointer">Birthday</th>
<thonclick="sortTable('tblSort',3,'int')"
style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>

二、带图标的排序

<html>
<head>
<title>TableSortExample</title>
<scripttype="text/javascript">

functionconvert(sValue,sDataType){
switch(sDataType){
case"int":
returnparseInt(sValue);
case"float":
returnparseFloat(sValue);
case"date":
returnnewDate(Date.parse(sValue));
default:
returnsValue.toString();

}
}

functiongenerateCompareTRs(iCol,sDataType){

returnfunctioncompareTRs(oTR1,oTR2){
varvValue1,vValue2;

if(oTR1.cells[iCol].getAttribute("value")){
vValue1=convert(oTR1.cells[iCol].getAttribute("value"),
sDataType);
vValue2=convert(oTR2.cells[iCol].getAttribute("value"),
sDataType);
}else{
vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,
sDataType);
vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,
sDataType);
}

if(vValue1<vValue2){
return-1;
}elseif(vValue1>vValue2){
return1;
}else{
return0;
}
};
}

functionsortTable(sTableID,iCol,sDataType){
varoTable=document.getElementById(sTableID);
varoTBody=oTable.tBodies[0];
varcolDataRows=oTBody.rows;
varaTRs=newArray;

for(vari=0;i<colDataRows.length;i++){
aTRs[i]=colDataRows[i];
}

if(oTable.sortCol==iCol){
aTRs.reverse();
}else{
aTRs.sort(generateCompareTRs(iCol,sDataType));
}

varoFragment=document.createDocumentFragment();
for(vari=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
oTable.sortCol=iCol;
}

</script>
</head>
<body>
<p>Clickonthetableheadertosort.</p>
<tableborder="1"id="tblSort">
<thead>
<tr>
<thonclick="sortTable('tblSort',0)"style="cursor:pointer">Type</th>
<thonclick="sortTable('tblSort',1)"style="cursor:pointer">Filename</th>
</tr>
</thead>
<tbody>
<tr>
<tdvalue="doc"><imgsrc="images/wordicon.gif"/></td>
<td>MyResume.doc</td>
</tr>
<tr>
<tdvalue="xls"><imgsrc="images/excelicon.gif"/></td>
<td>FallBudget.xls</td>
</tr>
<tr>
<tdvalue="pdf"><imgsrc="images/acrobaticon.gif"/></td>
<td>Howtobeabetterprogrammer.pdf</td>
</tr>
<tr>
<tdvalue="doc"><imgsrc="images/wordicon.gif"/></td>
<td>MyOldResume.doc</td>
</tr>
<tr>
<tdvalue="txt"><imgsrc="images/notepadicon.gif"/></td>
<td>NotesfromMeeting.txt</td>
</tr>
<tr>
<tdvalue="zip"><imgsrc="images/zippedfoldericon.gif"/></td>
<td>Backups.zip</td>
</tr>
<tr>
<tdvalue="xls"><imgsrc="images/excelicon.gif"/></td>
<td>SpringBudget.xls</td>
</tr>
<tr>
<tdvalue="doc"><imgsrc="images/wordicon.gif"/></td>
<td>JobDescription-WebDesigner.doc</td>
</tr>
<tr>
<tdvalue="pdf"><imgsrc="images/acrobaticon.gif"/></td>
<td>SavedWebPage.pdf</td>
</tr>
<tr>
<tdvalue="doc"><imgsrc="images/wordicon.gif"/></td>
<td>Chapter1.doc</td>
</tr>
</tbody>
</table>
</body>
</html>

分享到：
| struts1.x tag 引起的 form 只生成id属性 ...
评论
发表评论

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

相关推荐

    JAVA上百实例源码以及开源项目源代码

    Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB来模拟银行ATM...

    JAVA上百实例源码以及开源项目

    笔者当初为了学习JAVA，收集了很多经典源码，源码难易程度分为初级、中级、高级等，详情看源码列表，需要的可以直接下载！ 这些源码反映了那时那景笔者对未来的盲目，对代码的热情、执着，对IT的憧憬、向往！此时此...

    家教毕业设计源码-better_tutor_v3:Better_tutor_v3

    家教毕业设计源码导师追踪器 Tutor Tracker 是一款用于 Web 的开源 JavaScript 应用程序，它提供了一个简单的、可自定义的 UI，用于与 Google 表格交互，作为简化 TES Tutor 工作流程的一种方式。 UI 允许导师编辑、...

    PHP开发实战1200例源码

    实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r（$_ENV） 73 实例042 使用可变变量输出“I Like PHP！” 73 ...

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料；本资料仅用于学习。 【课程内容】 第1周 开课介绍 python发展介绍 第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if ...

    asp.net知识库

    正式发布表达式计算引擎WfcExp V0.9(附源码) 运算表达式类的原理及其实现 #实现的18位身份证格式验证算法 身份证15To18 的算法(C#) 一组 正则表达式 静态构造函数 忽略大小写Replace效率瓶颈IndexOf 随机排列算法 ...

    PHP和MySQL Web开发第4版pdf以及源码

    4.4.1 字符串的排序：strcmp()、strcasecmp()和strnatcmp() 4.4.2 使用strlen()函数测试字符串的长度 4.5 使用字符串函数匹配和替换子字符串 4.5.1 在字符串中查找字符串：strstr()、strchr()、strrchr()和...

    java开源包8

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包1

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包10

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    XML越来越热，关于XML的基础教程网络上也随处可见。..., 使用逗号分隔排序 (TITLE,AUTHOR,EMAIL)&gt; MYFILE元素必须依次包含TITILE,AUTHOR,EMAIL三个子元素 | 使用"|"表示或者 (TITLE | AUTHOR | EMAIL)&gt; MYFILE元素...

    java开源包11

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包2

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包3

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包6

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包5

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包4

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包7

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

    java开源包9

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...

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