jQWidgets jqxScheduler scrollTop()方法

jQWidgets是一款功能强大的JavaScript UI框架，jqxScheduler是其中的一款日历调度控件。scrollTop()方法是一个jQuery方法，用于设置或返回被选元素的垂直滚动条位置。下面我们来详细讲解“jQWidgets jqxScheduler scrollTop()方法”的完整攻略。

1. scrollTop()方法的使用

1.1 设置滚动条位置

首先，我们可以使用scrollTop()方法设置滚动条的位置。可以通过选择器选择需要设置滚动条位置的元素，如下所示：

$(selector).scrollTop(value)

其中，selector是需要设置滚动条位置的选择器，value是需要设置的滚动条位置。例如，我们可以通过以下代码将scrollTop()方法应用于jqxScheduler控件的滚动条上：

$('#scheduler').scrollTop(200);

这将会将jqxScheduler控件的垂直滚动条位置设置为200。

1.2 获取滚动条位置

除了设置滚动条位置，我们也可以使用scrollTop()方法来获取当前滚动条位置。可以通过选择器选择需要返回滚动条位置的元素，如下所示：

$(selector).scrollTop()

例如，我们可以通过以下代码获取当前jqxScheduler控件的垂直滚动条位置：

var scrollTop = $('#scheduler').scrollTop();

这将会把当前jqxScheduler控件的垂直滚动条位置存储在变量scrollTop中。

2. 示例说明

下面我们来看两个示例说明。

2.1 示例1

我们定义一个<div>元素来存放jqxScheduler控件，并通过jqxScheduler的API设置其中的事件。

<div id="scheduler"></div>

var source = {
    dataType: "json",
    dataFields: [
        { name: 'id', type: 'string' },
        { name: 'status', type: 'string' },
        { name: 'date', type: 'date' },
        { name: 'staff', type: 'string' }
    ],
    localData: [
        {
            id: '1',
            status: 'new',
            date: '2022-01-01 09:00:00',
            staff: 'John'
        },
        {
            id: '2',
            status: 'working',
            date: '2022-01-03 10:00:00',
            staff: 'Mary'
        },
        {
            id: '3',
            status: 'done',
            date: '2022-01-05 15:00:00',
            staff: 'Peter'
        }
    ]
};

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

$('#scheduler').jqxScheduler({
    date: new Date(),
    width: 1000,
    height: 600,
    source: dataAdapter,
    view: 'weekView',
    showLegend: true,
    appointmentDataFields:
        {
            from: 'date',
            to: 'date',
            id: 'id',
            description: 'status',
            subject: 'staff'
        },
    resources:
        {
            colorScheme: 'scheme05',
            dataField: 'staff',
            source: new $.jqx.dataAdapter(source)
        }
});

现在，我们将它放在一个父元素中，并使用overflow:scroll来让它出现一个垂直滚动条。通过scrollTop()方法，我们可以自动定位到某些预先定义过的约会时间。

<div style="height:300px;overflow:scroll;">
    <div id="scheduler"></div>
</div>

$('#scheduler').jqxScheduler('ensureAppointmentVisible', '1');
var scrollTop = $('#scheduler').scrollTop();
$('#scheduler').scrollTop(scrollTop + 50);

这个示例中，我们首先使用ensureAppointmentVisible方法将jqxScheduler控件滚动到ID为1的约会。然后，我们使用scrollTop()方法来将滚动条向下滚动50像素。

2.2 示例2

我们定义一个<div>元素来存放jqxScheduler控件，并手动设置滚动条位置。

<div id="scheduler"></div>

var source = {
    dataType: "json",
    dataFields: [
        { name: 'id', type: 'string' },
        { name: 'status', type: 'string' },
        { name: 'date', type: 'date' },
        { name: 'staff', type: 'string' }
    ],
    localData: [
        {
            id: '1',
            status: 'new',
            date: '2022-01-01 09:00:00',
            staff: 'John'
        },
        {
            id: '2',
            status: 'working',
            date: '2022-01-03 10:00:00',
            staff: 'Mary'
        },
        {
            id: '3',
            status: 'done',
            date: '2022-01-05 15:00:00',
            staff: 'Peter'
        }
    ]
};

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

$('#scheduler').jqxScheduler({
    date: new Date(),
    width: 1000,
    height: 600,
    source: dataAdapter,
    view: 'weekView',
    showLegend: true,
    appointmentDataFields:
        {
            from: 'date',
            to: 'date',
            id: 'id',
            description: 'status',
            subject: 'staff'
        },
    resources:
        {
            colorScheme: 'scheme05',
            dataField: 'staff',
            source: new $.jqx.dataAdapter(source)
        }
});

$('#scheduler').scrollTop(300);

这个示例中，我们使用scrollTop方法手动设置了jqxScheduler控件的垂直滚动条位置，将它设置为300像素。当打开页面时，我们可以看到它自动滚动到这个位置，并显示出在此位置下方的行程。