table 列排序 列锁定

实现功能：
列排序，排序完成之后可以锁定该列，锁定了之后这列的顺序就不能再调整。就等于是多个order by的效果。
目前排序已经实现，但是锁定的功能没有实现，排序的代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
<HTML>   
 <HEAD>   
  <TITLE> New Document </TITLE>   
<script>
function ieOrFireFox(ob)   
{   
    if (ob.textContent != null)   
    return ob.textContent;   
    var s = ob.innerText;   
    return s.substring(0, s.length);   
}   
  
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型   
function sortAble(tableId, iCol, dataType) {   
    var table = document.getElementById(tableId);   
    var tbody = table.tBodies[0];   
    var colRows = tbody.rows;   
    var aTrs = new Array;   
         //将将得到的列放入数组，备用   
    for (var i=0; i < colRows.length; i++) {   
        aTrs[i] = colRows[i];   
    }   
                         
                    
    //判断上一次排列的列和现在需要排列的是否同一个。   
    if (table.sortCol == iCol) {   
        aTrs.reverse();   
    } else {   
        //如果不是同一列，使用数组的sort方法，传进排序函数   
aTrs.sort(compareEle(iCol, dataType));  
    }   
           
    var oFragment = document.createDocumentFragment();   
                   
    for (var i=0; i < aTrs.length; i++) {   
        oFragment.appendChild(aTrs[i]);   
    }                   
    tbody.appendChild(oFragment);   
    //记录最后一次排序的列索引   
    table.sortCol = iCol;   
}   
//将列的类型转化成相应的可以排列的数据类型   
function convert(sValue, dataType) {   
    switch(dataType) {   
    case "int":   
        return parseInt(sValue);   
    case "float":   
        return parseFloat(sValue);   
    case "date":   
        return new Date(Date.parse(sValue));   
    default:   
        return sValue.toString();   
    }   
}   
               
//排序函数，iCol表示列索引，dataType表示该列的数据类型   
function compareEle(iCol, dataType) {  
    return  function (oTR1, oTR2) {   
        var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);   
        var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);   
        if (vValue1 < vValue2) {   
            return -1;   
        } else if (vValue1 > vValue2) {   
            return 1;   
        } else {   
            return 0;   
        }   
       };   
}function setValue()
{
lastLockedCol=2;
}
</script>
</HEAD>   
  
 <BODY>  
 <input type="button" value="set" onclick="setValue()"> 
 <p>Sortable demo:</p>   
        <table border="1" id="tableId">   
            <thead>   
                <tr>                                       
                    <td height=19 width=72 style="font-weight:bold;height:14.25pt;width:54pt;cursor:'hand'" onclick="sortAble('tableId', 0,'int')" >编号</td>
<td width=72 style="font-weight:bold;width:54pt;cursor:'hand'" onclick="sortAble('tableId', 1)" >用户名</td>
<td width=242 style="font-weight:bold;width:182pt;cursor:'hand'" onclick="sortAble('tableId', 2)" >部门</td>
<td width=78 style="font-weight:bold;width:70pt;cursor:'hand'" onclick="sortAble('tableId', 3,'date')" >创建日期</td>
<td width=78 style="font-weight:bold;width:59pt;cursor:'hand'" onclick="sortAble('tableId', 4)" >状态</td>  
                </tr>   
            </thead>   
            <tbody>  
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' align="center">4173</td>
  <td x:str="'冯琳">冯琳</td>
  <td x:str="'上海总部营养品部">上海总部营养品部</td>
  <td class=xl24 align=right>2006-10-9</td>
  <td x:str="'cancel">cancel</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4176</td>
  <td x:str="'施颂华">施颂华</td>
  <td x:str="'上海总部医学部">上海总部医学部</td>
  <td class=xl24 align=right>2006-10-9</td>
  <td x:str="'cancel">cancel</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4178</td>
  <td x:str="'邵丽颖">邵丽颖</td>
  <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
  <td class=xl24 align=right>2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4180</td>
  <td x:str="'何  梅">何<span style='mso-spacerun:yes'>&nbsp; </span>梅</td>
  <td x:str="'北京西药部">北京西药部</td>
  <td class=xl24 align=right x:num="38999.400694444441">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4195</td>
  <td x:str="'刘茵">刘茵</td>
  <td x:str="'上海总部人力资源部">上海总部人力资源部</td>
  <td class=xl24 align=right x:num="38999.411805555559">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4202</td>
  <td x:str="'姜 承 婷">姜 承 婷</td>
  <td x:str="'上海总部财务行政部">上海总部财务行政部</td>
  <td class=xl24 align=right x:num="38999.427083333336">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4203</td>
  <td x:str="'张玲">张玲</td>
  <td x:str="'北京西药部">北京西药部</td>
  <td class=xl24 align=right x:num="38999.428472222222">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4206</td>
  <td x:str="'许红梅">许红梅</td>
  <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
  <td class=xl24 align=right x:num="38999.438888888886">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4208</td>
  <td x:str="'夏玮">夏玮</td>
  <td x:str="'上海总部财务行政部">上海总部财务行政部</td>
  <td class=xl24 align=right x:num="38999.444444444445">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4210</td>
  <td x:str="'吴婷">吴婷</td>
  <td x:str="'上海总部西药部">上海总部西药部</td>
  <td class=xl24 align=right x:num="38999.445138888892">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4216</td>
  <td x:str="'张慧红">张慧红</td>
  <td x:str="'广州营养品部">广州营养品部</td>
  <td class=xl24 align=right x:num="38999.451388888891">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4218</td>
  <td x:str="'孟渊">孟渊</td>
  <td x:str="'上海总部医学部">上海总部医学部</td>
  <td class=xl24 align=right x:num="38999.454861111109">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4230</td>
  <td x:str="'宋 婉">宋 婉</td>
  <td x:str="'上海总部营养品部">上海总部营养品部</td>
  <td class=xl24 align=right x:num="38999.475694444445">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
 <tr height=19 style='height:14.25pt'>
  <td height=19 align=right style='height:14.25pt' x:num>4235</td>
  <td x:str="'虞菀华">虞菀华</td>
  <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
  <td class=xl24 align=right x:num="38999.482638888891">2006-10-9</td>
  <td x:str="'order">order</td>
 </tr>
            </tbody>   
        </table>   
     
 </BODY>   
