表格排序（小综合的例子）

表格排序

通过ajax来动态获取数据，结合前面学的数字和汉字的排序，动态绑定数据到页面，隔行换色，实现一个小例子。

• 一个简单的表格排序，逻辑还是挺多的，重新熟悉了一下table，知道咋样从表格中获取表格中的元素，隔行换色的原理，类数组转数组，实现ajax的四步骤，汉字的比较排序，绑定数据到页面的两种常用的方法，

Html与css代码

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            table{
                width: 700px;
                margin: 100px auto;
                text-align: center;
                border-radius: 10px;
                padding: 10px;font-size: 20px;
                /*产生阴影*/
                box-shadow: 0 0 10px darkgreen;
            }
            table caption{
                margin-bottom: 10px;
                font-size: 30px;
                font-weight: 700;
                line-height: 50px;
            }
            table thead{
                background: #7CFC00;
                height: 40px;
                line-height: 40px;
                
            }
            table thead tr{
                /*不能被选择中*/
                -webkit-user-select: none;
            }
            table thead tr th.cursor{
                cursor: pointer;
            }
            table tbody tr{
                height: 40px;
                line-height: 40px;
            }
            table tbody tr.bg0{
                background: lightblue;
            }
            table tbody tr.bg1{
                background: lightcoral;
            }
        </style>



<table cellspacing="1" cellpadding="0" id="tab">
            <!--表格标题-->
            <caption>icessun的武林世界</caption>
            
            <!--头部 -->
            <thead>
    <!--tr表示一行，td表示一个单元格cell-->
                <tr>
                    <th class="cursor">name</th>
                    <th class="cursor">age</th>
                    <th class="cursor">level</th>
                    <th>sex</th>
                </tr>
            </thead>
            <!--tbody部分-->
            <tbody>
                
                <!--我们绑定数据到页面就是这个格式-->
                
                
                <!--<tr>
                    <td>郭靖</td>
                    <td>18</td>
                    <td>87</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>黄蓉</td>
                    <td>18</td>
                    <td>90</td>
                    <td>1</td>
                </tr>-->
            </tbody>
            
        </table>

使用的数据源

data.txt

[{"name":"郭靖","age":18,"level":98,"sex":0},{"name":"黄蓉","age":16,"level":88,"sex":1},{"name":"杨康","age":17,"level":78,"sex":0},{"name":"梅超风","age":40,"level":90,"sex":1},{"name":"洪七公","age":60,"level":100,"sex":0},{"name":"穆念慈","age":20,"level":50,"sex":1}]

js代码

• 获取元素（我们需要操作的元素，表格元素的获取和我们的平常的元素获取有点不同）
• 获取数据（ajax动态的获取，创建AJAX的四步骤）
• 绑定数据（字符串的拼接（简单）或者是碎片动态创建元素）
• 隔行换色（%求余的技巧的应用，有几种情况就%几）
• 表格排序（实现数字和汉字的排序，当我们点击一个排序后，在去操作其他的排序，然后返回来操作第一次点击的排序，还是原先的排序）

//获取元素

var oTab=document.getElementById('tab');
//获取表格中的表头thead 表头是唯一的
var tHead=oTab.tHead;
//一个表格里面有n个tbody表体，是一个集合；但是我们需要的是第一个【0】tbody
var tBody=oTab.tBodies[0];
//表头中的第一行所有的列  aCells里面包含列里面的内容innerHTML
var aCells=tHead.rows[0].cells;
//表体中所有的行
var aRows=tBody.rows;


//获取数据 封装在一个函数里面
var data=null;
getData();
function getData(){
//创建一个对象是为了获取对象身上的属性和方法  实例创建对象
     var xml=new XMLHttpRequest();
    //默认是异步 不写 
    xml.open("GET","data.txt");
    //发送请求
     xml.send(null);
     //响应请求
     xml.onreadystatechange=function(){
     if(xml.readyState==4&&/^2\d{2}$/.test(xml.status)){
     //处理响应数据 转成一个json格式的字符串
        data=utils.jsonParse(xml.responseText);
        console.log(data);//data获取的是一个json格式的数据对象
        //绑定数据的函数调用，可以拿到data数据
        bind();
            }
      }
}

// 绑定数据 

function bind(){
//字符串拼接的方法
var str='';
for(var i=0;i<data.length;i++){
//使用0代表男，1代表女，但是展现在页面要显示为汉字男女
data[i].sex=data[i].sex==0?'男':'女';

str+='<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].level+'</td><td>'+data[i].sex+'</td></tr>'
}

//循环完了，把字符串插入到页面里面,字符串插入到页面使用innerHTML

tBody.innerHTML=str;


}


// 动态创建元素加上文档碎片的方法
function bind(){
//创建文档碎片
     var frg=document.creatDocumentFragment();
     for(var i=0;i<data.length;i++){
         //动态创建元素 tr 个数是根据data的长度
         var tr=document.creatElement('tr');
         //td的个数，是根据data[i]对象里面键值对的个数，for in 循环遍历data[i]对象
         for(var attr in data[i]){
               var td=document.creatElement('td');
               if(attr=='sex'){
                     data[i][attr]=data[i][attr]==0?'男':'女';

               }

              td.innerHTML=data[i][attr];
              tr.appendChild(td);
          }
         frg.appendChild(tr);
   
     }
     tBody.appendChild(frg);
     frg=null;
     //这个时候动态创建了元素插入到了页面，会出现颜色的错误，所以要重新调用一下，隔行换色的函数
     changeColor();
}

//隔行换色
function changeColor(){
        for(var i=0;i<aRows.length;i++){
          aRows[i].className='bg'+i%2;
       }
}

// 表格排序
function sort(n){

// 需求：当我们点击一行的时候，然后点击了其他的地方，回来还是点击原先第一次的地方，与我们上次点击是一样的
for(var i=0;i<aCells.length;i++){

//当前的被点击的那个frg乘以-1 ，其他的变成-1
   aCells[i].frg=i==n?aCells[i].frg*-1:-1;
 
}



//排序三部曲  类数组转数组  数组的sort排序  排好序的数据重新插入到页面

// 类数组转数组
var ary=utils.markArray(aRows);

// 数组的sort排序
ary.sort(function(a,b){
    a=a.cells[n].innerHTML;//'18'
    b=b.cells[n].innerHTML;//'19'
     //汉字的比较
     if(isNaN(a)||isNaN(b)){
          return a.localeCompare(b)*aCells[i].frg;
     }
    return (a-b)*aCells[i].frg;

});

// 排好序的数据重新插入到页面 ary中已经是排好序的数据了

var frg=document.creatDocumentFragment();

for(var i=0;i<ary.length;i++){
   frg.appendChild(ary[i]);
}
tBody.appendChild(frg);
frg=null;
changeColor();


}

// 点击表头的事件

for(var i=0;i<aCells.length;i++){
    if(aCells[i].className=='cursor'){
    //初始化的时候设置frg属性值为 -1  点击的时候frg变成1 -1 1 -1  frg开关  每一个aCells各有一个frg不冲突
  
      aCells[i].frg=-1;
      aCells[i].index=i;
      aCells[i].onclick=function(){
          sort(this.index);
      }
   }
}