【问题标题】:Set callback function for kendo widget events设置剑道小部件事件的回调函数
【发布时间】:2013-09-27 20:17:09
【问题描述】:

在 kendo ui 小部件代码触发后,我没有看到有关添加回调的文档。我有以下剑道 ui 小部件声明。

$("#scheduler").kendoScheduler({
    date: new Date("2013/6/13"),    // Change this to current date with twig
    startTime: new Date("2013/6/13 07:00 AM"), // Change this to 12:00 AM of current date
    allDaySlot: false,
    width:600,
    height:500,
    resize: function(e) {
        if (careGiverIsOccupied(e.start, e.end, e.event, e.resources)) {
            this.wrapper.find(".k-marquee-color").addClass("invalid-slot");
            e.preventDefault();
        }
    },
    resizeEnd: function(e) {
        if (!checkAvailability(e.start, e.end, e.events)) {
            e.preventDefault();
        }
    },
    move: function(e) {
        if (careGiverIsOccupied(e.start, e.end, e.event, e.resources)) {
            this.wrapper.find(".k-event-drag-hint").addClass("invalid-slot");
        }
    },
    moveEnd: function(e) {
        if (!checkAvailability(e.start, e.end, e.event, e.resources)) {
            e.preventDefault();
        }
    },
    add: function(e) {
        if (!checkAvailability(e.event.start, e.event.end, e.event)) {
            e.preventDefault();
        }
        changeColors();
    },
    save: function(e) {
        if (!checkAvailability(e.event.start, e.event.end, e.event)) {
            e.preventDefault();
        }
        changeColors();
    },
    views: [
        "week",
        "month"
    ],
    dataSource: {
        data: [
            {
                eventID: 2,
                title: "Hey man",
                start: new Date("2013/6/13 12:00"),
                end: new Date("2013/6/13 13:30"),
                pending: true,
                permissionToDelete: false,
                careGiverId: 1
            },
            {
                eventID: 1,
                title: "Call Charlie about the project",
                start: new Date("2013/6/13 10:30"),
                end: new Date("2013/6/13 11:30"),
                pending: false,
                permissionToDelete: false,
                careGiverId: 1
            }
            ],
        schema: {
            model: {
                id: "eventID",
                fields: {
                    eventID: { type: "number" },
                    title: { defaultValue: "No title", validation: { required: true } },
                    start: { type: "date" },
                    end: { type: "date" },
                    careGiverId: { nullable: true },
                    pending: { type: "boolean", defaultValue:true },
                    permissionToDelete: { type: "boolean", defaultValue:true },
                    isAllDay: { type: "boolean" }
                }
            }
        }
    },
    group: {
        resources: [ "care" ]
    },
    resources: [
        {
            field: "careGiverId",
            name: "care",
            dataSource: [
                { 
                    // Change the text with care giver name, change value with care giver id
                    text: "Jeffery Dohmer (Care Giver 1)", value: 1, color: "#00FF00" 
                }
            ],
            title: "Care"
        }
    ]
});

问题是我的文档的 dom 结构在 resizeEnd、move、moveEnd、add 和 save 等事件处理程序触发后被修改。我想做的是在 kendoScheduler 添加或节省时间之后更改特定元素的颜色。完成后是否还有添加回调?

【问题讨论】:

    标签: javascript jquery html kendo-ui kendo-scheduler


    【解决方案1】:

    看看这个post中的完整事件示例:

    read: {
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: _op.serviceBaseUrl + "ReadX",
                    complete: function () {
                          console.log('Tweak your UI here');
                     }
        }
    

    显然“完成”事件仅在您使用remote data. 时可用。

    还有,看看这个requestEndevent

     requestEnd: function(e) {
        var response = e.response;
        var type = e.type;
        console.log(type); // displays "read"
        console.log(response.length); // displays "77"
      }
    

    使用e.type 上的开关来区分不同的操作(请求的类型。设置为“create”、“read”、“update”或“destroy”。) p>

    【讨论】:

      【解决方案2】:

      我为这个问题找到了一个优雅的答案。显然有一个名为 dataBound: 的事件允许在所有操作完成后触发回调。

      就我而言,我想使用:

      dataBound: function(e){
      
          // Code after widget is finished processing everything
      
      }
      

      【讨论】:

      • 您的问题是关于“添加或保存”,其他操作(例如删除)的数据绑定触发。无论如何,如果它有效,它就有效。
      猜你喜欢
      • 1970-01-01
      • 2014-11-19
      • 2023-03-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-27
      • 1970-01-01
      • 2016-02-07
      相关资源
      最近更新 更多