当创建多个实例时，jquery小部件共享数据

我创建了一个jquery小部件，并且所有工作都正常，直到我需要另一个实例。那时我注意到两个实例共享相同的数据。该插件应该跟踪在表格中检查哪些行，所以我不必在每次需要使用它们时都计算它们。如果我在两个表上检查小部件，请单击一个表上的一行 - 两个表都将具有相同的数据。这两个表都发生这种情况。我只创建了几个jquery小部件，所以我不确定这是怎么发生的，但我已经通过代码并可以看到它发生。当创建多个实例时，jquery小部件共享数据

看起来好像我错误地使用了widget工厂。感谢您提前提供任何帮助！

这里是小部件代码。

$.widget('ui.selectAndFilter', { 
_init: function() { 

}, 
_create: function() { 
    var self = this; 
    self.options.$mainTable = $(self.element).addClass(this.options.cssWidgetClass); 

    self.options.$mainTable.find('tbody tr').bind('click', function (e) { 
     self._onClick(e, $(this), false); 
     //Need to determine what todo with last param - redrawTables 
    }); 
}, 
options: { 
    cssWidgetClass: 'select-and-filter', 
    cssSelectedClass: 'selected', 
    $mainTable: {}, 
    childTables: [], 
    canMultiSelect: false, 
    clickFinishedCallbacks: [], 
    minCount: 1 
}, 
destroy: function() { 
    $(this.element).removeClass(this.options.cssWidgetClass); 
}, 
_checkedIds: [],  
checkRow: function ($tr) { 
    if ($.isDigit($tr)) 
     $tr = $(this.options.$mainTable.find('tbody tr:eq(' + $tr + ')')); 
    if ($tr.length) { 
     var id = $tr.addClass(this.options.cssSelectedClass).find(':checkbox').attr('checked', true).val(); 
     this._addId(id); 
    } 
    return this; 
}, 
_uncheckRow: function ($tr) { 
    if ($tr.length) { 
     var id = $tr.removeClass(this.options.cssSelectedClass).find(':checkbox').attr('checked', false).val(); 
     return this._removeId(id); 
    } 
}, 
uncheckAllRows: function() { 
    var self = this; 
    this.options.$mainTable.find('tr.' + this.options.cssSelectedClass).each(function() { 
     self._uncheckRow($(this)); 
    }); 
    return self; 
}, 
_removeId: function (id) { 
    this._checkedIds.splice(this._checkedIds.indexOf(id), 1); 
    return this._checkedIds; 
}, 
_addId: function (id) { 
    if (this._checkedIds.indexOf(id) == -1) 
     this._checkedIds.push(id); 
    return this._checkedIds; 
}, 
_onClick: function (event, $tr, redrawTables) { 
    if ($tr.hasClass(this.options.cssSelectedClass) && this._checkedIds.length > this.options.minCount) { 
     this._uncheckRow($tr); 
    } else { 
     if (!this.options.canMultiSelect) { 
      this.uncheckAllRows(); 
     } 
     this.checkRow($tr); 
    } 

    this.redrawTables(); 
    this._trigger('click'); 

}, 
redrawTables: function() { 
    $.each(this.options.childTables, function() { 
     this.fnDraw(); 
    }); 
}, 
checkedIds: function() { 
    return this._checkedIds; 
} 


});

然后代码来实例化它们。

tables['schedule'].selectAndFilter({canMultiSelect:selectMulti, childTables: redrawTables}); 
tables['start'].selectAndFilter({canMultiSelect: selectMulti}) 
tables['batch'].selectAndFilter({minCount:0});

来源

2012-08-27 Brandon

固定 - 的_checkedIds是全球性的小部件，而不是个人的范围之内上下文。在_create函数中添加声明。 this._checkedIds = []; – Brandon

问题是_checkedIds数组是全局的，而不是单个的上下文。

该行添加到_create方法：

this._checkedIds = [];

并删除这条线从窗口小部件：

_checkedIds: [],

来源

2012-08-27 20:27:48 Brandon

当创建多个实例时，jquery小部件共享数据

回答

相关问题