简单且轻松自定义排序规则：
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 = (ElementsByTagName) ? true : false;
var ie5 = (ElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
var mydefinedChar = "*";
//if (ie5 || dom)
//initSortTable();
js argumentsfunction initSortTable(asc,desc) {
arrowUp = ateElement("SPAN");
arrowUp.style.display = "inline";
var img = ateElement("Img");
img.src = asc;
arrowUp.appendChild(img);
arrowUp.className = "arrow";
arrowDown = ateElement("SPAN");
arrowDown.style.display = "inline";
img = ateElement("Img");
img.src = desc;
arrowDown.appendChild(img);
arrowDown.className = "arrow";
}
function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = ws;
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 = "";
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 (sort == "string")
if (sort == "function")
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.place(/\-/g, '/'));
}
function toNumber(s) {
return place(/[^0-9\.]/g, ""));
}
function Percent(s) {
return place("%", ""));
}
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;
UpperCase() == "Y")
val = 0;
else UpperCase() == "N")
val = 1;
return val;
}
function doboolfull(s)
{
var val = 2;
UpperCase() == "YES")
val = 1;
else UpperCase() == "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 != "" && st(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;
}
/**
*/
placeAll = function(regExp, repText){
place(new RegExp(regExp,"g"),repText);
}
String.prototype.Trim = function()
{
place(/(^\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 = lls[c]);
var str2 = lls[c]);
var chk = specialChecking(str1,str2);
if(chk != 0)
{
return chk;
}
var value1 = fTypeCast(lls[c]));
var value2 = fTypeCast(lls[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 = lick;
table.style.cursor = "wait";
var fakeEvent = {srcElement : e.srcElement, target : e.target};
window.setTimeout(function () {
sortColumn(fakeEvent);
table.style.cursor = oldCursor;
}, 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 = ws[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.veChild(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 && LowerCase() == LowerCase())
return el;
else
return getParent(el.parentNode, pTagName);
}
朋友的网站 woods2010.alibaba/ 专业电子器件代购
17:54 浏览 (86) 评论 (0) 分类: script 2010-04-21
缩略显示兼容IE，火狐的自定义tips，浮动显示文字
文章分类:Web前端
大部分代码来自网络，可以在自己的页面定义变量qTipTag名称譬如想遍历全部的TD 就写qTipTag='td';，
我还加了个qTipClassName用于却分是否需要做tips处理，只有定义指定class的tag才做。
//////////////////////////////////////////////////////////////////
// qTip - CSS Tool Tips - by Craig Erskine
// qrayg | solardreamstudios
//
// Inspired by code from Travis Beckham
// www.squidfingers | www.podlob
//////////////////////////////////////////////////////////////////
var qTipTag = "td"; // Which tag do you want to qTip-ize? Keep it lowercase!//
var qTipX = -30; // This is qTip's X offset//
var qTipY = 25; // This is qTip's Y offset//
var qTipClassName = "needShowPop"; // Which objects' name.
/
/ There's No need to edit anything below this line//
tooltip = {
name :"qTip",
offsetX :qTipX,
offsetY :qTipY,
tip :null
}
tooltip.init = function() {
try{
var tipNameSpaceURI = "/1999/xhtml";
if (!tipContainerID) {
var tipContainerID = "qTip";
}
var tipContainer = ElementById(tipContainerID);
if (!tipContainer) {
tipContainer = ateElementNS ? ateElementNS(
tipNameSpaceURI, "div") : ateElement("div");
tipContainer.setAttribute("id", tipContainerID);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论