使用额外的构造函数参数扩展kendoGrid

时间:2014-10-11 09:46:46

标签: plugins kendo-ui kendo-grid

在此example之后我尝试编写插件,或者更好地将:扩展名设置为kendoGrid。 我的目标是为kendoGrid配备额外的构造参数,例如:一个名为format的回调函数,它将为数据更改提供自定义条件格式。

让我感到困惑的是,该示例实际构建了一个全新的小部件,而我希望kendoGrid构造函数保持完整并且只是采用一个新参数。我希望避免将kendoGrid的所有调用更改为kendoMyPlugin。那可行吗?

1 个答案:

答案 0 :(得分:3)

链接中的示例扩展了Widget类。这是从中派生所有Kendo UI小部件的基类。在您的情况下,您希望扩展Keno Grid并从中添加功能。您无法更改init方法的签名,因为这是由Kendo内部调用,但您可以轻松添加自定义选项以执行您需要的操作。基本模式是:

(function ($, undefined) {

    if (!kendo.ui.MyGrid) {    

        var base = kendo.ui.Grid;

        var MyGrid = base.extend({

            init: function (element, options) {

                // Call the base class's init.
                base.fn.init.call(this, element, options);

                // Add initialization...
                this.myField1 = options.myOption1;

                // If you want to watch changes in the dataSource 
                // attached to the grid, you could use this.  Of 
                // course you don't even need to subclass to do this
                // but you get the point.
                this.dataSource.bind("change", function(e) {
                    if (that.options.myCallback) {
                         that.options.myCallback.call(that, e);
                    }
                };
            },

            // Add default options...
            options: {
               myOption1: "Hello",
               myOption2: "World",
               myCallback: undefined,
            }

            // Add events...
            events: [
                "myEvent1",
                "myEvent2"
            ],

            // Add fields...
            myField1: "Goodbye",

            // Add methods...
            myMehod: function (a, b, c) {
                // Do something...
            }
        }

        // Register the new widget.
        kendo.ui.plugin(MyGrid);
    }    
})(jQuery);

MyGrid现在拥有Grid的所有功能以及您添加的功能。然后,就像使用Grid一样创建一个新实例。

$("#someElement").kendoMyGrid({
    // Add options for standard kendo Grid and your new options...
    myCallback: function (e) {
        alert(e.action);
    }
});