- 浏览: 452092 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 3124var query:String=ExternalInter ... -
<!DOCTYPE html>很重要
2012-12-31 16:16 125177噩梦开始的源头:之前 ... -
获取行政区划地名地址的简称
2012-12-27 09:33 2268做地图相关的项目就会涉及到地名地址的查询,那么查询 ... -
jsURL编码
2012-11-27 11:03 1148js 对文字进行编码涉及3个函数:escape,encod ... -
scrollHeight、clientHeight ,offsetHeight 区别
2012-11-22 10:00 1545我认为我们想要两个东西: 一是 scroll ... -
图片延迟加载(兼容IE&FF&Chrome)
2012-11-17 14:02 2682经常看到京东,团购有 ... -
获取FireFox下的event
2012-11-14 17:28 928/* 获取FF下当前事件对象 */ function ... -
让title动起来
2012-11-12 17:47 616function newTitle() { v ... -
JS读取本地文件夹和图片异步加载(图片LazyLoad)
2012-11-01 11:52 8684/* 说明:当某一个页面拥有非常多的图片或者使用图片列 ... -
javascript 理论片
2012-10-30 15:12 1546/* 前缀规范 每个局部变量都需要有一个类型前 ... -
一些原理
2012-10-30 14:46 9041 css匹配顺序: - 浏览器CSS匹配不是从左到右进行 ... -
获取DOM对象的当前(current)样式
2012-09-28 17:19 3429/** *获取页面某个元素当前的样式:(譬如获取当前I ... -
javaweb系统的枚举设计
2012-09-24 15:42 3759/* 组件目的: 在java-web程序的研发过程 ... -
http代理
2012-09-20 10:09 1702<%@ page language="j ... -
css文本样式系小结
2012-09-18 17:08 1185超链接带图标和文字, ... -
兼容的带样式的INPUT
2012-09-18 10:21 10907<style> /* 作用描述:给IN ... -
JS获取客户端浏览器基本信息
2012-09-12 15:33 1648/* * 工具类获取: * 客户端浏览器的类型,版本 ... -
css hack积累
2012-09-07 14:57 1140<html xmlns:wfs=" ... -
常用脚本
2012-09-03 18:28 969换行: -word-wrap:break-word; w ... -
解析xml字符串
2012-08-31 09:08 1043工具方法:createXmlDOM /* * ...
相关推荐
sorttable表格排序
sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments...
jquery.sorttable.js库是用于html table 排序插件库
前端sorttable拖拽排序
对网页中的table中的数据排序,目前只能支持IE,对firefox和Opera not surpport
自己独立研究2天结晶,本项目利用Jquery sorttable插件实现,可以实现任意拖拽并保存数据库,思路简单易学,初始化时展示拖拽后的结果。本项目附有数据库,直接附加便可运行操作。如有疑问请联系1096012618
博文链接:https://guoyankun.iteye.com/blog/194780
sorttable-move.rarsorttable-move.rarsorttable-move.rar
NULL 博文链接:https://201201051654.iteye.com/blog/1430087
SortTable.tsx
原生js sortTable对表格进行排列顺序表格递增顺序排列
方便实用的js排序,只需简单操作即可见到效果
NULL 博文链接:https://donald-draper.iteye.com/blog/2361740
本实验演示如果基础的运用 tableSorter 这个jq插件来使普通的table 支持点击标题自动排序
现在验证为 w3c) 如果使用“sorttable_customkey”,这是不兼容的更改 固定支持动态表。 现在可以适应桌子上的变化 改进的 IE 兼容性 大多数主要的初始化都会延迟到用户想要对表进行排序。 sorttable.js 现在对页面...
对表格进行简单的排序
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了表头浮动效果及一些小功能。