V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
18510047382
V2EX  ›  前端开发

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

  •  
  •   18510047382 · 2019-01-15 17:44:40 +08:00 · 2136 次点击
    这是一个创建于 1899 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 或 码云,感谢你的支持!

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4804 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 01:09 · PVG 09:09 · LAX 18:09 · JFK 21:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.