文档章节

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

Bd999
 Bd999
发布于 01/16 16:57
字数 1090
阅读 455
收藏 3

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

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

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

ok,那继续开始吧(本篇文章是表格编辑器系列的第二篇文章,如果您还没有看过第一篇,请访问 第一篇文章(开源中国)):

首先我们写一个名叫 staticData 的 object,里面添加2个属性,分别是 sortBy 和 sortType:(关于 staticData 这里不做阐述,如果有需要请访问 cn.alejs.org

staticData: {
    sortBy: -1, //排序列索引,默认没有,所以为-1
    sortType: 'down' //排序类型,默认为降序
}

之后我们在 th 标签里面增加一个 onclick 属性,指向 methods 里面的 handleTheadOnclick 函数,并传递一个 event 作为参数:

(之前的代码)

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th>" + val + "</th>";
})

(改进后的代码)

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + "</th>";
})

为了让他显示排序时的小箭头,我们需要再改进这行代码为这样:

this.data.bookHeader.forEach(function(val, i, arr) {
    returnVal += "<th onclick='this.methods.handleTheadOnclick(event)'>" + val + (sortBy === i ? getSortSign() : '') + "</th>";
})

由于 sortBy 变量和 getSortSign 函数变量还未定义,所以我们要在之前的代码里引用一下:

(原来的代码)

var returnVal = "<table><thead><tr>";

(改进后的代码)

var returnVal = "<table><thead><tr>",
    getSortSign = this.methods.getSortSign,
    sortBy = this.staticData.sortBy;

其中,sortBy 变量指向的是静态 data 里的 sortBy 变量,这个我们已经定义了,所以先不管他。而另一个 getSortSign 函数还没有定义,所以我们在 methods 里面定义一下他:

getSortSign() {
    if (this.staticData.sortType === "up") {
        return '\u2191';
    } else {
        return '\u2193';
    }
}

其功能主要就是判断是正序还是倒叙,并分别输出正反小箭头。

之后我们就需要完成 handleTheadOnclick 函数了。它分别引用了 changeSortType 和 sortList 函数:

handleTheadOnclick(e) {
    this.methods.changeSortType(e);
    this.methods.sortList(e);
}

其中 changeSortType 函数是用来改变排序类型的,而 sortList 函数使用来排序的。

那么我们先完成 changeSortType 函数吧:

changeSortType(e) {
    this.staticData.sortBy = e.target.cellIndex;
    if (this.staticData.sortType === "up") {
        this.staticData.sortType = "down";
    } else {
        this.staticData.sortType = "up";
    }
}

ok,这个函数的功能和实现都非常简单,其中 cellIndex 是用来获取这是属于表格中那一列的。

那么 sortList 函数的实现则稍微有些复杂:

sortList(e) {
    //获取列索引值
    var index = e.target.cellIndex;
    //判断排序类型
    if (this.staticData.sortType === "up") {
        //使用数组的 sort 函数进行排序,分别按 charCode 进行排序
        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;
}

这是我们目前的全部 js 代码:

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

            //循环遍历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) {
                //输出一行
                returnVal += "<tr>";
                thisBook.forEach(function(val, i, arr) {
                    //输出一列
                    returnVal += "<td>" + 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';
            }
        }
    },
    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"]
        ]
    },
    staticData: {
        sortBy: -1,
        sortType: 'down'
    }
})
Ale.render("excel", {
    el: "#app"
})

然后效果就如下图所示啦:

如果想了解更多,欢迎关注我在明天推出的第三篇教程,同时也关注一下 alejs 哦,感谢各位!

(非常重要:如果有能力的话不妨去 Github 或 码云 上 star 一下我们吧!不过如果您特别喜欢 alejs 的话也可以 watch 或 fork 一下哦!十分感谢!)

© 著作权归作者所有

共有 人打赏支持
Bd999
粉丝 3
博文 6
码字总数 9316
作品 1
海淀
私信 提问
浏览器端 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 招聘 0x14 期:别人家的公司是什么样的?

硅谷式办公环境,人人标配MacBook; 与聪明优秀的同事一起共事,做有趣,好玩,有挑战性的工作; 期权,带薪年假,弹性工作制,一日三餐,水果零食统统免费随便吃; 这是别人家的公司,你是不...

oschina
2016/07/06
5K
18
MD 编辑器 Vditor v0.1.8 发布,细节改进

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

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

他们体量小 他们人数少 他们是小公司 他们专注于一件事 但是,请相信 在一个趋势领域深耕,定会开出小而美的花朵 以下是本期小而美公司推荐: 有鱼金服[北京] 北京有鱼金服网络科技有限公司,...

oschina
2016/05/18
3.2K
20

没有更多内容

加载失败,请刷新页面

加载更多

.net Int16 、(int Int32)、 Int64 的区别

.net Int16 、(int Int32)、 Int64 的区别 easonjim 2015-09-25 01:41:00 浏览129 评论0 Framework html 存储 数据类型 摘要: 关于什么是16位整数,32位整数,64位整数,请看这里:http://ww...

linjin200
32分钟前
1
0
jsch密钥连接远程Linux报错com.jcraft.jsch.JSchException: invalid privatekey: [B@277050dc

jsch密钥连接远程Linux报错,信息如下: Exception in thread "main" com.jcraft.jsch.JSchException: invalid privatekey: [B@277050dcat com.jcraft.jsch.KeyPair.load(KeyPair.java:6......

尚浩宇
33分钟前
2
0
做JAVA开发的同学一定遇到过的爆表问题,看这里解决

背景:Java线上服务运行一周后,某个周六晚上CPU使用率突然持续99%,Java进程处于假死状态,不响应请求。秉着先恢复服务再排查问题的原则,在我连接VPN采用重启大法后,CPU使用率恢复正常,服...

编程SHA
35分钟前
3
0
知乎大佬推荐的4个高质量的微信小程序,每一个都让你用的放心!

很多时候身边的朋友总是见我手机都是很简洁,没有过多的APP去填充,这时他们都会问我,为什么我的手机上软件这么少,够用吗?而我的回答就是,够用,软件不在于多,而在于好用,当然我手机上...

架构师springboot
37分钟前
2
0
初学数据结构--跳跃表

Skip List的工作原理 Skip List(跳跃表)是一种支持快速查找的数据结构,插入、查找和删除操作都仅仅只需要O(log n)对数级别的时间复杂度,它的效率甚至可以与红黑树等二叉平衡树相提并论,...

loubobooo
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部