表格排序（小综合的例子）
2017-05-05 本文已影响39人
icessun
表格排序
通过
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);
}
}
}
