`
loven_11
  • 浏览: 58022 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js的table排序,支持多浏览器，多列同时排序，自定义排序

浏览器JavaScriptprototypeCC++
阅读更多

简单且轻松自定义排序规则：

1.initSortTable(asc,desc)；是初始化排序预操作（其实就是传入两张图片地址，标识排序方向的）

2.在需要排序的表格table上添加监听事件，sortColumn()；此处被我限定click事件作用在th对象上才有效的。

3.需要按列制定排序规则，即在th上添加type类型，例如<th type='string'>1</th>; 如果想要二重排序的话写成<th type='string,0'>1</th>,0标识列号，即本列排序时如果排序内容相同，则按照第零列排序。

4.这里的排序规则可以自由定义，当然目前的代码中只是传入了td单元格内容innerText值，也就是显示的文字。（不过你也可以修改下，传入一个对象）

 

可能文字描述不直观，附上一个例子吧：

<html>	
	<head>
		<title>sorttest</title>
		<script type="text/javascript" src="javascript/table-sort.js"></script>
	</head>
	<script >
		function init(){
			initSortTable("images/tablesorter/desc.gif","images/tablesorter/asc.gif");
		}
	</script>
	<body onload='init();'>
		<table onclick="sortColumn(event)">
			<thead>
				<tr>
					<th NOWRAP type="Number">ID</th>
					<th NOWRAP type="myDate,0">Date</th>
					<th NOWRAP type="str,0">Org</th>
					<th NOWRAP type="str,0">Dest</th>
					<th NOWRAP type="bool,0">Flip</th>
					<th NOWRAP type="ip,0">IP</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td NOWRAP><%=id %></td>
					<td nowrap><%=date %></td>
					<td NOWRAP><%=org %></td>
					<td NOWRAP><%=dest %></td>
					<td NOWRAP><%=flip %></td>
					<td NOWRAP><%=ip %></td>
				</tr>
			</tbody>
		<table>
	</body>
</html>

 

 

具体代码如下，里面包含了一下我自定义处理，比较撮。

var dom = (document.getElementsByTagName) ? true : false;
    var ie5 = (document.getElementsByTagName && document.all) ? true : false;
    var arrowUp, arrowDown;
    var mydefinedChar = "*";
    
//if (ie5 || dom)
    //initSortTable();
    function initSortTable(asc,desc) {   
        arrowUp = document.createElement("SPAN"); 
        arrowUp.style.display = "inline";
        var img = document.createElement("Img");
        img.src = asc;
        arrowUp.appendChild(img);
        arrowUp.className = "arrow";
        arrowDown = document.createElement("SPAN");
        arrowDown.style.display = "inline";
        img = document.createElement("Img");
        img.src = desc;
        arrowDown.appendChild(img);
        arrowDown.className = "arrow";
    }   
    function sortTable(tableNode, nCol, bDesc, sType) {   
        var tBody = tableNode.tBodies[0];
        var trs = tBody.rows;
        var trl= trs.length;
        var a = new Array();
        for (var i = 0; i < trl; i++) {   
            a[i] = trs[i];
        }   
        var start = new Date;
        window.status = "Sorting data...";
        a.sort(compareByColumn(nCol,bDesc,sType));
        window.status = "Sorting data done";
        for (var i = 0; i < trl; i++) {   
            tBody.appendChild(a[i]);
            window.status = "Updating row " + (i + 1) + " of " + trl +   
                " (Time spent: " + (new Date - start) + "ms)";
        }   
        // check for onsort   
        if (typeof tableNode.onsort == "string")   
            tableNode.onsort = new Function("", tableNode.onsort);
        if (typeof tableNode.onsort == "function")   
            tableNode.onsort();
    }   
    function CaseInsensitiveString(s) {   
        return String(s).toUpperCase();
    }   
    function parseDate(s) {   
        return Date.parse(s.replace(/\-/g, '/'));
    }   
    function toNumber(s) {   
        return Number(s.replace(/[^0-9\.]/g, ""));
    }   
    function Percent(s) {   
        return Number(s.replace("%", ""));
    }   
    function dostr(s){
    	return String(s).toUpperCase();
    }
    function donum(val){
		var s1 = "";
		var s2 = "";
		var s = val;
		try{
	    	if(val.indexOf("(")!=-1){
				s = val.substring(0, val.indexOf("("));
				s1 = val.substring(val.indexOf("(")+1, val.indexOf(")"));
			}
			if(s.indexOf("+")!=-1){
				s = s.substring(0,s.indexOf("+"));
			}
			if(s1 != "") {
				var splitChar = "";
				if(s1.indexOf("-")!=-1) splitChar = "-";
				else if(s1.indexOf("+")!=-1) splitChar = "+";
				else if(s1.indexOf("<")!=-1) splitChar = "<";
				else if(s1.indexOf(">")!=-1) splitChar = ">";
				if(splitChar!="") {
					s2 = s1.split(splitChar)[1];
					s1 = s1.split(splitChar)[0];
				}
			}
		}catch(e){}
		var rel = fillzero(s.Trim(),5)+fillzero(s1.Trim(),5)+fillzero(s2.Trim(),5);
		return rel;
    }
    function dobool(s)
    {
    	var val = 2;
    	if(s.toUpperCase() == "Y")
    		val = 0;
    	else if(s.toUpperCase() == "N")
    		val = 1;
    	return val;
    }
    function doboolfull(s)
    {
    	var val = 2;
    	if(s.toUpperCase() == "YES")
    		val = 1;
    	else if(s.toUpperCase() == "NO")
    		val = 0;
    	return val;
    }
    function dolastname(s){
    	if(s.indexOf(",")!=-1){
			s = s.substring(0,s.indexOf(","));
		}
		return CaseInsensitiveString(s);
    }
	function doip(s){
		var sArr = s.split(".");
		for(var i=0;i<sArr.length;i++)
		{
			if(sArr[i] == "*"){
				sArr[i] = "999";
			}else {
				sArr[i] = fillzero(sArr[i],3);
			}
		}
		return sArr.join(",");
    }
	function fillzero(s,num)
	{
		var n = s.length;
		while(n < num) {
			s = "0"+s;
			n++;
		}
		return s;
	} 
	function doStrNum(s)
	{	
		var nVal = 9999;
		var parrent = /^[0-9]*$/;
		if(s.length <= 0){
			nVal = -1;
		}
		if(s != "" && parrent.test(s)){
			nVal = parseInt(s);
		}
		return nVal;
	}
	function getFraudStatus(s)
	{
		if(s == "") return s;
		var ss3 = s.Trim().toLowerCase();
		if(s.Trim().length > 18){
			var ss2 = s.Trim().substring(18);
			//var ss1 = s.Trim().substring(0,18);
			if(ss2.indexOf("/")!=-1){
				if(s.indexOf("Fraud") == 0){
					ss3 = s.Trim().toLowerCase();
				}else {
					ss3 = ss2.substring(0,ss2.indexOf("/")-2).Trim().toLowerCase();
				}
				//ss1 = ss1.substring(5,10)+ss1.substring(0,5)+ss1.substring(10);				
			}			
			else {
				ss3 = ss2.Trim().toLowerCase();			
			}
		}
		if(ss3 == "fraud pending warning" || ss3 == "warning") ss3 = "0";
		else if(ss3 == "fraud pending watch" || ss3 == "watch") ss3 = "1";
		else if(ss3 == "fraud confirmed") ss3 = "2";
		s = ss3.Trim();
		return s;
	} 
	
	/**
	 */
	String.prototype.replaceAll = function(regExp, repText){
	  return this.replace(new RegExp(regExp,"g"),repText);
	}
	String.prototype.Trim = function() 
	{ 
		return this.replace(/(^\s*)|(\s*$)/g, ""); 
	} 
	function convertMonthStrToNumberStr(s){
		s = s.toLowerCase();
		if(s == "jan") s = "01";
		else if(s == "feb") s = "02";
		else if(s == "mar") s = "03";
		else if(s == "apr") s = "04";
		else if(s == "may") s = "05";
		else if(s == "jun") s = "06";
		else if(s == "jul") s = "07";
		else if(s == "aug") s = "08";
		else if(s == "sep") s = "09";
		else if(s == "oct") s = "10";
		else if(s == "nov") s = "11";
		else if(s == "dec") s = "12";
		return s;
	}
	//Formatter datetime is like "Apr 01, 2010 03:34 AM"
	function domyDate(s1)
	{
		var s = s1.Trim().replaceAll(",","");
		var dateArr = s.split(" ");
		if(dateArr.length >= 5){
			var year = dateArr[2];
			var month = convertMonthStrToNumberStr(dateArr[0]);
			var day = dateArr[1];
			var subday = dateArr[4].toLowerCase() == "pm"? 1 : 0;
			var time = dateArr[3];
			//var timeArr = time.split(":");
			//time = (timeArr[0] == "12" ? "00" : timeArr[0])+":"+timeArr[1];
			return year+month+day+subday+time;
		}
		return s1;
	}
    //Only sort support two column.
    function compareByColumn(nCol, bDescending, strType) {   
        var c = nCol;
        var d = bDescending;
        var typeArr = strType.split(",");
        
        var sType = typeArr[0];
        var fTypeCast = String;
        if (sType == "Number")   
            fTypeCast = Number;
        else if (sType == "Date")   
            fTypeCast = parseDate;
        else if (sType == "CaseInsensitiveString")   
            fTypeCast = CaseInsensitiveString;
        else if (sType == "Percent")   
            fTypeCast = Percent;
        else if(sType == "num")
        	fTypeCast = donum;
        else if(sType == "str")
        	fTypeCast = dostr;
        else if(sType == "bool")
        	fTypeCast = dobool;
		else if(sType == "lastname")
			fTypeCast = dolastname;
		else if(sType == "ip")
			fTypeCast = doip;
		else if(sType == "boolfull")
			fTypeCast = doboolfull;
		else if(sType == "StrNum")
			fTypeCast = doStrNum;
		else if(sType == "myDate")
			fTypeCast = domyDate;
		else if(sType == "fraudStatus")	
			fTypeCast = getFraudStatus;
        return function (n1, n2) {   
        	var str1 = getInnerText(n1.cells[c]);
			var str2 = getInnerText(n2.cells[c]);
			
			var chk = specialChecking(str1,str2);
			if(chk != 0)
			{
				return chk;
			}
			var value1 = fTypeCast(getInnerText(n1.cells[c]));
        	var value2 = fTypeCast(getInnerText(n2.cells[c]));
            if (value1 < value2)
                return d ? -1 : +1;
            if (value1 > value2)   
                return d ? +1 : -1;
            return 0;
            
        };
    }   
    function specialChecking(str1,str2)
	{
    	
		if(str1 == mydefinedChar && str2 != str1){
			return +1;
		}
		if(str2 == mydefinedChar && str2 != str1){
			return -1;
		}
		return 0;
	}
    function sortColumnWithHold(e) {   
        var el = ie5 ? e.srcElement : e.target;
        var table = getParent(el, "TABLE");
        var oldCursor = table.style.cursor;
        var oldClick = table.onclick;
        table.style.cursor = "wait";
        table.onclick = null;
        var fakeEvent = {srcElement : e.srcElement, target : e.target};
        window.setTimeout(function () {   
            sortColumn(fakeEvent);
            table.style.cursor = oldCursor;
            table.onclick = oldClick;
        }, 100);
    }
    function sortColumn(e) {
    	try{
    	var isSecondSortFlag = arguments[1]==undefined?false:arguments[1]; 
        var tmp = e.target ? e.target : (e.srcElement?e.srcElement:e);
        var tHeadParent = getParent(tmp, "THEAD");
        var el = getParent(tmp, "TH");
        if (tHeadParent == null) {
            return;
        }
        if (el != null && el.getAttribute("type") != undefined) {  
        	var sortedType = el.getAttribute("type");
        	var typeArr = sortedType.split(",");
        	if(typeArr.length > 1){
	        	try{
	            	var nextColumnIndex = parseInt(typeArr[1]);
	            	var tableObj = getParent(el, "TABLE");
	            	var cellObj = tableObj.rows[0].cells[nextColumnIndex];
	            	var descending = Boolean(cellObj._descending);	
	            	if(descending == false){
	            		sortColumn(cellObj,true);
	            	}
	        	}catch(e){
	        		 
	        	}
        	}
            var p = el.parentNode;
            var i;
            var tmpDescFlag = true;
            if(isSecondSortFlag == false){
            	tmpDescFlag = !Boolean(el._descending);
            	if(el._descending == null && el.getAttribute("_descending")!=undefined)
            	{
            		tmpDescFlag = (el.getAttribute("_descending") == "true");
            	}
            	el._descending = tmpDescFlag;
	            if (tHeadParent.arrow != null) {   
	                if (tHeadParent.arrow.parentNode != el) {   
	                    tHeadParent.arrow.parentNode._descending = null;
	                }   
	                tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
	            }   
	            if (el._descending)   
	                tHeadParent.arrow = arrowUp.cloneNode(true);
	            else  
	                tHeadParent.arrow = arrowDown.cloneNode(true);
	            el.appendChild(tHeadParent.arrow);
            }else{
            	el._descending = null;
            }
            var cells = p.cells;
            var l = cells.length;
            for (i = 0; i < l; i++) {   
                if (cells[i] == el) break;
            }   
            
            var table = getParent(el, "TABLE");
            sortTable(table,i,tmpDescFlag, el.getAttribute("type"));
        }  
    	}catch(e){};
    }   
    function getInnerText(el) {   
        if (ie5) return el.innerText; 
        var str = "";
        var cs = el.childNodes;
        var l = cs.length;
        for (var i = 0; i < l; i++) {   
            switch (cs[i].nodeType) {   
                case 1:    
                    str += getInnerText(cs[i]);
                    break;
                case 3:    
                    str += cs[i].nodeValue;
                    break;
            }   
        }   
        return str;
    }   
    function getParent(el, pTagName) {   
        if (el == null) return null;
        else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())   
            return el;
        else  
            return getParent(el.parentNode, pTagName);
    }

 

 

朋友的网站 http://woods2010.cn.alibaba.com/ 专业电子器件代购

 

分享到：
| sql的一些操作命令
评论
1 楼 kly377 2014-10-21  
试了毫无反应...
发表评论

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

相关推荐

    jQuery表格排序插件tablesorter.zip

    主要的特点包括：多列排序支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序支持 TH 元素的 ROWSPAN 和 COLSPAN 属性支持第二个隐藏域排序可扩展外观程序简小，打包后只有 7.4K程序效果： ...

    程序天下:JavaScript实例自学手册

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /js/all.js JavaScript脚本文件 /images 图片文件 第24章（/ch24） 程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取...

    asp.net专家疑难解答200问源码

    110.如何在DataList控件中创建多个列 111.如何实现DataList控件的分页功能 112.如何在DataGrid中添加自动编号的功能 113.如何控制DataGrid绑定列绑定的数据类型为日期的显示格式 114.如何把DataGrid中某一列的...

    Eclipse_Swt_Jface_核心应用_部分19

    9.9.3 设置可同时选中多行表格 183 9.9.4 可拖动的表格 184 9.9.5 设置单元格的图标 184 9.9.6 改变选中行高亮显示的颜色 185 9.9.7 带有上下文菜单的表格 186 9.9.8 可编辑的表格（TableEditor） 187 ...

    asp.net专家疑难解答200问

    如何在DataList控件中创建多个列 111.如何实现DataList控件的分页功能 112.如何在DataGrid中添加自动编号的功能 113.如何控制DataGrid绑定列绑定的数据类型为日期的显示格式 114.如何把DataGrid中某...

    layui前端框架-其他

    left、center、right），默认 left&lt;/p&gt;&lt;p&gt;[新增] table 组件的 escape 参数，用于是否开启 xss 字符过滤（默认 false）&lt;/p&gt;&lt;p&gt;[加强] table 组件的自定义模板功能，返回 LAY_COL 字段，可得到当前列的表头配置信息...

    cms后台管理

    &lt;class name="MyContent" table="jc_mycontent"&gt; &lt;meta attribute="sync-DAO"&gt;false&lt;/meta&gt; &lt;cache usage="read-write"/&gt; &lt;id name="id" type="java.lang.Integer" column="id"&gt;&lt;generator class=...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

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