</HTML>

解决方案 »

  1.   

    这样??
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
    <HTML>   
     <HEAD>   
      <TITLE> New Document </TITLE>   
    <script>
    var $= function(id){return document.getElementById(id)}
    function ieOrFireFox(ob)   
    {   
        if (ob.textContent != null)   
        return ob.textContent;   
        var s = ob.innerText;   
        return s.substring(0, s.length);   
    }   
    sortAble.sock ={};
    //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型   
    function sortAble(tableId, iCol, dataType) {     if((iCol+"") in arguments.callee.sock) return;
        var table = document.getElementById(tableId);   
        var tbody = table.tBodies[0];   
        var colRows = tbody.rows;   
        var aTrs = new Array;   
             //将将得到的列放入数组，备用   
        for (var i=0; i < colRows.length; i++) {   
            aTrs[i] = colRows[i];   
        }   
                             
                        
        //判断上一次排列的列和现在需要排列的是否同一个。   
        if (table.sortCol == iCol) {   
            aTrs.reverse();   
        } else {   
            //如果不是同一列，使用数组的sort方法，传进排序函数   
            aTrs.sort(compareEle(iCol, dataType));  
        }   
               
        var oFragment = document.createDocumentFragment();   
                       
        for (var i=0; i < aTrs.length; i++) {   
            oFragment.appendChild(aTrs[i]);   
        }                   
        tbody.appendChild(oFragment); 
        for(var j in arguments.callee.sock)
        {
         var arr = arguments.callee.sock[j];
         for(var k=0,ll=arr.length;k<ll;k++)
         $('tableId').rows[k+1].cells[j].innerHTML = arguments.callee.sock[j][k];
        } 
        //记录最后一次排序的列索引   
        table.sortCol = iCol;   
    }   
    //将列的类型转化成相应的可以排列的数据类型   
    function convert(sValue, dataType) {   
        switch(dataType) {   
        case "int":   
            return parseInt(sValue);   
        case "float":   
            return parseFloat(sValue);   
        case "date":   
            return new Date(Date.parse(sValue));   
        default:   
            return sValue.toString();   
        }   
    }   
                   
    //排序函数，iCol表示列索引，dataType表示该列的数据类型   
    function compareEle(iCol, dataType) {  
        return  function (oTR1, oTR2) {           
            var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);   
            var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);   
            if (vValue1 < vValue2) {   
                return -1;   
            } else if (vValue1 > vValue2) {   
                return 1;   
            } else {   
                return 0;   
            }   
           };   
    }function setValue(n,o)
    {
    if((n+"") in sortAble.sock){
     delete sortAble.sock[(n+"")]
     o.value ="锁第"+(n+1)+"列"
    }else
    {
    sortAble.sock[n] = [];
    var rows = $('tableId').rows;
    for(var i=1,l=rows.length;i<l;i++)
       sortAble.sock[n][i-1] = rows[i].cells[n].innerHTML;
      o.value = "解开第"+(n+1)+"列锁定"
    }
    }
    </script>
    </HEAD>   
      
     <BODY>  
     <input type="button" value="锁第1列" onclick="setValue(0,this)"> 
      <input type="button" value="锁第2列" onclick="setValue(1,this)"> 
       <input type="button" value="锁第3列" onclick="setValue(2,this)"> 
        <input type="button" value="锁第4列" onclick="setValue(3,this)"> 
     <p>Sortable demo:</p>   
            <table border="1" id="tableId">   
                <thead>   
                    <tr>                                       
                        <td height=19 width=72 style="font-weight:bold;height:14.25pt;width:54pt;cursor:'hand'" onclick="sortAble('tableId', 0,'int')" >编号</td>
                        <td width=72 style="font-weight:bold;width:54pt;cursor:'hand'" onclick="sortAble('tableId', 1)" >用户名</td>
                        <td width=242 style="font-weight:bold;width:182pt;cursor:'hand'" onclick="sortAble('tableId', 2)" >部门</td>
                        <td width=78 style="font-weight:bold;width:70pt;cursor:'hand'" onclick="sortAble('tableId', 3,'date')" >创建日期</td>
                        <td width=78 style="font-weight:bold;width:59pt;cursor:'hand'" onclick="sortAble('tableId', 4)" >状态</td>  
                    </tr>   
                </thead>   
                <tbody>  
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' align="center">4173</td>
      <td x:str="'冯琳">冯琳</td>
      <td x:str="'上海总部营养品部">上海总部营养品部</td>
      <td class=xl24 align=right>2006-10-9</td>
      <td x:str="'cancel">cancel</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4176</td>
      <td x:str="'施颂华">施颂华</td>
      <td x:str="'上海总部医学部">上海总部医学部</td>
      <td class=xl24 align=right>2006-10-9</td>
      <td x:str="'cancel">cancel</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4178</td>
      <td x:str="'邵丽颖">邵丽颖</td>
      <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
      <td class=xl24 align=right>2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4180</td>
      <td x:str="'何  梅">何<span style='mso-spacerun:yes'>&nbsp; </span>梅</td>
      <td x:str="'北京西药部">北京西药部</td>
      <td class=xl24 align=right x:num="38999.400694444441">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4195</td>
      <td x:str="'刘茵">刘茵</td>
      <td x:str="'上海总部人力资源部">上海总部人力资源部</td>
      <td class=xl24 align=right x:num="38999.411805555559">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4202</td>
      <td x:str="'姜 承 婷">姜 承 婷</td>
      <td x:str="'上海总部财务行政部">上海总部财务行政部</td>
      <td class=xl24 align=right x:num="38999.427083333336">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4203</td>
      <td x:str="'张玲">张玲</td>
      <td x:str="'北京西药部">北京西药部</td>
      <td class=xl24 align=right x:num="38999.428472222222">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4206</td>
      <td x:str="'许红梅">许红梅</td>
      <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
      <td class=xl24 align=right x:num="38999.438888888886">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4208</td>
      <td x:str="'夏玮">夏玮</td>
      <td x:str="'上海总部财务行政部">上海总部财务行政部</td>
      <td class=xl24 align=right x:num="38999.444444444445">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4210</td>
      <td x:str="'吴婷">吴婷</td>
      <td x:str="'上海总部西药部">上海总部西药部</td>
      <td class=xl24 align=right x:num="38999.445138888892">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4216</td>
      <td x:str="'张慧红">张慧红</td>
      <td x:str="'广州营养品部">广州营养品部</td>
      <td class=xl24 align=right x:num="38999.451388888891">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4218</td>
      <td x:str="'孟渊">孟渊</td>
      <td x:str="'上海总部医学部">上海总部医学部</td>
      <td class=xl24 align=right x:num="38999.454861111109">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4230</td>
      <td x:str="'宋 婉">宋 婉</td>
      <td x:str="'上海总部营养品部">上海总部营养品部</td>
      <td class=xl24 align=right x:num="38999.475694444445">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
     <tr height=19 style='height:14.25pt'>
      <td height=19 align=right style='height:14.25pt' x:num>4235</td>
      <td x:str="'虞菀华">虞菀华</td>
      <td x:str="'上海总部百宫非处方药物部">上海总部百宫非处方药物部</td>
      <td class=xl24 align=right x:num="38999.482638888891">2006-10-9</td>
      <td x:str="'order">order</td>
     </tr>
                </tbody>   
            </table>   
         
     </BODY>   
    </HTML>