jQWidgets jqxScheduler Source 属性

简介

jQWidgets是一款流行的JavaScript工具包，提供组件和部件以便于开发Web应用程序。其中一个组件是jqxScheduler，它是一个功能强大的事件日历/调度工具。Source 属性是jqxScheduler中的一个属性，用于获取或设置调度器的数据源，即事件列表。

用法

Source 属性可以从本地数据源或远程服务器获取调度器的数据。在本地，可以使用数据数组、XML文件或JSON文件作为数据源。在远程服务器上，可以使用REST API或Web服务来获取数据。以下是在jqxScheduler中使用Source属性的示例：

$("#scheduler").jqxScheduler({
    date: new Date(2021, 07, 01),
    width: '100%',
    height: '500px',
    source: new $.jqx.dataAdapter({
        datatype: 'array',
        datafields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' },
            { name: 'color', type: 'string' },
            { name: 'background', type: 'string' },
            { name: 'borderColor', type: 'string' }
        ],
        localdata: [
            {
                id: '1',
                description: 'Meeting with John',
                location: 'Office',
                subject: 'Important Meeting',
                start: new Date(2021, 07, 01, 10, 0, 0),
                end: new Date(2021, 07, 01, 12, 0, 0),
                color: '#4eb3d3',
                background: '#d9edf7',
                borderColor: '#46b8da'
            },
            {
                id: '2',
                description: 'Lunch with Sarah',
                location: 'Restaurant',
                subject: 'Casual Meeting',
                start: new Date(2021, 07, 01, 13, 0, 0),
                end: new Date(2021, 07, 01, 14, 0, 0),
                color: '#f0ad4e',
                background: '#fcf8e3',
                borderColor: '#eea236'
            },
            {
                id: '3',
                description: 'Interview with Mark',
                location: 'Office',
                subject: 'Job Interview',
                start: new Date(2021, 07, 02, 9, 0, 0),
                end: new Date(2021, 07, 02, 11, 0, 0),
                color: '#5cb85c',
                background: '#dff0d8',
                borderColor: '#4cae4c'
            }
        ]
    })
});

在此示例中，使用本地数据源作为jqxScheduler的数据源，数据通过数组传递。要使用远程数据源，可以使用URL作为数据源，而不是本地数据。以下是使用URL作为数据源的示例：

$("#scheduler").jqxScheduler({
    date: new Date(2021, 07, 01),
    width: '100%',
    height: '500px',
    source: new $.jqx.dataAdapter({
        datatype: 'json',
        datafields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' },
            { name: 'color', type: 'string' },
            { name: 'background', type: 'string' },
            { name: 'borderColor', type: 'string' }
        ],
        url: 'http://myserver/getdata',
        async: false
    })
});

在以上示例中，数据源以JSON格式从远程服务器获取。

总结

Source 属性是jqxScheduler中一个重要的属性，用于设置调度器的数据源。它可以使用本地数据源或从远程服务器获取数据。使用它可以轻松地将事件列表添加到jqxScheduler中，这是一个功能强大的事件日历/调度工具。