js对table排序(类似点击Excel表头排序)

这个星期已经结束了,我总结下这个星期以来的一点小小是收获,以前在项目中,我们需要对表格排序,我想到过两种解决方案:
   第一,用服务器事件来控制排序。优点:可以很好的控制需要排序的内容,在cs代码中通过事件来实现;缺点:那样的话很占用资源,而且效率不高.
   第二,在网上找了些小的js包来实现对Table的排序,优点:排序效率快;缺点:不能满足大多数程序员的需要,经常也会遇到在td中如果有html标签就不能排序了。经过了一段时间的思考和查询资料,在三个6小时工作中,我终于自己写出了一套很好的js对table排序的实例,下面就是这段代码的讲解

   我自己写的这段js有以下几个优点:可以对整数,小数,时间和字符来排序,可以控制需要排序的列,可以克服合并行和合并列的障碍,可以忽视td标签中一切html标签,可以保留原有行和列相应的样式,可以在表头显示当前排序的顺序(顺序或者是倒序)

   该方法名为sortTable(tid,std,col,dtype,this)一共需要传四个参数,tid表示当前需要排序表的id,std表示从第几列开始排序,col表示需要以哪列的数据为依据来排序,dtype表示当前列的数据类型,this直接传入 。
注意:第二个,第三个和第四个参数,第二个参数是从零开始的,比如需要从下面表格的编号为1的开始排序的话,那这个参数应该为2,因为前面是一个合并了行的列。第三个参数就是传入你点击这个表头的时候需要以哪列的数据为依据来排序,比如需要点击下面表头“分数”的列,我们可以依据小数那一列排序,也可以依据字符那一列排序,如果要是通过小数那一列排序这里传入的就应该是3了,如果需要依据字符那一列排序这里传入的就是4了(从0开始)。第四个参数就是当前需要排序列的数据类型,可以传入4个值:什么都不传,int,float,date。除了以上这些用法外,有一点需要注意,就是如果你对表尾的合并行不需要排序的话,需要设置不需要排序行的class='cols',这个是固定的,不允许在表的中间行使用class='cols'。如果依据时间排序,需要标准的yyyy年mm月dd日,yyyy-mm-dd,yyyy/mm/dd这三种形式 。在排序的列中的数据一定要是标准的和传入的数据类型一致,否则排序可能有错误,如果不允许对56.6sdfasdf进行float排序,这个结果可能不正确,也没有意义。

 

