jquery ウィジェットを作成しましたが、別のインスタンスが必要になるまで、すべてが機能していました。そのとき、2 つのインスタンスが同じデータを共有していることに気付きました。プラグインは、テーブルでどの行がチェックされているかを追跡することになっているため、使用する必要があるたびにそれらを計算する必要はありません。2 つのテーブルでウィジェットをインスタンス化する場合、1 つのテーブルの 1 つの行をクリックすると、両方のテーブルに同じデータが含まれます。これは、両方のテーブルで発生します。私はいくつかの jquery ウィジェットしか作成していないので、これがどのように起こるかはわかりませんが、コードをステップスルーして、それが起こっているのを見ることができます.
ウィジェット ファクトリの使い方が間違っているようです。事前に助けてくれてありがとう！
これがウィジェットコードです。
$.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});