博客

jQWidgets jqxScheduler deleteAppointment()方法

  • Post category:jquery

jQWidgets jqxScheduler是一个专门用于JavaScript开发的日程安排组件，而其中的deleteAppointment()方法则是其提供的用于删除某个约会的方法。下面将详细讲解该方法的完整攻略，包括其参数、返回值、使用方法以及示例说明。

方法说明

方法名称

deleteAppointment()方法。

方法作用

该方法用于删除jqxScheduler控件中的一个约会。

方法参数

deleteAppointment()方法接受一个参数，即被删除约会的id号。

方法返回值

该方法没有返回值。

使用方法

调用deleteAppointment()方法需要先获取到jqxScheduler控件的对象，再直接通过该对象调用该方法。其具体代码如下：

var scheduler = $("#scheduler").jqxScheduler("getInstance");
scheduler.deleteAppointment(appointmentId);

其中，scheduler代表控件对象，而appointmentId则代表被删除约会的id号。

示例说明

示例1：删除控件中指定的约会

下面是一个简单的示例，将展示如何使用deleteAppointment()方法删除jqxScheduler控件中指定的约会。该示例将创建一个日历，其中包含了一些约会。当鼠标单击某个约会时，该约会就会被删除。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxScheduler deleteAppointment()方法示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
</head>
<body>
<div id="scheduler"></div>
<script>
    $(document).ready(function () {
        var source = {
            dataType: "json",
            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"},
                {name: "style", type: "string"}
            ],
            id: "id",
            url: "data.php"
        };

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

        $("#scheduler").jqxScheduler({
            date: new $.jqx.date(new Date()),
            width: "100%",
            height: "600px",
            source: adapter,
            view: "weekView",
            showToolbar: true,
            ready: function () {
                $("#scheduler").on("appointmentClick", function (event) {
                    var scheduler = $("#scheduler").jqxScheduler("getInstance");
                    scheduler.deleteAppointment(event.args.appointment.id);
                });
            },
            resources:
                {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter({
                        dataType: "json",
                        url: "resources.php"
                    })
                },
            appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "location",
                    subject: "subject",
                    resourceId: "calendar",
                    style: "style"
                }
        });
    });
</script>
</body>
</html>

示例2：删除控件中所有约会

下面是另一个简单的示例，将展示如何使用deleteAppointment()方法删除jqxScheduler控件中的所有约会。该示例将创建一个日历，其中包含了一些约会。当鼠标单击“删除所有约会”按钮时，该日历中所有约会都将被删除。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxScheduler deleteAppointment()方法示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
</head>
<body>
<div id="scheduler"></div>
<button id="btnDeleteAll" style="margin: 10px;">删除所有约会</button>
<script>
    $(document).ready(function () {
        var source = {
            dataType: "json",
            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"},
                {name: "style", type: "string"}
            ],
            id: "id",
            url: "data.php"
        };

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

        $("#scheduler").jqxScheduler({
            date: new $.jqx.date(new Date()),
            width: "100%",
            height: "600px",
            source: adapter,
            view: "weekView",
            showToolbar: true,
            ready: function () {
                $("#btnDeleteAll").click(function () {
                    var scheduler = $("#scheduler").jqxScheduler("getInstance");
                    scheduler.getAppointments().forEach(function (appointment) {
                        scheduler.deleteAppointment(appointment.id);
                    });
                });
            },
            resources:
                {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter({
                        dataType: "json",
                        url: "resources.php"
                    })
                },
            appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "location",
                    subject: "subject",
                    resourceId: "calendar",
                    style: "style"
                }
        });
    });
</script>
</body>
</html>

上面的代码中，我们在页面上添加了一个名为“btnDeleteAll”的按钮。当点击该按钮时，我们调用了getAppointments()方法来获取所有约会对象，随后通过遍历这些对象并依次调用deleteAppointment()方法实现了删除操作。

Tags: