webix数据表列明智地排成行

时间:2017-09-26 07:41:15

标签: javascript webix

嘿伙计我在webix中面临一个问题,我希望以行方式显示,但我无法找到如何以这种方式显示它我可以在列中显示它从数据库中获取的数据被转换为json格式。这是代码snipet,请给我一些建议



<script type="text/javascript">
        webix.ajax("datacon.php", function(text, incomingData){
            //text = '{ some :"abc"}'
            var data=incomingData.json();



            webix.ui({
                container: "box",
                rows:[
                    {view:"template", type:"header", template: "some text"},
                    {view: "datatable", data: data, height: 300,
                        columns:[
                            {id:"date", header:"Date"},
                            {id:"ob", header:"OB"},
                            {id:"ore", header:"ORE"},
                            {id:"stratio", header:"Stripping Ratio"}
                        ]
                    }

                ]
            }); 
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

实际上你的代码工作不正常。它在代码段中显示错误,请检查。

此外,在上面的代码中,您必须提到视图类型,例如“view:datatable / list / tree”或其中任何一种。进行更改并恢复原状。

在webix DataTable中,您无法添加单行。您必须根据其打印模式写入数据。

以下是webix

中数据表的简单示例

<script src="https://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">

<script>
var datatable = webix.ui({
    view:"datatable", 
    columns:[
        { id:"rank",    header:"",              width:50},
        { id:"title",   header:"Film title",    width:200},
        { id:"year",    header:"Released",      width:80},
        { id:"votes",   header:"Votes",         width:100}
    ],
    data: [
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1},
        { id:2, title:"The Godfather", year:1972, votes:511495, rank:2}
    ]
});
</script>

您只需将“Id”与相应的数据标记相匹配即可。列部分中引用的ID应与数据文件的“键”相同。此外,列的标题使用“标题”参数设置。

这些是一些有助于使用webix加速开发的工具。

  1. https://webix.com/skin-builder/?utm_source=newsletter&utm_medium=email&utm_campaign=3_free_tools_to_create_awesome_apps&utm_term=2017-09-26

  2. https://webix.com/form-builder/?utm_source=newsletter&utm_medium=email&utm_campaign=3_free_tools_to_create_awesome_apps&utm_term=2017-09-25