今天來(lái)教大家如何使用 ale.js 制作一個(gè)小而美的表格編輯器，首先先上 gif：
是不是還是有一點(diǎn)非常 cool 的感覺(jué)的策吠？那么我們現(xiàn)在開(kāi)始吧层皱！
這是我們這篇文章結(jié)束后完成的效果（如果想繼續(xù)完成請(qǐng)?jiān)L問(wèn)第三篇文章）：
ok，那繼續(xù)開(kāi)始吧（本篇文章是表格編輯器系列的第二篇文章识椰，如果您還沒(méi)有看過(guò)第一篇，請(qǐng)?jiān)L問(wèn) 第一篇文章（開(kāi)源中國(guó)））：
首先我們寫一個(gè)名叫 staticData 的 object深碱，里面添加2個(gè)屬性腹鹉，分別是 sortBy 和 sortType：（關(guān)于 staticData 這里不做闡述，如果有需要請(qǐng)?jiān)L問(wèn) cn.alejs.org）
staticData: {
sortBy: -1, //排序列索引敷硅，默認(rèn)沒(méi)有功咒，所以為-1
sortType: 'down' //排序類型愉阎，默認(rèn)為降序
}
之后我們?cè)?th 標(biāo)簽里面增加一個(gè) onclick 屬性，指向 methods 里面的 handleTheadOnclick 函數(shù)力奋，并傳遞一個(gè) event 作為參數(shù)：
（之前的代碼）
this.data.bookHeader.forEach(function(val, i, arr) {
returnVal += "<th>" + val + "</th>";
})
（改進(jìn)后的代碼）
this.data.bookHeader.forEach(function(val, i, arr) {
returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + "</th>";
})
為了讓他顯示排序時(shí)的小箭頭榜旦，我們需要再改進(jìn)這行代碼為這樣：
this.data.bookHeader.forEach(function(val, i, arr) {
returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + (sortBy === i ? getSortSign() : '') + "</th>";
})
由于 sortBy 變量和 getSortSign 函數(shù)變量還未定義，所以我們要在之前的代碼里引用一下：
（原來(lái)的代碼）
var returnVal = "<table><thead><tr>";
（改進(jìn)后的代碼）
var returnVal = "<table><thead><tr>",
getSortSign = this.methods.getSortSign,
sortBy = this.staticData.sortBy;
其中景殷，sortBy 變量指向的是靜態(tài) data 里的 sortBy 變量溅呢，這個(gè)我們已經(jīng)定義了，所以先不管他猿挚。而另一個(gè) getSortSign 函數(shù)還沒(méi)有定義咐旧，所以我們?cè)?methods 里面定義一下他：
getSortSign() {
if (this.staticData.sortType === "up") {
return '\u2191';
} else {
return '\u2193';
}
}
其功能主要就是判斷是正序還是倒敘，并分別輸出正反小箭頭绩蜻。
之后我們就需要完成 handleTheadOnclick 函數(shù)了铣墨。它分別引用了 changeSortType 和 sortList 函數(shù)：
handleTheadOnclick(e) {
this.methods.changeSortType(e);
this.methods.sortList(e);
}
其中 changeSortType 函數(shù)是用來(lái)改變排序類型的，而 sortList 函數(shù)使用來(lái)排序的办绝。
那么我們先完成 changeSortType 函數(shù)吧：
changeSortType(e) {
this.staticData.sortBy = e.target.cellIndex;
if (this.staticData.sortType === "up") {
this.staticData.sortType = "down";
} else {
this.staticData.sortType = "up";
}
}
ok伊约，這個(gè)函數(shù)的功能和實(shí)現(xiàn)都非常簡(jiǎn)單，其中 cellIndex 是用來(lái)獲取這是屬于表格中那一列的孕蝉。
那么 sortList 函數(shù)的實(shí)現(xiàn)則稍微有些復(fù)雜：
sortList(e) {
//獲取列索引值
var index = e.target.cellIndex;
//判斷排序類型
if (this.staticData.sortType === "up") {
//使用數(shù)組的 sort 函數(shù)進(jìn)行排序碱妆，分別按 charCode 進(jìn)行排序
this.data.bookData.sort(function(a, b) {
return a[index].charCodeAt(0) > b[index].charCodeAt(0) ? 1 : -1;
})
} else {
this.data.bookData.sort(function(a, b) {
return a[index].charCodeAt(0) < b[index].charCodeAt(0) ? 1 : -1;
})
}
this.data.bookData = this.data.bookData;
}
這是我們目前的全部 js 代碼：
Ale("excel", {
template() {
return this.methods.handleTemplateRender();
},
methods: {
handleTemplateRender() {
//定義DOM基本結(jié)構(gòu)
var returnVal = "<table><thead><tr>",
getSortSign = this.methods.getSortSign,
sortBy = this.staticData.sortBy;
//循環(huán)遍歷bookHeader數(shù)據(jù)并輸出
this.data.bookHeader.forEach(function(val, i, arr) {
returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + (sortBy === i ? getSortSign() : '') + "</th>";
})
returnVal += "</thead></tr><tbody>";
//循環(huán)遍歷bookData數(shù)據(jù)并輸出
this.data.bookData.forEach(function(thisBook, i, arr) {
//輸出一行
returnVal += "<tr>";
thisBook.forEach(function(val, i, arr) {
//輸出一列
returnVal += "<td>" + val + "</td>";
})
returnVal += "</tr>";
})
returnVal += "</tbody></table>";
//返回DOM結(jié)構(gòu)
return returnVal;
},
handleTheadOnclick(e) {
this.methods.changeSortType(e);
this.methods.sortList(e);
},
changeSortType(e) {
this.staticData.sortBy = e.target.cellIndex;
if (this.staticData.sortType === "up") {
this.staticData.sortType = "down";
} else {
this.staticData.sortType = "up";
}
},
sortList(e) {
var index = e.target.cellIndex;
if (this.staticData.sortType === "up") {
this.data.bookData.sort(function(a, b) {
return a[index].charCodeAt(0) > b[index].charCodeAt(0) ? 1 : -1;
})
} else {
this.data.bookData.sort(function(a, b) {
return a[index].charCodeAt(0) < b[index].charCodeAt(0) ? 1 : -1;
})
}
this.data.bookData = this.data.bookData;
},
getSortSign() {
if (this.staticData.sortType === "up") {
return '\u2191';
} else {
return '\u2193';
}
}
},
data: {
bookHeader: [
"Book", "Author", "Language", "Published", "Sales"
],
bookData: [
["The Lord of the Rings", " J. R. R. Tolkien", "English", "1954-1955", "150 million"],
["The Little Prince", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1791", "100 million"]
]
},
staticData: {
sortBy: -1,
sortType: 'down'
}
})
Ale.render("excel", {
el: "#app"
})
然后效果就如下圖所示啦：
如果想了解更多，歡迎關(guān)注我在明天推出的第三篇教程昔驱，同時(shí)也關(guān)注一下 alejs 哦疹尾，感謝各位！
（非常重要：如果有能力的話不妨去 Github 或 碼云 上 star 一下我們吧骤肛！不過(guò)如果您特別喜歡 alejs 的話也可以 watch 或 fork 一下哦纳本！十分感謝！）
