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

時間 2019-11-13

標籤使用 ale.js ale 製做一個小而美的表格編輯器欄目 JavaScript 简体版

原文原文鏈接

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

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

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

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

首先咱們須要先添加一個 Sreach 按鈕（在 handleTemplateRender 函數裏）：app

//把 定義DOM基本結構 的 returnVal
var returnVal = "<table><thead><tr>"

//改成
var returnVal = "<table><thead><button class='a-btn' onclick='this.methods.trigSearch()'>Search</button><tr>"

以後咱們須要在 methods 裏面添加一個 trigSearch 函數：編輯器

trigSearch(){
    if (this.data.isOpenSearch) {
        this.data.data = this.staticData.preData;
        this.data.isOpenSearch = false;
    } else {
        this.data.isOpenSearch = true;
    }
}

接下來，咱們須要在 data 裏添加一個 isOpenSearch 變量，默認爲 false：函數

isOpenSearch: false

還要在 staticData 裏添加一個 preData，用來存儲 bookData 數據：this

preData: [
    ["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"]
]

以後咱們要在 handleTemplateRender 函數中增長一個判斷，判斷是否 openSearch 開啓了：.net

//把

//循環遍歷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>";



//改成

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

var cellId = -1;

if (this.data.isOpenSearch) { //這裏增長判斷
    returnVal += "</tr><tr>";
    for (var i = 0; i < this.data.bookHeader.length; i++) {
        cellId++;
        returnVal += "<th><input data-cell='" + cellId + "' type='text' oninput='this.methods.handleSearch(this, event)' placeHolder='Search...'></th>";
    }
}

returnVal += "</thead></tr><tbody>";

而後咱們要繼續在 methods 裏面添加一個名叫 handleSearch 的函數：excel

handleSearch(el, e) {
    var newData = [],
        elVal = el.value;
    this.staticData.preData.forEach(function(val, i, arr) {
        //判斷是否擁有輸入的字段
        if (val[e.target.dataset.cell].indexOf(elVal) !== -1) {
            //添加到返回對列中
            newData.push(val);
        }
    });

    this.data.bookData = newData;
}

如今咱們就已經實現了搜索功能，恭喜！

這是咱們目前所有的 js 代碼：

Ale("excel", {
            template() {
                return this.methods.handleTemplateRender();
            },
            methods: {
                handleTemplateRender() {
                    //定義DOM基本結構
                    var returnVal = "<table><thead><button class='a-btn' onclick='this.methods.trigSearch()'>Search</button><tr>",
                        getSortSign = this.methods.getSortSign,
                        sortBy = this.staticData.sortBy,
                        rowId = -1,
                        edit = this.data.edit;

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

                    var cellId = -1;

                    if (this.data.isOpenSearch) {
                        returnVal += "</tr><tr>";
                        for (var i = 0; i < this.data.bookHeader.length; i++) {
                            cellId++;
                            returnVal += "<th><input data-cell='" + cellId + "' type='text' oninput='this.methods.handleSearch(this, event)' placeHolder='Search...'></th>";
                        }
                    }

                    returnVal += "</thead></tr><tbody>";

                    //循環遍歷bookData數據並輸出
                    this.data.bookData.forEach(function(thisBook, i, arr) {
                        var cellId = -1;
                        rowId++;
                        //輸出一行
                        returnVal += "<tr>";
                        thisBook.forEach(function(val, i, arr) {
                            cellId++;
                            if (rowId === edit.row && cellId === edit.cell) {
                                returnVal += "<td><form data-cell='" + cellId + "' data-row='" + rowId + "' onsubmit='this.methods.save(event)'><input type='text' value='" + val + "'></form></td>";
                            } else {
                                returnVal += "<td data-cell='" + cellId + "' data-row='" + rowId + "' ondblclick='this.methods.handleBlockOndblclick(event)'>" + 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';
                    }
                },
                handleBlockOndblclick(e) {
                    if (!this.staticData.isOpenEdit) {
                        this.staticData.isOpenEdit = true;
                        this.data.edit = {
                            row: parseInt(e.target.dataset.row),
                            cell: parseInt(e.target.dataset.cell)
                        }
                    }
                },
                save(e) {
                    e.preventDefault();
                    var input = e.target.firstChild;
                    this.staticData.isOpenEdit = false;
                    this.data.edit = {
                        row: -1,
                        cell: -1
                    }
                    this.data.bookData[e.target.dataset.row][e.target.dataset.cell] = input.value;
                    this.data.bookData = this.data.bookData;
                },
                trigSearch() {
                    if (this.data.isOpenSearch) {
                        this.data.bookData = this.staticData.preData;
                        this.data.isOpenSearch = false;
                    } else {
                        this.data.isOpenSearch = true;
                    }
                },
                handleSearch(el, e) {
                    var newData = [],
                        elVal = el.value;
                    this.staticData.preData.forEach(function(val, i, arr) {
                        if (val[e.target.dataset.cell].indexOf(elVal) !== -1) {
                            newData.push(val);
                        }
                    });

                    this.data.bookData = newData;
                }
            },
            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"]
                ],
                edit: {
                    row: -1,
                    cell: -1
                },
                isOpenSearch: false
            },
            staticData: {
                sortBy: -1,
                sortType: 'down',
                isOpenEdit: false,
                preData: [
                    ["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"]
                ]
            }
        })
        Ale.render("excel", {
            el: "#app"
        })

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

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