心无止境

2008-01-15

javascript控制表格排序（转）

问题描述：

或许大家都碰到过这样一个问题，从数据库中得到一系列的数据，显示在页面上，有时候根据客服的要求我们需要对显示出来的数据进行实时排序（有n行n列，当点击其中一行头的时候所用数据按此列升序或者降序排列），当然从数据库中去数据然后进行排无愧是其中一个办法，但是试想一下，每次排序都要进行数据库查询，不但加重了服务器端的负担，响应时间也变的相对缓慢。为此使用javascript解决无疑是中很好的方法

解决办法及源码：

排序js

1. sort.js

/**//**
 * table排序
 * anthor liueh
 */
function   JM_PowerList(colNum)   
  ...{   
  headEventObject=event.srcElement;//取得引发事件的对象   
  while(headEventObject.tagName!="TR")   //不是tr行,则从底下的td冒泡上来寻找到相应行   
  ...{   
  headEventObject=headEventObject.parentElement;   
  }   
    
  for   (i=0;i<headEventObject.children.length;i++)   
  ...{   
  if   (headEventObject.children[i]!=event.srcElement)//找到事件发生的td单元格   
  ...{   
  headEventObject.children[i].className='listTableHead';//把点击的列的className属性设为listTableHead   
  }   
  }   
    
  var   tableRows=0;   
  trObject=clearStart.children[0].children;   //取得表格中行对象,   原来这里叫DataTable,   可能是你写错了吧??   
  for   (i=0;i<trObject.length;i++)   
  ...{   
  Object=clearStart.children[0].children[i];//取得每行的对象   
  tableRows=(trObject[i].id=='ignore')?tableRows:tableRows+1;//如果不是忽略行,则行数加一   
  }   
    
  var   trinnerHTML=new   Array(tableRows);     
  var   tdinnerHTML=new   Array(tableRows);   
  var   tdNumber=new   Array(tableRows)   
  var   i0=0   
  var   i1=0   
  for   (i=0;i<trObject.length;i++)   
  ...{   
  if   (trObject[i].id!='ignore')   
  ...{   
  trinnerHTML[i0]=trObject[i].innerHTML;//把行放在数组里   
  tdinnerHTML[i0]=trObject[i].children[colNum].innerHTML;//把要排序的行中td的内容放数组里   
  tdNumber[i0]=i;//行号   
  i0++;//加一,下个循环用   
  }   
  }   
  sourceHTML=clearStart.children[0].outerHTML;//取得表格中所有tr的html代码   
    
  //对所有td中的字符串进行排序,   算不算冒泡排序???   
  for   (bi=0;bi<tableRows;bi++)   
  ...{   
  for   (i=0;i<tableRows;i++)   
  ...{   
  if(tdinnerHTML[i]>tdinnerHTML[i+1])   
  ...{   
  t_s=tdNumber[i+1];   
  t_b=tdNumber[i];   
  tdNumber[i+1]=t_b;   
  tdNumber[i]=t_s;   
  temp_small=tdinnerHTML[i+1];   
  temp_big=tdinnerHTML[i];   
  tdinnerHTML[i+1]=temp_big;   
  tdinnerHTML[i]=temp_small;   
  }   
  }   
  }   
    
    
    
  var   showshow='';   
  var   numshow='';   
  for   (i=0;i<tableRows;i++)   
  ...{   
  showshow=showshow+tdinnerHTML[i]+' ';//把排序好的td的内容存在showshow字串里   
  numshow=numshow+tdNumber[i]+'|';             //把排序好的相应的行号也存在numshow中   
  }   
    
  sourceHTML_head=sourceHTML.split("<TBODY>");//从<TBODY>截断,我试了,前头串为空   
    
  numshow=numshow.split("|");   
  var   trRebuildHTML='';   
  if   (event.srcElement.className=='listHeadClicked')   
  ...{//已点击的列,   则逆排   
  for   (i=0;i<tableRows;i++)   
  ...{   
  trRebuildHTML=trRebuildHTML+trObject[numshow[tableRows-1-i]].outerHTML;//取出排序好的tr的内容连接起来   
    
  }   
  event.srcElement.className='listHeadClicked0';   
  }   
  else   
  ...{//默认顺排,新点击顺排   
  for   (i=0;i<tableRows;i++)   
  ...{   
  trRebuildHTML=trRebuildHTML+trObject[numshow[i]].outerHTML;   
  }   
  event.srcElement.className='listHeadClicked';   
  }   
  //取得排序后的tr集合结果字符串   
  var   DataRebuildTable='';   
  //把旧的表格头和新的tr排序好的元素连接起来,   (修改了一下)   
  DataRebuildTable   =   "<table   border=1 width=100%  cellpadding=1 cellspacing=1 id='clearStart'><TBODY>"   +   trObject[0].outerHTML   +   trRebuildHTML   +   "</TBODY>"   +     
    
  "</table>";   
  clearStart.outerHTML=DataRebuildTable;//表格用新串重新写一次   
    
  }

2.网页文件

<head>
    <title>MyHtml.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   <script src="sort.js" language="javascript"></script>

  </head>
<table border=1 id="clearStart">
 <tr bgcolor=cccccc id='ignore'>
  <td onclick="JM_PowerList(0)">列一
  </td>
  <td onclick="JM_PowerList(1)">
   列二
  </td>
  <td onclick="JM_PowerList(2)">
   列二
  </td>
 </tr>
  <tr>
  <td>
   周
  </td>
  <td>
   公务员
  </td>
  <td>
   22
  </td>
 </tr>
 <tr>
  <td>
   张三
  </td>
  <td>
   研究员
  </td>
  <td>
   65
  </td>
 </tr>
 <tr>
  <td>
   李思
  </td>
  <td>
   科学家
  </td>
  <td>
   24
  </td>
 </tr>
 <tr>
  <td>
  王武
  </td>
  <td>
   社会学家
  </td>
  <td>
   38
  </td>
 </tr>
</table>

12:21
浏览 (189)
评论 (0)
分类: javascript
相关推荐

发表评论

hydex

浏览: 10686 次
性别:
来自: 北京
详细资料

心无止境

javascript控制表格排序（转）

评论

发表评论

搜索本博客

博客分类

我的相册

其他分类

最近加入圈子

存档

最新评论

评论排行榜