使用 ale.js 製做一個小而美的表格編輯器（2）

今天來教你們如何使用 ale.js 製做一個小而美的表格編輯器，首先先上 gif：

是否是仍是有一點很是 cool 的感受的？那麼咱們如今開始吧！

這是咱們這篇文章結束後完成的效果（若是想繼續完成請訪問第三篇文章）：

ok，那繼續開始吧（本篇文章是表格編輯器系列的第二篇文章，若是您尚未看過第一篇，請訪問 第一篇文章（開源中國））：

首先咱們寫一個名叫 staticData 的 object，裏面添加2個屬性，分別是 sortBy 和 sortType：（關於 staticData 這裏不作闡述，若是有須要請訪問 cn.alejs.org）

staticData: {
    sortBy: -1, //排序列索引，默認沒有，因此爲-1
    sortType: 'down' //排序類型，默認爲降序
}

以後咱們在 th 標籤裏面增長一個 onclick 屬性，指向 methods 裏面的 handleTheadOnclick 函數，並傳遞一個 event 做爲參數：

（以前的代碼）

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th>" + val + "</th>";
})

（改進後的代碼）

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + "</th>";
})

爲了讓他顯示排序時的小箭頭，咱們須要再改進這行代碼爲這樣：

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + (sortBy === i ? getSortSign() : '') + "</th>";
})

因爲 sortBy 變量和 getSortSign 函數變量還未定義，因此咱們要在以前的代碼裏引用一下：

（原來的代碼）

var returnVal = "<table><thead><tr>";

（改進後的代碼）

var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy;

其中，sortBy 變量指向的是靜態 data 裏的 sortBy 變量，這個咱們已經定義了，因此先無論他。而另外一個 getSortSign 函數尚未定義，因此咱們在 methods 裏面定義一下他：

getSortSign() {
    if (this.staticData.sortType === "up") {
        return '\u2191';
    } else {
        return '\u2193';
    }
}

其功能主要就是判斷是正序仍是倒敘，並分別輸出正反小箭頭。

以後咱們就須要完成 handleTheadOnclick 函數了。它分別引用了 changeSortType 和 sortList 函數：

handleTheadOnclick(e) {
    this.methods.changeSortType(e);
    this.methods.sortList(e);
}

其中 changeSortType 函數是用來改變排序類型的，而 sortList 函數使用來排序的。

那麼咱們先完成 changeSortType 函數吧：

changeSortType(e) {
    this.staticData.sortBy = e.target.cellIndex;
    if (this.staticData.sortType === "up") {
        this.staticData.sortType = "down";
    } else {
        this.staticData.sortType = "up";
    }
}

ok，這個函數的功能和實現都很是簡單，其中 cellIndex 是用來獲取這是屬於表格中那一列的。

那麼 sortList 函數的實現則稍微有些複雜：

sortList(e) {
    //獲取列索引值
    var index = e.target.cellIndex;
    //判斷排序類型
    if (this.staticData.sortType === "up") {
        //使用數組的 sort 函數進行排序，分別按 charCode 進行排序
        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基本結構
            var returnVal = "<table><thead><tr>",
                getSortSign = this.methods.getSortSign,
                sortBy = this.staticData.sortBy;

            //循環遍歷bookHeader數據並輸出
            this.data.bookHeader.forEach(function(val, i, arr) {
                returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + (sortBy === i ? getSortSign() : '') + "</th>";
            })
            returnVal += "</thead></tr><tbody>";

            //循環遍歷bookData數據並輸出
            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結構
            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"
})

而後效果就以下圖所示啦：

若是想了解更多，歡迎關注我在明天推出的第三篇教程，同時也關注一下 alejs 哦，感謝各位！

（很是重要：若是有能力的話不妨去 Github 或 碼雲 上 star 一下咱們吧！不過若是您特別喜歡 alejs 的話也能夠 watch 或 fork 一下哦！十分感謝！）