《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>
分享到：
相关推荐
【标题】"Javascript表格排序大全"所涉及的知识点主要集中在JavaScript的前端开发技术上，特别是与数据处理和用户界面交互...在实际学习和实践中，应该结合具体的源码和实例来深入理解上述JavaScript表格排序的知识点。
工具则表明这个插件是为了简化表格排序任务而设计的。 “tableSort-jquery”可能是该插件的名称，或者压缩包内的主要文件夹或脚本文件。这通常包含JavaScript文件（如`tableSort.js`）、CSS样式文件（如`tableSort....
本项目名为"jq-表格排序插件"，正如其标题所示，是一个专为表格数据排序设计的轻量级插件。这个插件只关注核心功能——表格排序，避免了额外的复杂性，确保了高效且简洁的实现。 首先，我们需要理解jQuery是如何与...
标签“源码”和“工具”表明这可能涉及到可以直接使用的代码片段或者一个小型的JavaScript库，帮助开发者快速集成表格排序功能。源码可能包含实现排序算法的核心逻辑，而工具则可能是一个封装好的组件，提供API供...
单位表格录入系统源码是专为处理组织或企业内部数据录入、管理和查询而设计的应用程序。该系统的核心功能包括信息表格的录入、列表展示、数据查询以及用户登录信息的修改。接下来，我们将深入探讨这些关键知识点。 ...
【标题】"基于Java的实例源码-网页表格组件 GWT Advanced Table.zip" 提供了一个使用Java编程语言实现的Web应用程序实例，该程序利用Google Web Toolkit (GWT) 创建了一个高级表格组件。GWT是一种开源工具，允许开发...
12. **JavaScript编程**：源码包中的JavaScript文件是实现以上功能的关键，通过阅读源码，开发者可以学习到如何构建这样的组件，以及如何利用jQuery或其他库来实现数据操作和用户交互。 在"bootstrap-table-develop...
源码会定义Exzeitable组件的结构和功能，包括表格渲染、排序、过滤和分页等功能。 2. **样式文件夹**：可能包含`.css`或`.scss`（如果使用Sass）文件，这些文件定义了Exzeitable组件的外观和布局。通过阅读这些文件...
JqGridControl是基于JavaScript的开源网格控件，主要用于在Web应用程序中展示和操作数据。它源自jQuery UI库中的Grid组件，提供了强大的数据展示、编辑和管理功能，是开发人员构建数据密集型Web应用的理想选择。本文...
DisplayTag是一个开源的Java库，专门用于创建复杂的表格展示，常用于Web应用程序中，提供了丰富的功能，如分页、排序、过滤等。在这个主题中，我们将深入探讨JavaScript如何与displayTag标签合作，特别是关于操作...
例如，"datagrid"组件，它提供了表格数据的展示和操作功能，包括排序、分页、过滤等。在源码中，我们可以看到如何通过jQuery选择器和方法来创建和控制DataGrid，以及如何与后台进行数据交互。对于开发者来说，理解...
这个实例开发源码——“ASP实例开发源码-里约奥运金牌奖牌榜程序 asp版.zip”是一个基于ASP技术的应用，用于展示2016年里约奥运会的金牌奖牌榜。通过分析这个程序，我们可以深入理解ASP的基础和动态数据处理。 首先...
**Yahoo JavaScript库 YUI源码详解** Yahoo User Interface (YUI) 是Yahoo公司推出的一款强大的JavaScript库，旨在帮助开发者构建高性能、可维护的Web应用程序。作为一款免费且开源的工具，YUI为开发者提供了丰富的...
Java 源码：网页表格组件 GWT Advanced Table 是一个基于 Google Web Toolkit（GWT）开发的高级表格组件。GWT 是一个用于构建富互联网应用程序（RIA）的开放源码框架，它允许开发者使用 Java 语言来编写客户端的 ...
xSpreadsheet是一款专为网页应用设计的开源在线表格组件，它完全基于JavaScript语言进行开发，旨在提供一种轻量级、易于集成且功能丰富的表格解决方案。在现代Web应用程序中，用户对于数据管理和分析的需求日益增长...
总之，这个源码包是一个很好的学习资源，它展示了如何利用ASP.NET的GridView控件创建具有高级交互功能的网页界面。通过研究和理解这些代码，开发者能够提升自己在ASP.NET开发领域的技能，特别是对于用户界面的定制和...
Element-UI的设计理念是简洁、易用，它的Table组件提供丰富的功能，如分页、排序、筛选、自定义列模板等。 在这个"vue+基于element-ui的表格封装组件"中，开发者可能实现了以下几点： 1. **样式统一**：封装组件的...
【标题】：“小程序源码 ...总结，"小程序源码 RegeditTable.zip"是一个关于微信小程序的开发项目，可能涉及数据管理和表格展示功能，通过分析源码可以学习到小程序的开发技术、数据处理、UI设计等多个方面的知识。
vxe-table是一款开源的Vue表格组件，它提供了丰富的表格功能，包括但不限于数据排序、筛选、分页、合并单元格、拖拽列宽、行列固定、自定义操作等。这个组件不仅易于集成到现有的Vue项目中，而且在性能优化方面也做...
EXTJS是一个广泛使用的JavaScript库，尤其在开发富客户端应用程序时，EXT-1.0是EXTJS的早期版本，它...通过源码学习，我们可以了解EXTJS的内部机制，提升JavaScript编程技能，为构建高效、动态的Web应用程序奠定基础。