前言:
百度前端技术学院,任务三十八:UI组件之排序表格
知识点:
1)某列元素大小排序 --> 对行重新排序
function(eve){
var content = eve.target.parentNode.innerHTML.split('<')[0],
listNum = config.thContent.indexOf(content),
sortList = [],
newList = [],
trList = tab.childNodes;
//取出要排序的数据,保存在数组中
for( var i = 0;i<config.rowNum-1;i++){
sortList.push(trList[i+1].childNodes[listNum].innerHTML);
}
//得到所要求经排序后的数组
//降序排序
newList = sortList.sort(sortNumber);
//需要升序则取反
if(!flag){
newList = newList.reverse();
}
//获得当前列的数据分布情况
sortList = [];
for( i = 0;i<config.rowNum-1;i++){
sortList.push(trList[i+1].childNodes[listNum].innerHTML);
}
//根据前后两个数组,重新排序列表项
changeOrder(newList,sortList);
function sortNumber(a,b){
return b - a ;
}
//根据排序结果重新排列行序
function changeOrder(newList,oldList){
var len = newList.length,
pos_before,
pos_now,
trList = tab.childNodes,
tempNode = document.createElement('tr'),
temp;
for(var k = 0;k<len;k++){
//记录当前值在新表中位置,并寻找当前值在原表中的位置
pos_now = k;
pos_before = oldList.indexOf(newList[k]);
//如果当前值在两个表中的位置不一样,则交换两个节点的内容
if(pos_now !== pos_before){
tempNode.innerHTML = trList[pos_before+1].innerHTML;
trList[pos_before+1].innerHTML = trList[pos_now+1].innerHTML;
trList[pos_now+1].innerHTML = tempNode.innerHTML;
//更新表的内容
temp = oldList[pos_before];
oldList[pos_before] = oldList[pos_now];
oldList[pos_now] = temp;
}
}
}
}
代码地址:点击打开链接
DEMO:点击打开链接