2014-01-09 34 views
0

我正在編寫一個jQuery插件來構建KendoUI網格。一切都很好,直到我不得不在同一頁面中使用2個插件實例。在這種情況下,我需要插件的每個實例都有自己的數據。使用同一個JQuery插件的兩個實例存儲狀態

我讀過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插件開發指南。如果你能指向正確的方向或告訴我爲什麼我的代碼無法正常工作,那將是非常棒的。提前感謝!

回答

0

我終於解決了在輔助者的網格中添加一個帶有唯一標識的隱藏輸入。在那個隱藏的輸入上,我存儲了所有我想用Jquery .data()持久化的數據。

所以,如果我生成使用插件2個網格,每個網格都將附加這樣的事情:

<input type="hidden" id="uniqueIdHere" /> 
相關問題