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

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

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

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


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展示


<!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>

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

你可能感兴趣的:(Webix学习笔记-表格应用-01-Loading)