使用 ale.js 制作一个小而美的表格编辑器（1）

pingink 发布于2019-08-23 14:44 / 1250人阅读

摘要：如果你并没有学习过的语法结构，请前往访问教程接下来，我们在定义组件时设置一个属性，并返回一个链接到属性内的函数的值之后我们需要在属性里面写上函数。

今天来教大家如何使用 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 或码云，感谢你的支持！

我将在明天发布第二篇文章！敬请期待！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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