文档章节

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

Bd999
 Bd999
发布于 01/15 17:27
字数 778
阅读 588
收藏 0

今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif:

是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧!

这是我们这篇文章结束后完成的效果(如果想继续完成请访问第二篇文章):

ok,很简单吧,我们这篇文章使用的是 ale.js 1.0.1 版本,首先先让我们链接一下这个版本:

<script src="https://cdn.jsdelivr.net/npm/alejs@1.0.1/ale.js"></script>

然后,我们再在 body 标签里创建一个 div,id 为 app,作为我们这个组件的容器:

<div id="app">
</div>

接着我们再创建一个 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 = "<table><thead><tr>";

    //循环遍历bookHeader数据并输出
    this.data.bookHeader.forEach(function(val, i, arr) {
        returnVal += "<th>" + val + "</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;
}

好了,现在 alejs 就可以正常在页面中输出数据了:

以下是全部 js 代码结构:

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    },
    methods: {
        handleTemplateRender() {
            //定义DOM基本结构
            var returnVal = "<table><thead><tr>";

            //循环遍历bookHeader数据并输出
            this.data.bookHeader.forEach(function(val, i, arr) {
                returnVal += "<th>" + val + "</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;
        }
    },
    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"
})

看完了这篇文章,有想了解 alejs 的同学,可以访问 alejs官网Github 或 码云,感谢你的支持!

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

© 著作权归作者所有

共有 人打赏支持
Bd999
粉丝 3
博文 6
码字总数 9316
作品 1
海淀
私信 提问
加载中

评论(2)

Bd999
Bd999

引用来自“蓝水晶飞机”的评论

XSS get it
ale会自动转义html
蓝水晶飞机
蓝水晶飞机
XSS get it
浏览器端 Markdown 编辑器 Vditor 宣布开源

下一代的 Markdown 编辑器,为未来而构建 简介 Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。 背景 我们在开发 Sym 的初期是直接使用 WYSIWYG 富文本编辑器的。那时候基...

88250
02/12
0
0
浏览器端的 Markdown 编辑器 - Vditor

简介 Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。 背景 我们在开发 Sym 的初期是直接使用 WYSIWYG 富文本编辑器的。那时候基于 HTML 的编辑器非常流行,项目中引用起来...

88250
02/11
0
0
OSC招聘::那些小而美的公司 0x5期

2016年3月21日英特尔前 CEO 安迪·格鲁夫 过世,享年 79 岁。没错,就是那位带领英特尔以「为 PC 时代的到来出一份力」的理念推出了 386 和 Pentium 处理器的人! 在1968年,安迪·格鲁夫成为...

翟志军
2016/03/23
4.3K
12
MD 编辑器 Vditor v0.1.8 发布,细节改进

简介 Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。 案例 Sym:一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台 Solo:一款小而美的博客系统,使用 Java 实...

88250
02/14
0
0
OSC 招聘( 0xF 期-那些小而美的公司 )

高考结束,端午到来。首先祝各位攻城狮:节日快乐! 今日,我们集齐了北上广三地小而美的公司,召唤大家来投递! 李笑来先生的“让一部分知识分子先富起来”的梦想等着你一起实现; 通联数据...

oschina
2016/06/08
3.7K
10

没有更多内容

加载失败,请刷新页面

加载更多

网站漏洞检测之WordPress 5.0.0 修复方案

2019年正月刚开始,WordPress最新版本存在远程代码注入获取SHELL漏洞,该网站漏洞影响的版本是wordpress5.0.0,漏洞的产生是因为image模块导致的,因为代码里可以进行获取目录权限,以及文件...

网站安全
41分钟前
0
0
MySql 优化 group by 语句

默认情况下,Mysql 对所有 group by 的字段进行排序,如果查询包括 group by ,用户想要避免排序结果的消耗。可以指定 order by null 禁止排序。 mysql> EXPLAIN select * from sys_log gro...

嘴角轻扬30
今天
9
0
Linux分区&格式化&文件系统&LVM&扩容

硬件 磁盘由 盘片组、主轴马达、机械臂、磁头、驱动芯片和电路、接口等构成 2. 磁盘的分割 每个盘片很多同心圆分割为磁道 Trace 一组盘片的同径磁道叫做一个柱面 Cylinder 每个磁道又被分为很...

可数局部基
今天
5
0
刷leetcode第705题- 设计哈希集合

这个我可能做的不是很符合题意,虽然AC了,但是没有去用到hash函数之类的方式。同样使用了位运算来搞定这一切,简单易懂。上代码如下: typedef char MyHashSet;/** Initialize your data ...

锟斤拷烫烫烫
今天
4
0
【spring】- springmvc 工作原理

核心:前端控制器:DispatcherServlet 功能:MVC设计模式中的Controller角色,掌控全局 类图 原理 本质是将DispatcherServlet及关联的Spring上下文环境的初始化工作织入Servlet的生命周期内,...

ZeroneLove
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部