博客

当我们使用jQWidgets中的jqxScheduler控件展示日历或任务列表时，可能需要清除当前选择的内容。这时可以使用jqxScheduler提供的clearSelection()方法来清除选择。

此方法可以清除当前选择的所有事件。在执行此方法时，如果当前选择了多个事件，则所有事件都将被取消选择。下面是这个方法的完整攻略：

语法

$("#jqxScheduler").jqxScheduler('clearSelection');

该方法是通过调用jqxScheduler的jQuery对象的方式来调用，其语法为上述代码所示。#jqxScheduler表示jqxScheduler控件所在的HTML元素的唯一标识符。

参数列表

该方法不需要传递任何参数。

示例说明：

示例1：清除jqxScheduler的当前选择项

在本示例中，我们先选择上个月的某一天，然后通过一个按钮来清除选择项。

<div id="jqxScheduler"></div>
<button id="clearButton">清除选择项</button>

$(document).ready(function () {
    // 初始化jqxScheduler控件
    $("#jqxScheduler").jqxScheduler({
        date: new Date(2021, 2, 15), // 设置显示的日期
        width: '800px', // 控件宽度
        height: '600px', // 控件高度
        resources:
            {
                localData: [
                    { id: '1', name: '王明', image: '../../images/common/avatar-male.png', common: true },
                    { id: '2', name: '李丽', image: '../../images/common/avatar-female.png' },
                    { id: '3', name: '赵雷', image: '../../images/common/avatar-male.png' }
                ],
                dataType: 'array'
            },
        views:
            [
                'dayView',
                'weekView',
                'monthView',
                'agendaView'
            ],
        appointmentDataFields:
            {
                from: '开始时间',
                to: '结束时间',
                id: '唯一标识符',
                description: '描述',
                location: '地址',
                subject: '事项名称',
                resourceId: '资源标识符',
                recurrencePattern: '重复循环模式',
                recurrenceException: '重复循环例外'
            },
        appointments:
            [
                {
                    id: '1', description: '设计会面', location: '会议室一', subject: '会面', resourceId: '1',
                    from: new Date(2021, 2, 15, 9, 0, 0), to: new Date(2021, 2, 15, 10, 0, 0), backColor: '#F14124'
                },
                {
                    id: '2', description: '发布公告', location: '公司大厅', subject: '公告', resourceId: '1',
                    from: new Date(2021, 2, 15, 12, 0, 0), to: new Date(2021, 2, 15, 13, 0, 0), backColor: '#4BBDC8'
                },
                {
                    id: '3', description: '下午茶歇', location: '员工餐厅', subject: '茶歇', resourceId: '2',
                    from: new Date(2021, 2, 15, 14, 0, 0), to: new Date(2021, 2, 15, 15, 0, 0), backColor: '#E7A7F5'
                },
                {
                    id: '4', description: '完成销售报告', location: '办公室二', subject: '销售报告', resourceId: '3',
                    from: new Date(2021, 2, 15, 16, 0, 0), to: new Date(2021, 2, 15, 17, 0, 0), backColor: '#4BBDC8'
                }
            ]
    });

    // 绑定按钮点击事件
    $("#clearButton").click(function () {
        $("#jqxScheduler").jqxScheduler('clearSelection'); // 清除当前选择项
    });
});

示例2：清除所有事件和选择

在本示例中，我们在jqxScheduler中展示多个事件，并通过一个按钮来清除所有事件和选择。

<div id="jqxScheduler"></div>
<button id="clearButton">清除所有事件和选择</button>

$(document).ready(function () {
    // 初始化jqxScheduler控件
    $("#jqxScheduler").jqxScheduler({
        date: new Date(2021, 2, 15), // 设置显示的日期
        width: '800px', // 控件宽度
        height: '600px', // 控件高度
        resources:
            {
                localData: [
                    { id: '1', name: '王明', image: '../../images/common/avatar-male.png', common: true },
                    { id: '2', name: '李丽', image: '../../images/common/avatar-female.png' },
                    { id: '3', name: '赵雷', image: '../../images/common/avatar-male.png' }
                ],
                dataType: 'array'
            },
        views:
            [
                'dayView',
                'weekView',
                'monthView',
                'agendaView'
            ],
        appointmentDataFields:
            {
                from: '开始时间',
                to: '结束时间',
                id: '唯一标识符',
                description: '描述',
                location: '地址',
                subject: '事项名称',
                resourceId: '资源标识符',
                recurrencePattern: '重复循环模式',
                recurrenceException: '重复循环例外'
            },
        appointments:
            [
                {
                    id: '1', description: '设计会面', location: '会议室一', subject: '会面', resourceId: '1',
                    from: new Date(2021, 2, 15, 9, 0, 0), to: new Date(2021, 2, 15, 10, 0, 0), backColor: '#F14124'
                },
                {
                    id: '2', description: '发布公告', location: '公司大厅', subject: '公告', resourceId: '1',
                    from: new Date(2021, 2, 15, 12, 0, 0), to: new Date(2021, 2, 15, 13, 0, 0), backColor: '#4BBDC8'
                },
                {
                    id: '3', description: '下午茶歇', location: '员工餐厅', subject: '茶歇', resourceId: '2',
                    from: new Date(2021, 2, 15, 14, 0, 0), to: new Date(2021, 2, 15, 15, 0, 0), backColor: '#E7A7F5'
                },
                {
                    id: '4', description: '完成销售报告', location: '办公室二', subject: '销售报告', resourceId: '3',
                    from: new Date(2021, 2, 15, 16, 0, 0), to: new Date(2021, 2, 15, 17, 0, 0), backColor: '#4BBDC8'
                }
            ]
    });

    // 绑定按钮点击事件
    $("#clearButton").click(function () {
        $("#jqxScheduler").jqxScheduler('clear'); // 清除所有事件和选择
    });
});

以上就是jQWidgets jqxScheduler中clearSelection()方法的完整攻略，希望能对您有所帮助。