Kendo - 更改DataSource onclick

时间:2015-01-14 15:30:42

标签: javascript jquery kendo-ui kendo-datasource kendo-listview

我有一个关于在剑道中更改数据源的问题。

目前我的dataSource和Kendo List View看起来如下所示:

var DSOne = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_1,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var DSTwo = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_2,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var viewModel = kendo.observable({
        apps: DSOne
    });

    kendo.bind(jQuery('#listViewID'), viewModel);

    $("#pager").kendoPager({
        dataSource: DSOne
    });

我想要的是当我点击按钮更改viewModel和寻呼机的dataSource以便新数据加载到#listViewID

1 个答案:

答案 0 :(得分:0)

这是viewmodel和js。这只会改变一种方式,但如果需要,你应该可以从这里进行推断。

在此fiddle

中采取行动
var viewModel = kendo.observable({
    DSOne: new kendo.data.DataSource({
        data:[
            {id:1, name:'Bob'},
            {id:2, name:'Tom'},
            {id:3, name:'Carol'},
            {id:4, name:'Ann'}
        ],
        pageSize: 2,
        serverPaging: false
    }),
    DSTwo: new kendo.data.DataSource({
        data:[
            {id:5, name:'Dan'},
            {id:6, name:'Mark'},
            {id:7, name:'Al'},
            {id:8, name:'Lisa'},
            {id:9, name:'Eric'},
        ],
        pageSize: 2,
        serverPaging: false
    }),
    changeDataSource: function(e) {
        e.preventDefault();
        var listView = $("#listview").data('kendoListView')
            listView.setDataSource(viewModel.get('DSTwo'));
        var pager =$("#pager").kendoPager({dataSource: viewModel.get('DSTwo')}).data('kendoPager')

    }
});

kendo.bind(jQuery('#container'), viewModel);

$("#listview").kendoListView({
    dataSource: viewModel.get('DSOne'),
    template:" #=name#"
});

$("#pager").kendoPager({
    dataSource: viewModel.get('DSOne')
});