案例(一) ： 实现表格的多序排列

表格多序排列

// --> 想要操作谁，就先获取谁
var oTab = document.getElementById("tab");
//table下的特殊属性
var tHead = oTab.tHead;
var oThs = tHead.rows[0].cells; //rows 所有行，cells 所有列
var tBody = oTab.tBodies[0]; //tbody会有多个
var oRows = tBody.rows;

var data = null;


// --> 1) 首先获取后台（table.txt）中的数据"JSON"格式字符串 -->AJAX
// async javascript and xml
// 1) 创建一个AJAX对象
var xhr = new XMLHttpRequest;

// 2) 打开我们需要请求数据的那个文件地址
xhr.open("get", "./table.txt",true); //true --> 异步请求

// 3) 监听请求状态
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        var val = xhr.responseText;
        console.log(val);
        data = utils.jsonParse(val);
                                          bind();
                                          changeBg();
    } 
};

// 4）发送请求
xhr.send(null);


// --> 2) 实现我们的数据绑定 动态创建 字符串拼接 文档碎片
function bind(){
    var frg = document.createDocumentFragment();
    for (var i = 0;i < data.length;i++ ) {
        var cur = data[i];
        var oTr = document.createElement("tr");//每一次循环创建一个tr
        //每一个tr中还需要创建4个tr,因为每一个对象中有四组键值对
        for (var key in cur) {
            var oTd = document.createElement("td");
            if (key === "sex") {
                oTd.innerHTML = cur[key] === 0 ? "男" : "女";
            } else {
                oTd.innerHTML = cur[key];
            }
            oTr.appendChild(oTd);
        }
        frg.appendChild(oTr);
    }
    tBody.appendChild(frg);
    frg = null;
}


// --> 3）实现隔行变色
function changeBg() {
    for (var i = 0;i <oRows.length;i++) {
        oRows[i].className = i % 2 === 1 ? "bg" : null;
    }
}



// --> 4）编写表格升降序排序方法：实现按照年龄这一行排列
function sort(n) { //n --> 当前点击这一列的索引
    // this --> oThis[i]
    var _this = this;
    // --> 把存储所有行的类数组转化为数组
    var ary = utils.listToArray(oRows);
    // --> 给数组进行排序:按照每一行的第二列中的内容由小到大进行排序
    // 点击当前列，需要让其他的列的flag存储的值回归到初始值-1，这样在
    // 返回头点击其他的列，才是按照升序排列的
    for (var k = 0;k < oThs.length;k++) {
        if (oThs[k] !== this) {
            oThs[k].flag = -1;
        }
    }
    _this.flag *= -1;// 第一次是1，升序；第二次是-1，降序
    ary.sort(function (a,b) {
                                        console.log(a);
                                        console.log(n);
        var curInn = a.cells[n].innerHTML;
        var nexInn = b.cells[n].innerHTML;
        var curInnNum = parseFloat(curInn);
        var nexInnNum = parseFloat(nexInn);

        // this --> window
        if (isNaN(curInnNum) || isNaN(nexInnNum)) {
            //中文汉字
            return (curInn.localCompare(nexInn)) * _this.flag;
        } 
        return (curInnNum - nexInnNum) * _this.flag;
    });
    //按照ary中的最新顺序，把每一行重新的添加到tBody中去
    var frg = document.createDocumentFragment();
    for (var i = 0;i < ary.length;i++) {
        frg.appendChild(ary[i]);
    }
    tBody.appendChild(frg);
    frg = null;
    //按照最新的顺序重新进行隔行变色
    changeBg();
};


/*
// --> 5) 点击第二列进行排序
oThs[1].flag = -1;//给当前点击这一列，增加一个自定义属性flag，存储的值是1
oThs[1].onclick = function () {
    // this --> oThs[1] 当前元素
    //sort(); // this --> window
    //sort.call(oThs[1]);
    sort.call(this);
};
*/

// --> 5) 所有具有class = "cursor" 这个样式的列都可以进行排序
for (var i = 0;i < oThs.length;i++) {
                     oThs[i].index = i; // --> 用来存储索引的
                     oThs[i].flag = -1; // --> 用来标识升降序
                     var curTh = oThs[i];
    if (curTh.className === "cursor") {
                                        curTh.onclick = function () {
                                                // --> this --> oThs[i]console.log("curTh.index -->" + oThs[i].index);
                                                console.log(curTh);
                                                sort.call(this,this.index);
                                        };

    }
}