通过 php 动态加载 webix

Question

Webix 数据表

我让它从 php 脚本中读取，但它只获取第一个数据集。 php 脚本接受 &page= [当前页] 和 &size= [记录数] 如果我将所有记录都提供给它，我只能让它进行分页。（这是行不通的，因为那是大约 1 场演出，哈哈。

这是一个数据示例。 [我已将其限制为 2 个结果]

{
"count": 84,
"count_filtered": 84,
"rows": [
    {
        "id": 1,
        "accountName": "test",
        "status": 2,
        "notes": null,
        "globalIframe": null,
        "globalPostback": null,
        "postBackDelayMS": 0,
        "streetAddress1": null,
        "streetAddress2": null,
        "postalCode": null,
        "city": null,
        "countryCode": null,
        "stateProvince": null,
        "accountManager": 1,
        "paymentCycle": 0,
        "minimumPayment": 100,
        "paymentType": 0,
        "paymentDetails": null,
        "created_at": "2017-12-02 19:03:41",
        "updated_at": "2017-12-02 19:03:41"
    },
    {
        "id": 2,
        "accountName": "ta",
        "status": 2,
        "notes": null,
        "globalIframe": null,
        "globalPostback": null,
        "postBackDelayMS": 0,
        "streetAddress1": null,
        "streetAddress2": null,
        "postalCode": null,
        "city": null,
        "countryCode": null,
        "stateProvince": null,
        "accountManager": 1,
        "paymentCycle": 0,
        "minimumPayment": 100,
        "paymentType": 0,
        "paymentDetails": null,
        "created_at": "2017-12-02 19:07:49",
        "updated_at": "2017-12-02 19:07:49"
    }
],
"listable": []

}

这是我用来将该数据拉入 webix 数据的 JS table。

var datatable = webix.ui({
    view:"datatable", 
    container:"dataTable",
    datafetch:20,
    datathrottle: 500,
    loadahead:100,
    autoheight:true,
    autowidth:true,
    yCount:10,
    autoConfig:true,
    columns:[
{ id:"accountName",    header:"Affiliate Name",  width:tableWidth}
],
on:{
    onBeforeLoad:function(){
        this.showOverlay("Loading...");
    },
    onAfterLoad:function(){
        this.hideOverlay();
    }
},

url:function(details){
    return webix.ajax("/affiliates/data?1").then(function(data){
        var js = data.json();
        var new_js = [];

        for (key in js['rows']){
            new_js.push({
                id:js['rows'][key].id, 
                accountName:js['rows'][key].accountName
            });     

        };

        return new_js;
    })
},
navigation:"true",
pager:{
    container:"dataPager",
    size:10,
    group:4

}
}); 


datatable.attachEvent("onDataRequest", function(start, count, callback){     //count
    var view = this;
    console.log("GETTING DATA");
    webix.ajax().get("/affiliates/data?size=10&page="+start/10).then(function(data){
        console.log(data);

    this.parse(data.json());
     var js = data.json();
    var new_js = [];

    for (key in js['rows']){
        new_js.push({
            id:js['rows'][key].id, 
            accountName:js['rows'][key].accountName
        });     

    };
    return new_js;
})
    return false;
})

我花了大约一个星期的时间试图解决这个问题，所以要温柔。提前致谢。

Answer 1

所以我解决了。

var datatable = webix.ui({
    view:"datatable", 
    container:"dataTable",
    datafetch:25,
    datathrottle: 500,
    loadahead:0,
    autoheight:true,
    autowidth:true,
    yCount:25,
    autoConfig:true,
    columns:[
{ id:"accountName",    header:"Affiliate Name",  width:tableWidth, sort:"server"}
],
on:{
    onBeforeLoad:function(){
        this.showOverlay("Loading...");
    },
    onAfterLoad:function(){
        this.hideOverlay();
    }
},
url:'/affiliates/webixdata',
navigation:"true",
pager:{
    container:"dataPager",
    size:25


}
});

然后我更改了控制器以匹配服务器端响应 https://docs.webix.com/desktop__plain_dynamic_loading.html#serversideresponse

这比记录在案的 webix promise 样式函数在解析之前在 JS 中操作数据更好。

通过 php 动态加载 webix

webix dynamic loading via php

javascript

datatable

jquery

json

webix