Question

我正在编写一个jQuery插件来构建KendoUI网格。一切都很好，直到我不得不在同一页面中使用插件的2个实例。在这种情况下，我需要插件的每个实例都有自己的数据。

我已经阅读了使用.data（）存储数据的jQuery指南，但是当尝试从外部访问插件的代码到'getSelectedItem（）'时这样：

selectedItemGrid1= $("#Grid1").kendoGrid_extended.getSelectedItem();
selectedItemGrid2= $("#Grid2").kendoGrid_extended.getSelectedItem();

我在selectedItemGrid1中获取了Grid2的selectedItem。这是我的插件代码的简化版本。基本上我想要做的是，只要选择了一行网格（kendoGrid定义中的“更改”事件），就将新选中的行存储在插件中，这样当用户点击“删除”按钮时，请从插件选中的行，并使用从插件中恢复的信息调用删除操作。

$.fn.kendoGrid_extended = function (options) {
    var opts = $.extend({}, $.fn.kendoGrid_extended.defaults, options);
    opts.controlId = '#' + this.attr('id');
    var gridExtended;
    var selectedItem;
    var instance = $(this);

    //Public accessor for the selectedItem object.
    $.fn.kendoGrid_extended.getSelectedItem = function () {
        return instance.data('selectedItem');
    }

    opts.gridDataSource = new kendo.data.DataSource({
        type: "json",
        serverPaging: true,
        serverSorting: true,
        sort: sortObject,
        serverFiltering: true,
        allowUnsort: true,
        pageSize: opts.pageSize,
        group: opts.group,
        transport: {
            read: {
                url: opts.dataSourceURL,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: function () { return opts.dataSourceParamsFunction(); }
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: opts.dataSourceSchema,
    });

    gridExtended = $(opts.controlId).kendoGrid({
            columns: opts.gridColumns,
            dataSource: opts.gridDataSource,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            groupable: opts.groupable,
            sortable: { mode: "multiple" },
            filterable: false,
            selectable: true,
            scrollable: true,
            resizable: true,
            reorderable: true,
            columnReorder: SetColumnsReorder,
            columnResize: SetColumnsResize,
            change: function () {
                var gridChange = this;
                gridChange.select().each(function () {
                    selectedItem = gridChange.dataItem($(this));
                    instance.data('selectedItem', selectedItem);
                });
            }
        });
}

代码本身是我的插件的简化版本。我知道这可能不是编写插件的最佳方式，因为我已经阅读了jQuery的插件开发指南。如果你能指出我正确的方向或告诉我为什么我的代码不起作用，那将是很棒的。非常感谢提前！

Answer 1

我认为你不需要你写的“公共访问者”，我想你实际上可以这样：

 selectedItemGrid1= $("#Grid1").data('selectedItem);
 selectedItemGrid2= $("#Grid2").data('selectedItem);

On a side you do not have to wrap that instance element into a jQuery object。您仍然可以使用其余的jQuery方法，请查看示例。

Answer 2

我终于解决了它将一个带有唯一ID的隐藏输入附加到帮助程序的网格中。在那个隐藏的输入上，我正在使用Jquery .data（）存储我想要持久化的所有数据。

因此，如果我使用插件生成2个网格，则每个网格都会添加如下内容：

<input type="hidden" id="uniqueIdHere" />

使用相同JQuery插件的2个实例存储状态

2 个答案: