Webix学习笔记-表格应用-01-Loading

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

只要是企业级的应用，基本上逃不过Table的应用，大量的表格用来显示、操作数据变成了一种魔咒。估计罪魁祸首还是Microsoft Excel，不管是手工电子表格、C/S架构的应用软件还是B/S架构的应用软件，都恨不得全跟Excel一样，想怎么拖就怎么拖，想怎么写就怎么写，想怎么算就怎么算，想怎么导就怎么导。自从Google弄了个在线电子表格后，Web版的Table也越来越强大。似乎一个页面框架套件中没有Table或者Table不够灵活都会影响到框架的推广。Webix也不例外，所以，不想学也得学了，不过幸亏Webix的Table入门很容易，至于后面会怎么样，我也不知道啊。

先入个门，把后台数据库中的数据使用Table加载到页面中。后台建立一个闭包，将数据库中的数据生成Json格式，Webix对Json支持非常好，而Grails也是对Json支持非常好，这两个东西用Json做数据交换确实是一件很愉快的事情

第一步：在后台服务器端建立一个getMovWithJson闭包

<!-- lang: groovy -->
def getMovWithJson = {
    if(!Mov.list()) {
        new Mov(title:'The Shawshank Redemption',year:'1994').save()
        new Mov(title:'The Godfather',year:'1972').save()
        new Mov(title:'The Godfather: Part II',year:'1974').save()
        new Mov(title:'The Good, the Bad and the Ugly',year:'1966').save()
        new Mov(title:'My Fair Lady',year:'1964').save()
        new Mov(title:'12 Angry Men',year:'1957').save()
        new Mov(title:'X Man',year:'1990').save()
    }
	
    render Mov.list() as JSON
}

呵呵，很熟悉吧。对了，就是前面list获取Json数据的那个闭包，一个字没改。

第二步：客户端请求数据并用Table展示

<!-- lang: groovy -->
<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <title>Beginner</title>
</head>

<body>
    <div id='testA'></div>

    <script type="text/javascript" charset="utf-8">
    webix.ready(function(){
        grida = new webix.ui({
            container:"testA",
            view:"datatable",
            columns:[
                { id:"id",	header:"", css:"rank",  width:50},
                { id:"title",	header:"Film title",width:200},
                { id:"year",	header:"Released" , width:80}
            ],

            autoheight:true,
            autowidth:true,
            select:"row",

            url: "table/getMovWithJson"
        });	
    });
    </script>
</body>

整个页面的代码都在这里了，代码量非常小，功能很强大。说实在的让我继续学下去的动力就在这里

来源：oschina

链接：https://my.oschina.net/u/131450/blog/170170

标签

软件

webix

table