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

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

是不是還是有一點非常 cool 的感覺的？那麼我們現在開始吧！

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

ok，那繼續開始吧（本篇文章是表格編輯器系列的第三篇文章，如果您還沒有看過第一篇，請訪問第一篇文章（開源中國））：

首先讓我們把每一個列表項都添加一個他們的行數和列數作爲 dataset 數據吧！

先創建一個 rowId 變量：

//在 handleTemplateRender 函數裏，我們把：
var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy;

//改爲
var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy,
    rowId = -1;

然後再在 “循環遍歷bookData數據並輸出” 這行註釋所對應的forEach函數的裏面創建一個名叫 cellId 的變量：（就是輸出td標籤的forEach）

//原來的代碼
this.data.bookData.forEach(function(thisBook, i, arr) {
    //輸出一行
    returnVal += "<tr>";
    thisBook.forEach(function(val, i, arr) {
        //輸出一列
        returnVal += "<td>" + val + "</td>";
    })
    returnVal += "</tr>";
})

//改爲
this.data.bookData.forEach(function(thisBook, i, arr) {
    var cellId = -1; //這裏增加了一行代碼
    //輸出一行
    returnVal += "<tr>";
    thisBook.forEach(function(val, i, arr) {
        //輸出一列
        returnVal += "<td>" + val + "</td>";
    })
    returnVal += "</tr>";
})

當然這樣還沒完，我們還需要改爲這樣：

this.data.bookData.forEach(function(thisBook, i, arr) {
    var cellId = -1;
    //這裏讓rowId++
    rowId++;
    returnVal += "<tr>";
    thisBook.forEach(function(val, i, arr) {
        //這裏讓cellId++
        cellId++;
        //注意這裏寫了 dataset
        returnVal += "<td data-row='" + rowId + "' data-cell='" + cellId + "'>" + val + "</td>";
    })
    returnVal += "</tr>";
})

這樣你就可以看到在控制檯上已經輸出了它們的 dataset：

接下來，讓我們往 data 裏面添加一個名叫 edit 的對象，用來指定我們點擊的到底是哪個表格：

edit: {
    row: -1, //默認爲-1，因爲沒有選中表格
    cell: -1
}

然後，我們把下面這行代碼，給他添加一個 ondblclick：

returnVal += "<td data-row='" + rowId + "' data-cell='" + cellId + "'>" + val + "</td>";

//改爲

newVal += "<td data-cell='" + cellId + "' data-row='" + rowId + "' ondblclick='this.methods.handleBlockOndblclick(event)'>" + val + "</td>";

然後我們在 methods 對象裏面添加一個 handleBlockOndblclick 的函數：

handleBlockOndblclick(e) {
    if (!this.staticData.isOpenEdit) { //判斷是否開啓了edit
        this.staticData.isOpenEdit = true;
        //獲取並設置目標格位置
        this.data.edit = {
            row: parseInt(e.target.dataset.row),
            cell: parseInt(e.target.dataset.cell)
        }
    }
}

因爲在 handleBlockOndblclick 函數裏面，我們用到了靜態數據的 isOpenEdit，所以我們需要定義一個：

isOpenEdit: false

ok，那麼之後我們需要再改進一下輸出 book 數據的那一行代碼，把他改成這樣：

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>";
    }
})

接下來讓我們在上方定義一個名叫 edit 的變量吧：

//把
var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy,
    rowId = -1;

//改爲
var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy,
    rowId = -1,
    edit = this.data.edit;

之後我們還需要在 methods 裏添加一個 save 函數，用來保存修改後的結果：

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;
}

好了，那麼現在我們的編輯器就可以正式運作了，我們已經實現了本篇文章最開始時所做的功能！（按回車可以保存修改結果）

這是我們目前全部的 js 代碼：

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    },
    methods: {
        handleTemplateRender() {
            //定義DOM基本結構
            var returnVal = "<table><thead><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>";
            })
            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;
        }
    },
    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
        }
    },
    staticData: {
        sortBy: -1,
        sortType: 'down',
        isOpenEdit: false
    }
})
Ale.render("excel", {
    el: "#app"
})

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

（非常重要：如果有能力的話不妨去 Github 或碼雲上 star 一下我們吧！不過如果您特別喜歡 alejs 的話也可以 watch 或 fork 一下哦！十分感謝！）

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

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

PowerJSON - 由 JSON 改進的數據交換格式

TKoa - 使用 TypeScript 重構的 Node.js Koa開發框架

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

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

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

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結