博客

jQWidgets是一个面向企业级Web应用开发的UI组件库，其中jqxScheduler是日程安排控件，可以用于各种时间、日期和日历方面的业务场景，其中rowsHeight属性表示日程栏目的高度，下面将详细讲解其完整攻略。

1. rowsHeight属性介绍

rowsHeight属性指定jqxScheduler控件中每个日程栏目(row)的高度。默认值为30像素。

2. rowsHeight属性的应用

我们可以通过设置rowsHeight属性来调整控件中每个日程栏目的高度以及整体显示效果。

2.1 示例一

以下示例通过设置rowsHeight属性将每个日程栏目的高度调整为50像素：

$(document).ready(function () {
    // prepare the data
    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: 'location', type: 'string' },
            { name: 'description', type: 'string' }
        ],
        id: 'id',
        url: '../sampledata/appointments.json'
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2016, 11, 23),
        width: 850,
        height: 600,
        source: dataAdapter,
        rowsHeight: 50,
        view: 'weekView',
        showLegend: true,
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "calendar",
            source:  new $.jqx.dataAdapter(source)
        },
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "location",
            subject: "text",
            resourceId: "calendar"
        },
        views:
        [
            'dayView',
            'weekView',
            'monthView'
        ]
    });
});

2.2 示例二

以下示例通过设置rowsHeight属性将每个日程栏目的高度调整为20像素：

$(document).ready(function () {
    // prepare the data
    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: 'location', type: 'string' },
            { name: 'description', type: 'string' }
        ],
        id: 'id',
        url: '../sampledata/appointments.json'
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2016, 11, 23),
        width: 850,
        height: 600,
        source: dataAdapter,
        rowsHeight: 20,
        view: 'weekView',
        showLegend: true,
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "calendar",
            source:  new $.jqx.dataAdapter(source)
        },
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "location",
            subject: "text",
            resourceId: "calendar"
        },
        views:
        [
            'dayView',
            'weekView',
            'monthView'
        ]
    });
});

3. 总结

通过本文的介绍，我们可以理解rowsHeight属性的含义，以及如何设置控件中每个日程栏目的高度以及整体显示效果。在具体应用中，我们可以根据实际需求自定义设置日程栏目的高度，为用户呈现出更加符合实际业务场景的效果。