序号 出生年月 年龄 分数
一般 基础
1 1956-08-0215 56.7 aaa
2 1989-02-0143 98.2 ggg
3 1987-02-2323 75 bbb
4
1977-03-03
34 69.8 ddd
5 1943年03月0399 56.8 ccc
6 2010/08/02
21
77.7 eee
统计
总结

 

   以上这个表格是我进行各种测试的时候使用的,在IE6,7,8,9和火狐中没有任何问题(但是如果要是在IE6中使用的话,不能简单引用,加上charset="gb2312",这是因为IE6对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。

   另外需要引入一个样式,也可以自己修改样式。

 

   下载地址如下:点击下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加<thead> 3、排序的内容加<tbody> 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; $$A.forEach([ ["idNum", { type: "int" }],//排序对象(对应列的id) ["idTitle", { index: 1 }], ["idExt", { index: 1, property: "_ext" }], ["idAddtime", { index: 2, type: "date" }], ["idSize", { index: 3, property: "_order", type: "int" }], ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], ["idRadio", { index: 5, type: "bool", value: SetCheck }] ], function (arr){ var o = $$(arr[0]), order = to.creat(arr[1]); order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } order.onEnd = function(){ o.className = this.desc ? "desc" : "asc";//设置样式 this.desc = !this.desc;//取反排序 } o.onclick = function(){ to.sort(order, odID); } arrOrder.push(o);//记录排序项目(这里主要用来设置样式) }); [removed] 7、【排序对象】 属性 默认值//说明 index: 0,//td索引 property: "innerHTML",//获取数据的属性 type: "string",//比较的数据类型 desc: true,//是否按降序 compare: null,//自定义排序函数 value: null,//自定义取值函数 repair: this._repair,//是否解决checkbox和radio状态恢复bug onBegin: function(){},//排序前执行 onEnd: function(){}//排序后执行 */ //完整的示例 //<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //<html> //<head> //<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //<title>Table 排序</title> //[removed][removed] //</head> //<body> //<style type="text/css"> //.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;} //.odTable thead {background-color:#ebebeb;} //.odTable span {color:#333;padding-right:15px;cursor:pointer;} //.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;} //.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);} //</style> //<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable"> // <thead> // <tr> // <td align="center"><span id="idNum">ID</span></td> // <td> <span id="idTitle">名称</span> / <span id="idExt">类型</span></td> // <td width="100" align="center"><span id="idAddtime">上传时间</span></td> // <td width="50" align="center"><span id="idSize">大小</span></td> // <td width="30" align="center"><span id="idCheckbox">C</span></td> // <td width="30" align="center"><span id="idRadio">R</span></td> // </tr> // </thead> // <tbody> // <tr> // <td align="center">1</td> // <td _ext="htm">new.htm</td> // <td align="center">2008/9/12</td> // <td align="right" _order="433244">423.09 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">2</td> // <td _ext="js">Scroller.js</td> // <td align="center">2008/9/23</td> // <td align="right" _order="2560">2.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">3</td> // <td _ext="js">AlertBox.js</td> // <td align="center">2008/9/23</td> // <td align="right" _order="3563">3.48 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">4</td> // <td _ext="xml">1.xml</td> // <td align="center">2008/10/4</td> // <td align="right" _order="11397">11.13 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">5</td> // <td _ext="xml">4.xml</td> // <td align="center">2008/10/4</td> // <td align="right" _order="108">108 b</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">6</td> // <td _ext="htm">news.htm</td> // <td align="center">2008/10/4</td> // <td align="right" _order="14074">13.74 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">7</td> // <td _ext="js">function.js</td> // <td align="center">2008/10/4</td> // <td align="right" _order="2844">2.78 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">8</td> // <td _ext="mp3">神秘园 - Nocturne.mp3</td> // <td align="center">2008/9/20</td> // <td align="right" _order="3111293">2.97 M</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">9</td> // <td _ext="doc">详细功略+剧情流程(一).doc</td> // <td align="center">2009/2/2</td> // <td align="right" _order="63488">62 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // <tr> // <td align="center">10</td> // <td _ext="doc">详细功略+剧情流程(二).doc</td> // <td align="center">2009/2/2</td> // <td align="right" _order="164352">160.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // </tbody> //</table> //<br /> //有中文的先排前面,再按时间倒序,ID倒序排序: //<input name="" type="button" value="Sort" id="idBtn" /> //[removed] //var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; //$$A.forEach([ // ["idNum", { type: "int" }], // ["idTitle", { index: 1 }], // ["idExt", { index: 1, property: "_ext" }], // ["idAddtime", { index: 2, type: "date" }], // ["idSize", { index: 3, property: "_order", type: "int" }], // ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], // ["idRadio", { index: 5, type: "bool", value: SetCheck }] //], function (arr){ // var o = $$(arr[0]), order = to.creat(arr[1]); // order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } // order.onEnd = function(){ // o.className = this.desc ? "desc" : "asc";//设置样式 // this.desc = !this.desc;//取反排序 // } // o.onclick = function(){ to.sort(order, odID); } // arrOrder.push(o);//记录排序项目(这里主要用来设置样式) //}); //$$("idNum").onclick(); //////////////////////////////////////////////////////////////////////// //var od1 = to.creat({ index: 1, onEnd: ClearCss, // compare: function(value1, value2) { // var re = /[\u4E00-\u9FA5]/, v1 = re.test(value1), v2 = re.test(value2); // return v1 == v2 ? 0 : (v1 ? 1 : -1); // } // }) // ,od2 = to.creat({ index: 2, type: "date" }) ,od3 = to.creat({ type: "int" }); //$$("idBtn").onclick = function(){ to.sort(od1, od2, od3); } //[removed] //</body> //</html>
### 回答1: 在 JavaScript 中导出 Excel 文件,可以使用第三方库或者使用浏览器的内置功能来实现。 一种常见的方法是使用第三方库,例如 SheetJS。使用该库可以轻松地将 JavaScript 数据导出为 Excel 文件。下面是一个示例: ```javascript import * as XLSX from 'xlsx'; // 定义要导出的数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', 25, '女'], ['王五', 30, '男'] ]; // 将数据转换为二进制数据 const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); const dataBlob = new Blob([XLSX.write(wb, { type: 'binary' })], { type: 'application/octet-stream' }); // 导出 Excel 文件 const fileName = 'my-file.xlsx'; const a = document.createElement('a'); a.href = URL.createObjectURL(dataBlob); a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); ``` 另一种方法是使用浏览器的内置功能,例如使用 HTML 表格的 `table` 元素。这种方法更简单,但不如第三方库功能强大。下面是一个示例: ```javascript // 定义要导出的数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', 25, '女'], ['王五', 30, '男'] ]; // 创建 HTML 表格 const table = document.createElement('table'); for (const row of data) { const tr = document.createElement('tr'); for (const cell of row) { const td = document.createElement('td'); td.innerHTML = cell ### 回答2: JavaScript 可以通过各种库和插件来实现导出 Excel 文件的功能。在这里我将以 SheetJS 这一常用库为例来说明。 首先,你需要在你的项目中引入 SheetJS 库。你可以通过在 HTML 文件中添加以下代码来引入该库: ```html <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> ``` 然后,在你的 JavaScript 文件中,你可以使用 SheetJS 提供的 API 来实现导出 Excel 文件的功能。以下是一个简单的示例: ```javascript function exportToExcel(data, fileName) { // 创建一个 Workbook 对象 var workbook = XLSX.utils.book_new(); // 将数据转换为一个 Worksheet 对象 var worksheet = XLSX.utils.json_to_sheet(data); // 将 Worksheet 对象添加到 Workbook 中 XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 生成文件并下载 XLSX.writeFile(workbook, fileName + ".xlsx"); } var data = [ { name: "张三", age: 20, city: "北京" }, { name: "李四", age: 25, city: "上海" }, { name: "王五", age: 30, city: "广州" } ]; exportToExcel(data, "用户信息"); ``` 在上面的代码中,我们首先创建了一个 Workbook 对象。然后,使用 `XLSX.utils.json_to_sheet` 方法将数据转换为一个 Worksheet 对象。接下来,将 Worksheet 对象添加到 Workbook 中,然后使用 `XLSX.writeFile` 方法生成并下载 Excel 文件。 这样,当你调用 `exportToExcel` 函数并传入相应的数据和文件名时,就可以导出 Excel 文件了。在此示例中,我们将一个包含用户信息的数组(data)导出为名为 "用户信息.xlsx" 的 Excel 文件。 需要注意的是,由于 SheetJS 是运行在客户端浏览器中的 JavaScript 库,导出 Excel 文件的功能依赖于用户的浏览器环境,因此可能在某些浏览器或设备上无法正常工作。 ### 回答3: JS导出Excel是一种将数据导出为Excel文件格式的操作。这在网页应用中非常常见,可以帮助用户将数据以Excel的形式保存下来,方便日后的数据处理与分析。 在实现JS导出Excel的过程中,通常会使用到一些第三方库或插件,如ExcelJS、SheetJS等。这些库提供了丰富的API,使得在前端页面上可以通过调用相关方法来生成Excel文件。 在导出Excel时,我们首先需要准备好要导出的数据。这些数据可以是从服务器获取的数据,也可以是前端页面上的表格数据等。然后,根据具体的需求,可以对数据进行一些处理,如排序、筛选等。接着,调用相应的API将数据转换为Excel格式,并设置相关的样式、表头等。最后,通过下载链接或以二进制形式返回给用户,使用户可以点击下载并保存为本地的Excel文件。 实现JS导出Excel需要考虑浏览器的兼容性问题。不同的浏览器对文件下载的处理方式有所不同,使用不同的API进行处理也会有差异。因此,在实际开发过程中,我们需要对不同浏览器的兼容性进行测试和处理,以确保用户能够正常地导出Excel文件。 之,JS导出Excel是一种非常实用的功能,可以帮助用户方便地将数据保存为Excel文件,提高数据的可视化和可操作性。通过合理使用相关的库和API,我们可以在网页应用中轻松地实现这一功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值