使用 javascript 对象设置 Kendo UI 数据源

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20490023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:36:47  来源:igfitidea点击:

Kendo UI dataSource get set using javascript object

javascriptkendo-ui

提问by zaf

Just started experimenting with Kendo UI and I'm stuck with how one can use a standard javascript object to use as the datasource.

刚开始尝试使用 Kendo UI,我对如何使用标准 javascript 对象作为数据源感到困惑。

It's easy enough to initially load the data from the javascript object but I want to be able to get the data back after changes have occurred through user interaction.

最初从 javascript 对象加载数据很容易,但我希望能够在通过用户交互发生更改后取回数据。

Preferably, if this object is somehow synced with the widget, so all one has to do is read/write to this javascript object.

最好,如果这个对象以某种方式与小部件同步,那么我们要做的就是读/写这个 javascript 对象。

Our data:

我们的数据:

var _data = [
{
    eventID: 8,
    title: "Group meeting.",
    start: new Date("2013/06/13 07:00"),
    end: new Date("2013/06/13 08:30"),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 11:00"),
    end: new Date("2013/06/13 13:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
} ];

Init widget:

初始化小部件:

function save(){
   console.log(_data);    
}

$('.schedule').kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [ { type: "week", selected: true }],
        save: save,
        dataSource:_data
});

Here is the code setup to be tested (note the console.log debug on save):

这是要测试的代码设置(注意保存时的 console.log 调试):

http://jsfiddle.net/t23Ce/11/

http://jsfiddle.net/t23Ce/11/

How is one supposed to read/write the 'state' in the Kendo UI world?

在 Kendo UI 世界中,人们应该如何读/写“状态”?

回答by Lars H?ppner

A simple array cannot provide change tracking, so it is converted to a DataSourcewhen you create your widget. You can access the current state of your data in various ways:

简单的数组无法提供更改跟踪,因此在您创建小部件时将其转换为数据源。您可以通过多种方式访问​​数据的当前状态:

  1. get an array to iterate over all data: dataSource.data()
  2. access a specific item: dataSource.at(1)
  3. get filtered data: datasource.view()
  4. get a pure JS arrayback: dataSource.data().toJSON()
  1. 获取一个数组来遍历所有数据dataSource.data()
  2. 访问特定项目dataSource.at(1)
  3. 获取过滤数据datasource.view()
  4. 得到一个纯 JS 数组dataSource.data().toJSON()

回答by OnaBai

Despite you initialize the dataSourcefrom a JavaScript array (_data), KendoUI internally creates a DataSource (in your case a SchedulerDataSource) that only uses your array for loading the initial content.

尽管您dataSource从 JavaScript 数组 ( _data)初始化,但 KendoUI 在内部创建了一个SchedulerDataSource仅使用您的数组加载初始内容的数据源(在您的情况下为 a )。

If you need / want to keep using the array and reflect the changes in it, you would probably need to write some code for updating it.

如果您需要/想要继续使用数组并反映其中的更改,您可能需要编写一些代码来更新它。

If you can live with _datadefined as a ShedulerDataSource, then you can try defining it as:

如果您可以使用_data定义为 a ShedulerDataSource,那么您可以尝试将其定义为:

var _data = new kendo.data.SchedulerDataSource({
    data: [    {
        eventID: 8,
        title: "Group meeting.",
        start: new Date("2013/06/13 07:00"),
        end: new Date("2013/06/13 08:30"),
        pending:false,
        recurrenceRule: "",
        recurrenceException: "",
        description: "Take my brother to his group meeting.",
        isAllDay:false,
        ownTimeSlot:true,
        careAssistantId: 5,
        clientId: 6
    },{
        eventID: 9,
        title: "Make dinner.",
        start: new Date("2013/06/13 11:00"),
        end: new Date("2013/06/13 13:30"),
        pending:true,
        recurrenceRule: "",
        recurrenceException: "",
        description: "Make dinner for my mom.",
        isAllDay:false,
        ownTimeSlot:true,
        careAssistantId: 5,
        clientId: 6
    } ],
    schema: {
        model : {
            id : "eventID"
        }
    }
});

See it running here : http://jsfiddle.net/OnaBai/t23Ce/14/

看到它在这里运行:http: //jsfiddle.net/OnaBai/t23Ce/14/