使用 ale.js 制作一个小而美的表格编辑器(1)
今天来教大家如何使用 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 或 码云,感谢你的支持!
我将在明天发布第二篇文章!敬请期待!
使用 ale.js 制作一个小而美的表格编辑器(1)相关推荐
- 使用 ale.js 制作一个小而美的表格编辑器(2)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 使用 ale.js 制作一个小而美的表格编辑器(3)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 使用 ale.js 制作一个小而美的表格编辑器(4)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器(1)
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台 原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
- 用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
- 如何用JAVA制作一个漂亮的表格
如何用JAVA制作一个漂亮的表格 表格图片: 选中一行时高亮显示,且字体变为红色: 在表格中添加数据: 代码如下: import java.awt.BorderLayout; import java. ...
- 教你用html+js制作一个自己的点名系统,实例代码分享
简介 教你用html+js制作一个自己的点名系统,实例代码如下. 效果 代码 HTML <div class="wrapper"><h1 align=" ...
最新文章
- mysql配置_Mysql配置 max_allowed_packet
- flash特效原理:螺旋效果 (3)
- 中南大学计算机有网络安全,中南大学2019年大学生网络安全知识竞赛(复赛)成功举行...
- QString::QString 中文乱码
- jquery validate 插件:(2)简单示例
- 如何从eclipse迁移到idea
- Matlab-重构和重新排列数组
- soc 设计soc设计 uml实务手册_采用 USB4 技术升级 SoC 设计
- 蛋白质结构域的概念_Chapter1 蛋白质结构与功能2
- 网页mp3提取器_用Python写一个酷狗音乐下载器!
- Java中printmax的调用形式_媒体类型和响应式设计
- 二维随机变量及其分布函数
- struts2编辑框中自动填充已经有的列表对应的值
- 【ArcGIS 10.2新特性】地理数据(Geodatabase 和database)10.2 新特性
- C语言练习:第二大整数
- 我在b站上大学:计算机类优秀网课汇总【持续更新】
- 谈谈层次分析法和熵权法以及Topsis
- Java学习路线-20:正则表达式
- 【四足机器人那些事】足端轨迹规划(一)
- 8个提高摸鱼效率的python自动化脚本,提高打工人幸福感~