jQWidgets jqxScheduler资源属性

jQWidgets jqxScheduler是一款用于创建可视化调度表格的JavaScript插件，其中提供了多种可配置的资源属性用于在调度表格上创建自定义任务和事件。在本篇攻略中，我们将详细讲解jQWidgets jqxScheduler资源属性的使用方法和示例说明。

什么是资源属性

在jQWidgets jqxScheduler插件中，资源属性是指为调度表格中的任务和事件提供自定义属性的设置方式。调度表格中的任务和事件可以被分配给一个或多个资源，并且通过资源属性可以对任务和事件进行进一步的细分和定制。

资源属性包括但不限于以下几种：

resourceDataField：任务和事件所属资源的数据源字段名。
resourceColumnWidth：每个资源列的宽度。
resources：调度表格中所有资源的集合。

如何使用资源属性

使用jQWidgets jqxScheduler插件的资源属性非常简单，只需要在配置项中添加对应的属性即可。例如，我们通过以下配置生成一个调度表格：

var source =
{
    dataType: "json",
    dataFields: [
        { name: 'id', type: 'string' },
        { name: 'status', type: 'string' },
        { name: 'text', type: 'string' },
        { name: 'start', type: 'date' },
        { name: 'end', type: 'date' },
        { name: 'resourceId', type: 'string' }
    ],
    id: 'id',
    url: 'data.php'
};

var adapter = new jqx.dataAdapter(source);

$('#scheduler').jqxScheduler({
    date: new Date(2022, 9, 23),
    width: '100%',
    height: 600,
    source: adapter,
    view: 'weekView',
    showToolbar: true,
    resources: [
        {
            dataField: 'resourceId',
            title: 'Room 101',
            width: '100%',
            source: new jqx.dataAdapter({
                dataType: 'json',
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'name', type: 'string' }
                ],
                id: 'id',
                url: 'rooms.php'
            })
        }
    ]
});

我们在资源属性中添加了resources，并通过dataField指定了任务和事件所属的资源ID字段名。同时我们也指定了资源的title和source属性，用于指定资源名称和资源数据源。

使用资源属性可以更加灵活的对任务和事件的资源属性进行设置，使得调度表格更加符合实际需要。

示例说明

以下是两个示例说明，向您展示了如何在jQWidgets jqxScheduler插件中使用资源属性来创建自定义的调度表格。

示例一：使用多个资源列

我们假设现在需要创建一个调度表格，要求每个任务和事件可以被分配到多个资源中。为了实现这一需求，我们可以使用resources的数组来实现。在以下示例中，我们创建一个调度表格，并指定两个资源列，每行任务可以被分配到多个资源中。

var source =
{
     dataType: "json",
     dataFields: [
         { name: 'id', type: 'string' },
         { name: 'subject', type: 'string' },
         { name: 'from', type: 'date' },
         { name: 'to', type: 'date' },
         { name: 'resource1', type: 'string' },
         { name: 'resource2', type: 'string' }
     ],
     id: 'id',
     url: 'appointments.php'
};

var appointmentData = new $.jqx.dataAdapter(source);

$('#scheduler').jqxScheduler({
     width: '100%',
     height: 700,
     showToolbar: true,
     resources:
     [
         {
             dataField: 'resource1',
             title: 'Employee',
             source: new $.jqx.dataAdapter(source)
         },
         {
             dataField: 'resource2',
             title: 'Room',
             source: new $.jqx.dataAdapter(source)
         }
     ],
     appointmentDataFields:
     {
         from: 'from',
         to: 'to',
         id: 'id',
         subject: 'subject',
         resourceId1: 'resource1',
         resourceId2: 'resource2'
     },
     views:
     [
         'dayView',
         'weekView',
         'monthView'
     ]
 });

在以上示例中，我们定义了两个资源列，并通过dataField指定了我们任务和事件中所属的资源字段名。资源列的title用于定义资源列的标题，source为我们资源列中资源数据源。

在appointmentDataFields中我们指定了各个属性所对应的数据源字段名。其中resourceId1和resourceId2分别对应任务和事件中所属的资源ID字段名，这两个属性为jqxScheduler插件所内置。

示例二：使用资源组

在jQWidgets jqxScheduler插件中，我们可以把资源列组合成资源组，用于更加灵活的对任务和事件进行分配。以下是一个使用资源组的示例，这个调度表格用来管理各个员工的日程安排。

var source =
{
     dataType: "json",
     dataFields: [
         { name: 'id', type: 'string' },
         { name: 'subject', type: 'string' },
         { name: 'from', type: 'date' },
         { name: 'to', type: 'date' },
         { name: 'group', type: 'string' }
     ],
     id: 'id',
     url: 'appointments.php'
};

var appointmentData = new $.jqx.dataAdapter(source);

$('#scheduler').jqxScheduler({
     width: '100%',
     height: 700,
     showToolbar: true,
     resources:
     [
         {
             dataField: 'group',
             title: 'Employee Group',
             allowMultiple: false,
             source: new $.jqx.dataAdapter(source)
         },
         {
             dataField: 'id',
             title: 'Employee',
             allowMultiple: true,
             source: new $.jqx.dataAdapter(source)
         }
     ],
     appointmentDataFields:
     {
         from: 'from',
         to: 'to',
         id: 'id',
         subject: 'subject',
         resourceId: 'id'
     },
     views:
     [
         'dayView',
         'weekView',
         'monthView'
     ]
 });

在以上示例中，我们通过dataField将任务和事件分配到对应的资源中。同时我们也针对每个资源特别设置了allowMultiple属性，指定是否允许一个任务或事件分配到多个资源中。

最后，这个调度表格展示了员工的日程安排，并且可以以资源组的形式进行管理和分配。

总结

在本篇攻略中，我们详细讲解了jQWidgets jqxScheduler插件的资源属性，在这些属性中，我们可以灵活的对任务和事件进行分配和定制，使得调度表格更加符合实际需求。无论是多个资源列还是资源组，这些属性都能够为我们的调度表格的创建提供更加完善和灵活的方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxScheduler资源属性 - Python技术站