javascript - webix 数据表按列到行

Question

嘿，大家好，我在 webix 中遇到一个问题，我想按行显示，但我无法找到如何以这种方式显示它，我可以按列显示它，它从数据库中获取的数据已转换为 json 格式。这是代码片段，请给我一些建议

<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"}
                        ]
                    }

                ]
            }); 

Answer 1

实际上您的代码无法正常工作。它显示片段中的错误，请检查。

此外，在上面的代码中，您必须提及 View 类型，例如“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 应与数据文件的“Keys”相同。列的标题也是使用“header”参数设置的。

这些是一些有助于使用 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