Alloy UI - 编辑选定值的事件(在选择列表中)

时间:2017-10-11 17:18:24

标签: javascript calendar alloy-ui

我可能在这方面做错了但我已经设法在我的日历弹出窗口中显示2个选择列表选项,并且能够将数据保存到数据库。

我现在苦苦挣扎的是点击要编辑的事件时,如何传回值以使选择列表显示当前值。为此,我如何传递分配给此事件的数据库ID?

到目前为止,我已经显示了我的代码:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script>
    YUI({ debug: true, combine: false }).use(
        'aui-scheduler',
            function(Y) 
            {
                                var events = [
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />EARLY', 
                        endDate: new Date(2017, 09, 20), 
                        startDate: new Date(2017, 09, 16)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />ALL DAY', 
                        endDate: new Date(2017, 09, 02), 
                        startDate: new Date(2017, 09, 02)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />', 
                        endDate: new Date(2017, 09, 03), 
                        startDate: new Date(2017, 09, 03)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />', 
                        endDate: new Date(2017, 09, 03), 
                        startDate: new Date(2017, 09, 03)
                    }
                                    ];

                var monthView = new Y.SchedulerMonthView({ isoTime: true });
                var eventRecorder = new Y.SchedulerEventRecorder({
                    on: {
                        save: function(event) {
                            //alert('Save Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-save', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        },
                        edit: function(event) {
                            //alert('Edit Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-edit', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        },
                        delete: function(event) {
                            //alert('Delete Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-delete', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        }
                    }, 
                    dateFormat: '%a, %b %d, %Y',
                    //content: '',
                    repeated: true,
                    headerTemplate: '<select name="booking_status"><option value="5">Available</option><option value="6">Unavailable</option></select><br /><select name="shift_type"><option>Not Required</option><option>ALL DAY</option><option>LONG DAY</option><option>EARLY</option><option>LATE</option><option>NIGHT</option><option>TWILIGHT</option></select>',
                    clientId: '2830b9d7cf'
                });

                new Y.Scheduler(
                  {
                    activeView: monthView,
                    boundingBox: '#myScheduler',
                    date: new Date(2017, 09, 13),
                    eventRecorder: eventRecorder,
                    items: events,
                    render: true,
                    views: [monthView], 
                    firstDayOfWeek: 1
                  }
                );
            }
    );
</script>

提前感谢,

拉​​吉

0 个答案:

没有答案