- 浏览: 458019 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
JS操作XMLDOM(遍历和打印) -
lliiqiang:
我这边只要出现图表组件就报告2032号错误。
Flex 出现 Error #2032 是什么意思 -
全保生:
感谢!方法一:(已确认 可行)String username ...
jsp 的url传参中文乱码问题解决办法 -
dy804731771:
谢谢您的分享,对我有帮助
兼容的带样式的INPUT -
huang305585796:
火影头像好屌
FusionCharts统计图导出为图片或pdf
#sortTable.js
/* 说明: 1. 该组件用于将一个普通的table,变成一个可以排序的table,同时可以添加奇数偶数行的样式(支持自定义) 2. JSLogger.js 是一个记录日志的组件,不用的话,可以将类似JSLogger的代码全部删掉,不会影响当前组件。 3. 兼容:IE7 8 9,FF,chorme */ //缓存table数据的对象 //使用table的ID作为属性进行访问 var tableMap = {}; /** * 更新table的方法 * 更新后支持:奇偶样式(),表头排序 *@param tableId 表的ID *@param config 配置信息 * - widths 各个列的宽度数组 默认[200,200] * - oldEven 奇偶样式数据,默认["old","even"]\ * - sortType 排序类型:txt文本,int数值类型 默认都是文本排序 **/ function updateTable(tableId,config){ config = config ||{}; config.widths = config.widths ||[200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200];//默认200px宽度 config.sortType = config.sortType || ["txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt"]; config.oldEven = config.oldEven ||["sort_old","sort_even"];//默认奇偶样式 var tableObj = document.getElementById(tableId); if(tableObj==null){return;} //是否需要缓存数据:如果没有缓存数据,则进行如下操作 if(!!tableMap[tableId]==false){ var rows = tableObj.rows; var len = rows.length; for(var i=1;i<len;i++){ var row = rows[i]; if(i%2==0){ row.className = config.oldEven[0]; row.classNameOld = config.oldEven[0]; }else{ row.className = config.oldEven[1]; row.classNameOld = config.oldEven[1]; } } JSLogger.log("缓存table"); //tableObj.className="sortTable"; tableObj.setAttribute("cellpadding","0"); tableObj.setAttribute("cellspacing","0"); tableObj.setAttribute("border","0"); var tempArr = []; for(var i=0;i<len;i++){ var row = rows[i]; var rowArr = []; if(i>0){//第一行不拷贝 var cells = row.cells; for(var k=0;k<cells.length;k++){ rowArr.push(cells[k].innerHTML);//只保存td的html } tempArr.push(rowArr); } } tableMap[tableId] = tempArr; JSLogger.log(tempArr,true); //给table的head添加时间监听 JSLogger.log("给table的head添加事件监听"); var head = rows[0]; var cells = head.cells; for(var j=0;j<cells.length;j++){ var cell = cells[j]; //添加排序图标 var sortSpan = document.createElement("SPAN"); sortSpan.className = "sort_asc_def"; sortSpan.setAttribute("name","sortSpan"); sortSpan.setAttribute("sortType",config.sortType[j]); sortSpan.innerHTML = " "; sortSpan.setAttribute("tableId",tableId);//存储表ID sortSpan.setAttribute("colIndex",j);//存储列索引 sortSpan.setAttribute("sort","desc");//存储排序顺序 cell.appendChild(sortSpan); cell.className="sort_head"; if(config.widths){ cell.style.width = (config.widths[j]+"px" || ""); } //排序图标添加click点击事件:兼容IE\FF\Chrome if(window.attachEvent){ sortSpan.attachEvent("onclick",function (sortSpan,config) { return function (){ sortTable(sortSpan,config); } }(sortSpan,config)); //表头不可以选中 cell.attachEvent("onselectstart",function (cell) { return function (){ return false; } }(cell)); }else{//FF ,chrome sortSpan.addEventListener("click",function (sortSpan,config) { return function (){ sortTable(sortSpan,config); } }(sortSpan,config),false); //表头不可以选中:在css样式中实现 } } } } /*排序的方法 *@param tdDom 当前TD对象 *@param config 配置信息(详细说明见updateTable方法) * */ function sortTable(tdDom,config){ //JSLogger.log("tdDom.tableId = "+tdDom.getAttribute("tableId") +",tdDom.colIndex = "+tdDom.getAttribute("colIndex"));//+",innerHTML = "+tdDom.innerHTML); JSLogger.log("sort = "+tdDom.getAttribute("sort")+",sortType = "+tdDom.getAttribute("sortType")); var tableId = tdDom.getAttribute("tableId"); var sort = tdDom.getAttribute("sort"); var colIndex = tdDom.getAttribute("colIndex"); var table = document.getElementById(tableId); var sortType = tdDom.getAttribute("sortType");//txt文字排序/int数值排序 //var rows = []; //除第一样以外,全部删除 while(table.rows[1]){ //rows.push(table.rows[1]); table.deleteRow(1); } setTimeout(function(){ //从缓存中获取原始table的所有行 var rowsData = tableMap[tableId]; var colLen = rowsData[0].length; var JSON ={colIndex:colIndex,sort:sort,sortType:sortType}; rowsData = sortRows(rowsData,JSON);//; //JSLogger.log(rowsData[0][0]); for(var i=0;i<rowsData.length;i++){ var row = table.insertRow(-1); //奇偶样式 if(i%2==1){ row.className = config.oldEven[0]; row.setAttribute("classNameOld",config.oldEven[0]); }else{ row.className = config.oldEven[1]; row.setAttribute("classNameOld",config.oldEven[1]); } //注入td内容 for(var j=0;j<colLen;j++){ var cell = row.insertCell(-1); cell.innerHTML = rowsData[i][j]; } } },0); //重置所有排序图标 :name="sortSpan" var spanArr = document.getElementsByTagName("span"); for(var k=0;k<spanArr.length;k++){ var span = spanArr[k]; if("sortSpan"==span.getAttribute("name") && "sort_desc"==span.className){ span.className = "sort_desc_dis"; }else if("sortSpan"==span.getAttribute("name") && "sort_asc"==span.className){ span.className = "sort_asc_dis"; } } //最后重置排序 if("desc"==sort){ tdDom.setAttribute("sort","asc"); tdDom.className = "sort_desc"; }else{ tdDom.setAttribute("sort","desc"); tdDom.className = "sort_asc"; } } /* *自定义数组排序方法 *@param rows 一个table的所有行的数据 *@param JSON 参数 * -colInex 列索引 按照那个列进行排序 * -sort 正序还是反序 asc/desc * -sortType txt文本排序/int 数值排序 */ function sortRows(rows,JSON){ var colIndex = JSON.colIndex; var sort = JSON.sort; var sortType = JSON.sortType; //JSLogger.log(rows,true); JSLogger.log("colIndex = "+colIndex+",sort = "+sort+",sortType = "+sortType); rows = rows.sort(function(row1,row2){ if("txt"==sortType){//文本排序 if("asc"==sort){ if((row1[colIndex]>row2[colIndex])===true){return 1;} else if(( row1[colIndex]<row2[colIndex])===true){return -1;} else{return 0;} }else{ if((row1[colIndex]>row2[colIndex])===true){return -1;} else if(( row1[colIndex]<row2[colIndex])===true){return 1;} else{return 0;} } }else{//数值排序 if("asc"==sort){ return parseFloat(row1[colIndex])- parseFloat(row2[colIndex]); }else{ return -(parseFloat(row1[colIndex])- parseFloat(row2[colIndex])); } } }); return rows; }
附件是完整代码和实例。
欢迎指正
愤怒的jser - 好东西就要共享
发表评论
-
Flex获取当前地址栏和URL参数
2013-03-11 11:33 3163var query:String=ExternalInter ... -
<!DOCTYPE html>很重要
2012-12-31 16:16 125257噩梦开始的源头:之前 ... -
获取行政区划地名地址的简称
2012-12-27 09:33 2331做地图相关的项目就会涉及到地名地址的查询,那么查询 ... -
jsURL编码
2012-11-27 11:03 1182js 对文字进行编码涉及3个函数:escape,encod ... -
scrollHeight、clientHeight ,offsetHeight 区别
2012-11-22 10:00 1583我认为我们想要两个东西: 一是 scroll ... -
图片延迟加载(兼容IE&FF&Chrome)
2012-11-17 14:02 2730经常看到京东,团购有 ... -
获取FireFox下的event
2012-11-14 17:28 969/* 获取FF下当前事件对象 */ function ... -
让title动起来
2012-11-12 17:47 651function newTitle() { v ... -
JS读取本地文件夹和图片异步加载(图片LazyLoad)
2012-11-01 11:52 8748/* 说明:当某一个页面拥有非常多的图片或者使用图片列 ... -
javascript 理论片
2012-10-30 15:12 1583/* 前缀规范 每个局部变量都需要有一个类型前 ... -
一些原理
2012-10-30 14:46 9381 css匹配顺序: - 浏览器CSS匹配不是从左到右进行 ... -
获取DOM对象的当前(current)样式
2012-09-28 17:19 3471/** *获取页面某个元素当前的样式:(譬如获取当前I ... -
javaweb系统的枚举设计
2012-09-24 15:42 3807/* 组件目的: 在java-web程序的研发过程 ... -
http代理
2012-09-20 10:09 1763<%@ page language="j ... -
css文本样式系小结
2012-09-18 17:08 1234超链接带图标和文字, ... -
兼容的带样式的INPUT
2012-09-18 10:21 10959<style> /* 作用描述:给IN ... -
JS获取客户端浏览器基本信息
2012-09-12 15:33 1726/* * 工具类获取: * 客户端浏览器的类型,版本 ... -
css hack积累
2012-09-07 14:57 1181<html xmlns:wfs=" ... -
常用脚本
2012-09-03 18:28 1006换行: -word-wrap:break-word; w ... -
解析xml字符串
2012-08-31 09:08 1074工具方法:createXmlDOM /* * ...
相关推荐
**sorttable表格排序** 在网页开发中,展示数据时经常使用到表格(Table)这一元素。为了提升用户体验,提供一种方便的数据浏览方式,sorttable是一个非常实用的JavaScript库,它允许用户通过点击表头实现表格数据...
这可以通过在控制器中定义函数并将其传递给ng-sorttable组件来实现。 ### 6. 表格样式与交互 为了提供更好的用户体验,ng-sorttable可能包含了CSS类,用于改变表头的样式,比如箭头图标来指示当前的排序状态。此外...
虽然这些框架通常有自己的数据管理和UI更新机制,但sorttable作为一个独立的排序工具,仍然可以在组件中发挥其优势,尤其是对于不需要完整框架功能的轻量级项目。 总之,sorttable库为前端开发者提供了一个简单、...
这里,`onclick`事件绑定了`sortTable`函数,用于处理排序逻辑。接下来,我们需要编写JavaScript代码。 在`sort.js`文件中,我们定义`sortTable`函数: ```javascript function sortTable(n) { var table, rows, ...
请遵循 运行npm run test命令来测试您的代码; 运行npm run test:only -- -n以忽略linter的方式运行快速测试; 运行npm run test:only -- -l以忽略控制台的方式在控制台中运行带有附加信息的快速测试。...
th.addEventListener('click', sortTable); }); ``` 2. **排序逻辑**:在`sortTable`函数中,我们需要获取当前点击的列索引,以及表格中的所有数据行。然后根据选择的排序方式(升序或降序)对数据进行排序。例如...
`DragTable.js` 文件则是实现表格拖动功能的组件。在JavaScript中,我们可以利用`mousedown`、`mousemove`和`mouseup`事件来实现拖放操作。当用户按下鼠标并在表格行上移动时,脚本会捕捉这些事件并更新行的位置。...
9. **富文本编辑器验证**:`editor.js`可能是一个富文本编辑器组件,它可能包含了对用户输入的HTML内容的验证,以确保安全性和合规性。 10. **数据集操作验证**:`dataset.js`可能处理的是数据集合的验证,比如在...
10. **框架与库**:许多前端框架和库(如jQuery、Bootstrap、Angular、Vue.js、React等)提供了现成的表格组件,它们通常包含了表头排序的功能,使用这些组件可以简化开发流程。 理解并熟练应用上述知识点,可以...
至于“工具”标签,可能意味着这个脚本是一个可复用的组件,可以集成到其他项目中,以快速实现标题固定和排序功能。 总的来说,“标题固定和排序”是Web开发中的常见需求,`tbsort.js`可能是解决这个问题的一个实用...
此外,还可以考虑使用现代前端框架,如React、Vue或Angular,它们提供了更高级的数据绑定和组件化功能,使得这样的交互实现更加简洁和高效。 总之,实现表格排序功能涉及到HTML、CSS和JavaScript的综合运用,通过...
7. `Treeview.zip`: 直接以“Treeview”命名,很可能包含了一个JavaScript树视图组件。 8. `tigra_tree_menu.zip`: 另一个Tigra相关的菜单库,可能提供了树状菜单的实现。 树形菜单的实现通常涉及以下JavaScript...
在这个例子中,`Sortable`组件接收`list`属性作为需要排序的数据,`onSortEnd`回调则在排序结束后被调用,你可以在这里更新你的数据源以反映新的顺序。 ### 4. 自定义样式和行为 React Sortable 允许你通过CSS样式...
在JavaScript编程中,实现多级排序以及动态改变表格宽度和高度是常见的...确保代码具有良好的可维护性和性能,可以考虑使用现有的前端框架,如React或Vue,它们提供了更丰富的组件和生命周期管理,能简化这部分工作。
为了提高代码的可复用性和适应性,可以封装成一个插件或组件,支持自定义排序逻辑和兼容各种浏览器。同时,考虑使用ES6的类和模块化来提升代码组织性。 通过以上介绍,你已经了解了JS中实现表格排序的基本思路和...