简单且轻松自定义排序规则:
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 οnlοad='init();'>
<table οnclick="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/ 专业电子器件代购