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

pingink 發布于2019-08-23 14:44 / 1251人閱讀

摘要：如果你并沒有學習過的語法結構，請前往訪問教程接下來，我們在定義組件時設置一個屬性，并返回一個鏈接到屬性內的函數的值之后我們需要在屬性里面寫上函數。

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

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

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

ok，很簡單吧，我們這篇文章使用的是 ale.js 1.0.1?版本，首先先讓我們鏈接一下這個版本：

然后，我們再在 body 標簽里創建一個 div，id 為 app，作為我們這個組件的容器：

接著我們再創建一個 script 標簽，里面寫上以下代碼：

Ale("excel", {
    
})
Ale.render("excel", {
    el: "#app"
})

這句代碼的意思是，我們創建一個名為 excel 的組件，然后把它渲染到 id 為 app 的元素中。

（如果你并沒有學習過 alejs 的語法結構，請前往 cn.alejs.org?訪問教程）

接下來，我們在定義組件時設置一個 template 屬性，并返回一個鏈接到 methods 屬性內的 handleTemplateRender 函數的值：

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    }
})

之后我們需要在 methods 屬性里面寫上?handleTemplateRender 函數。不過在這之前，我們需要在 data 屬性內定義數據，分別是 bookHeader 和 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"]
    ]
}

定義 data 完成后，我們再去定義?handleTemplateRender 函數：

handleTemplateRender() {
    //定義DOM基本結構
    var returnVal = "";

    //循環遍歷bookHeader數據并輸出
    this.data.bookHeader.forEach(function(val, i, arr) {
        returnVal += "";
    })
    returnVal += "";

    //循環遍歷bookData數據并輸出
    this.data.bookData.forEach(function(thisBook, i, arr) {
        //輸出一行
        returnVal += "";
        thisBook.forEach(function(val, i, arr) {
            //輸出一列
            returnVal += "";
        })
        returnVal += "";
    })
    returnVal += "" + val + "
" + val + "";

    //返回DOM結構
    return returnVal;
}

" + val + "
" + val + "

好了，現在 alejs 就可以正常在頁面中輸出數據了：

以下是全部 js 代碼結構：

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    },
    methods: {
        handleTemplateRender() {
            //定義DOM基本結構
            var returnVal = "";

            //循環遍歷bookHeader數據并輸出
            this.data.bookHeader.forEach(function(val, i, arr) {
                returnVal += "";
            })
            returnVal += "";

            //循環遍歷bookData數據并輸出
            this.data.bookData.forEach(function(thisBook, i, arr) {
                //輸出一行
                returnVal += "";
                thisBook.forEach(function(val, i, arr) {
                    //輸出一列
                    returnVal += "";
                })
                returnVal += "";
            })
            returnVal += "" + val + "
" + val + "";

            //返回DOM結構
            return returnVal;
        }
    },
    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"]
        ]
    }
})
Ale.render("excel", {
    el: "#app"
})

" + val + "
" + val + "

看完了這篇文章，有想了解 alejs 的同學，可以訪問?alejs官網、Github?或?碼云，感謝你的支持！

我將在明天發布第二篇文章！敬請期待！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101064.html

window上小而美的軟件(推薦度按排名)

摘要：更好用更強大的筆記本本地翻譯神器解壓縮軟件程序文件快捷神器搜索本地文件神器像瀏覽器一樣打開文件夾記錄每次復制內容黏貼時可選擇復制黏貼神器程序文件快捷神器火螢醬程序文件快捷神器多窗口資源管理器干凈的射手播放器網絡監控控件錄屏軟件錄屏軟件更 Notepad++ 更好用更強大的筆記本 QTranslate 本地翻譯神器 7-zip 解壓縮軟件 Wox 程序/文件/快捷神器 1! Ever...

Alfred 2019-06-28 10:34 評論0 收藏0
小而美的顏色選擇器：xy-color-picker

摘要：表單元素新增了一個類型，也就是顏色選擇器。或者使用默認值可以給顏色選擇器指定一個初始顏色值，取值為合法的顏色值。值顏色設置或返回顏色選擇器的屬性值。默認返回當前格式下的顏色值。 html5表單元素input新增了一個color類型，也就是顏色選擇器。該選擇器在windows上的默認效果如下： showImg(https://segmentfault.com/img/bVbv8w7?...

Kylin_Mountain 2019-08-26 10:39 評論0 收藏0
Riot.js——一個小而美的JS框架

摘要：專有的內容更少，而更多符合標準的成分。當前標簽實例的方法被調用時當前標簽的任何一個祖先的被調用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數據驅動等更現代化框架的能力。 Riot.js是什么？ Riot 擁有創建現代客戶端應用的所有必需的成分：響應式視圖層用來創建用戶界面用來在各獨立模塊之間進行通信的事件庫用來管理URL和瀏覽器回...

nemo 2019-08-01 18:27 評論0 收藏0
Riot.js——一個小而美的JS框架

摘要：專有的內容更少，而更多符合標準的成分。當前標簽實例的方法被調用時當前標簽的任何一個祖先的被調用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數據驅動等更現代化框架的能力。 Riot.js是什么？ Riot 擁有創建現代客戶端應用的所有必需的成分：響應式視圖層用來創建用戶界面用來在各獨立模塊之間進行通信的事件庫用來管理URL和瀏覽器回...

tolerious 2019-08-22 13:59 評論0 收藏0
Fre：又一個小而美的前端MVVM框架

摘要：，大家好，好久不賤呢最近因為看了一些的小說，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應該是。 halo，大家好，好久不賤呢！最近因為看了一些 be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...

LittleLiByte 2019-08-02 16:07 評論0 收藏0