jQWidgets jqxScheduler destroy()方法

jQWidgets jqxScheduler destroy()方法详解

destroy()是jQWidgets jqxScheduler插件的一个方法，用于销毁日程表控件及其相关的所有元素，并将所有绑定的事件和数据清除。

方法语法

destroy(): void

方法参数

此方法不接受任何参数。

方法返回值

此方法不返回任何值。

方法示例

示例一

在这个示例中，我们创建一个简单的日程表，然后在页面上添加一个“销毁”按钮，通过按钮单击事件调用destroy()方法来销毁日程表。

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxmenu.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcalendar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscheduler.js"></script>
</head>
<body>
    <div id="schedulerContainer" style="width: 100%; height: 400px"></div>
    <div id="buttonContainer"></div>

    <script>
        $(document).ready(function () {
            var appointments = new Array();
            var appointment1 = {
                id: "id1",
                description: "Meeting",
                location: "",
                subject: "Plan Meeting",
                calendar: "Room 1",
                start: new Date(2021, 6, 1, 9, 0, 0, 0),
                end: new Date(2021, 6, 1, 11, 0, 0, 0)
            }
            appointments.push(appointment1);

            var appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "Product Launch",
                calendar: "Room 2",
                start: new Date(2021, 6, 3, 10, 0, 0, 0),
                end: new Date(2021, 6, 3, 12, 0, 0, 0)
            }
            appointments.push(appointment2);

            var source = {
                dataType: "array",
                dataFields: [
                    { name: "id", type: "string" },
                    { name: "description", type: "string" },
                    { name: "location", type: "string" },
                    { name: "subject", type: "string" },
                    { name: "calendar", type: "string" },
                    { name: "start", type: "date" },
                    { name: "end", type: "date" }
                ],
                id: "id",
                localData: appointments
            };

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

            $("#schedulerContainer").jqxScheduler({
                date: new $.jqx.date(2021, 6, 1),
                width: "100%",
                height: 400,
                source: adapter,
                view: "weekView",
                showLegend: true,
                ready: function () {
                    $("#schedulerContainer").jqxScheduler("ensureAppointmentVisible", "id1");
                }
            });

            var buttonOptions = {
                width: "80px",
                height: "25px",
                value: "销毁"
            };

            $("#buttonContainer").jqxButton(buttonOptions);

            $("#buttonContainer").on("click", function () {
                $("#schedulerContainer").jqxScheduler("destroy");
            });
        });
    </script>
</body>

示例二

在这个示例中，我们创建一个日程表，然后在页面上添加一个文本框和一个按钮，通过按钮单击事件添加新的预约。在添加新预约之前，我们会检查当前预约是否已经存在，如果已经存在，则使用destroy()方法将其清除并添加新预约。

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxmenu.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcalendar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscheduler.js"></script>
</head>
<body>
    <div id="schedulerContainer" style="width: 100%; height: 400px"></div>
    <div style="margin-top: 10px">
        <input id="appointmentId" type="text" placeholder="输入预约ID"/>
        <button id="addAppointmentButton">添加预约</button>
    </div>

    <script>
        $(document).ready(function () {
            var appointments = new Array();
            var appointment1 = {
                id: "id1",
                title: "Meeting",
                location: "",
                subject: "Plan Meeting",
                calendar: "Room 1",
                start: new Date(2021, 6, 1, 9, 0, 0, 0),
                end: new Date(2021, 6, 1, 11, 0, 0, 0)
            }
            appointments.push(appointment1);

            var source = {
                dataType: "array",
                dataFields: [
                    { name: "id", type: "string" },
                    { name: "title", type: "string" },
                    { name: "location", type: "string" },
                    { name: "subject", type: "string" },
                    { name: "calendar", type: "string" },
                    { name: "start", type: "date" },
                    { name: "end", type: "date" }
                ],
                id: "id",
                localData: appointments
            };

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

            $("#schedulerContainer").jqxScheduler({
                date: new $.jqx.date(2021, 6, 1),
                width: "100%",
                height: 400,
                source: adapter,
                view: "weekView",
                showLegend: true,
                resources:
                    {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source: new $.jqx.dataAdapter({
                            dataType: "array",
                            dataFields: [
                                { name: "calendar", type: "string" },
                                { name: "calendarDesc", type: "string" },
                                { name: "calendarColor", type: "string" }
                            ],
                            localData: [
                                { calendar: "Room 1", calendarDesc: "Room 1", calendarColor: "#6aa84f" },
                                { calendar: "Room 2", calendarDesc: "Room 2", calendarColor: "#fcb322" },
                                { calendar: "Room 3", calendarDesc: "Room 3", calendarColor: "#007bb6" }
                            ]
                        })
                    }
            });

            $("#addAppointmentButton").on("click", function () {
                var id = $("#appointmentId").val();
                var existingAppointment = $("#schedulerContainer").jqxScheduler("getAppointmentByUniqueId", id);
                if (existingAppointment) {
                    $("#schedulerContainer").jqxScheduler("destroyAppointment", existingAppointment);
                }

                var appointment = {
                    id: id,
                    title: "测试预约",
                    location: "",
                    subject: "测试主题",
                    calendar: "Room 1",
                    start: new Date(2021, 6, 1, 12, 0, 0, 0),
                    end: new Date(2021, 6, 1, 14, 0, 0, 0)
                };

                $("#schedulerContainer").jqxScheduler("addAppointment", appointment);
            });
        });
    </script>
</body>

在这个示例中，我们通过调用destroyAppointment()方法删除现有预约，并在日程表中添加新的测试预约。

通过上述两个示例，我们可以看出，destroy()方法并不仅适用于销毁整个日程表，而且可以用于删除日程表中特定的预约。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxScheduler destroy()方法 - Python技术站