bootstrap v3+DataTables-1.10.6
ssp ajax数据源表格添加删除行,重新进行ajax请求导致添加行被刷新,
重写row api中的add remover方案,以达到需要效果,并对reload方案做额外复原处理
row().remove()和rows.remove()在源码中合并,但使用的是匿名内部方法
_api_registerPlural( 'rows().remove()', 'row().remove()', function () {..}
但对外提供的register方案中并不支持合并,虽然方法体一样,但拆开写,当然可以抽取.
以下为重写方案.
$.fn.dataTable.Api.register('row().add()', function(row) {
if (row instanceof $ && row.length) {
row = row[0];
}
var rows = this.iterator('table', function(settings) {
// 重写,使SSP AJAX数据源表格添加行不会使用URL重刷
settings.bAjaxDataGet = false;
// 重写 end
if (row.nodeName && row.nodeName.toUpperCase() === 'TR') {
return _fnAddTr(settings, row)[0];
}
return $.fn.dataTableExt.internal._fnAddData(settings, row);
});
// Return an Api.rows() extended instance, with the newly added row selected
return this.row(rows[0]);
});
$.fn.dataTable.Api.register('rows.add()', function(rows) {
var newRows = this.iterator('table', function(settings) {
var row, i, ien;
var out = [];
for (i = 0, ien = rows.length; i < ien; i++) {
row = rows[i];
// 重写,使SSP AJAX数据源表格添加行不会使用URL重刷
settings.bAjaxDataGet = false;
// 重写 end
if (row.nodeName && row.nodeName.toUpperCase() === 'TR') {
out.push($.fn.dataTableExt.internal._fnAddTr(settings, row)[0]);
} else {
out.push($.fn.dataTableExt.internal._fnAddData(settings, row));
}
}
return out;
}, 1);
// Return an Api.rows() extended instance, so rows().nodes() etc can be used
var modRows = this.rows(-1);
modRows.pop();
modRows.push.apply(modRows, newRows.toArray());
return modRows;
});
$.fn.dataTable.Api.register('row().remove()', function() {
var that = this;
return this.iterator('row', function(settings, row, thatIdx) {
var data = settings.aoData;
data.splice(row, 1);
// Update the _DT_RowIndex parameter on all rows in the table
for ( var i = 0, ien = data.length; i < ien; i++) {
if (data[i].nTr !== null) {
data[i].nTr._DT_RowIndex = i;
}
}
// Remove the target row from the search array
var displayIndex = $.inArray(row, settings.aiDisplay);
// 重写,使SSP AJAX数据源表格添加行不会使用URL重刷
settings.bAjaxDataGet = false;
// 重写 end
// Delete from the display arrays
$.fn.dataTableExt.internal._fnDeleteIndex(settings.aiDisplayMaster, row);
$.fn.dataTableExt.internal._fnDeleteIndex(settings.aiDisplay, row);
$.fn.dataTableExt.internal._fnDeleteIndex(that[thatIdx], row, false); // maintain local indexes
// Check for an 'overflow' they case for displaying the table
$.fn.dataTableExt.internal._fnLengthOverflow(settings);
});
});
$.fn.dataTable.Api.register('rows().remove()', function() {
var that = this;
return this.iterator('row', function(settings, row, thatIdx) {
var data = settings.aoData;
data.splice(row, 1);
// Update the _DT_RowIndex parameter on all rows in the table
for ( var i = 0, ien = data.length; i < ien; i++) {
if (data[i].nTr !== null) {
data[i].nTr._DT_RowIndex = i;
}
}
// Remove the target row from the search array
var displayIndex = $.inArray(row, settings.aiDisplay);
// 重写,使SSP AJAX数据源表格添加行不会使用URL重刷
settings.bAjaxDataGet = false;
// 重写 end
// Delete from the display arrays
$.fn.dataTableExt.internal._fnDeleteIndex(settings.aiDisplayMaster, row);
$.fn.dataTableExt.internal._fnDeleteIndex(settings.aiDisplay, row);
$.fn.dataTableExt.internal._fnDeleteIndex(that[thatIdx], row, false); // maintain local indexes
// Check for an 'overflow' they case for displaying the table
$.fn.dataTableExt.internal._fnLengthOverflow(settings);
});
});
$.fn.dataTable.Api.register('ajax.reload()', function(callback, resetPaging) {
var __reload = function(settings, holdPosition, callback) {
// Use the draw event to trigger a callback
if (callback) {
var api = new $.fn.dataTable.Api(settings);
api.one('draw', function() {
callback(api.ajax.json());
});
}
if ($.fn.dataTableExt.internal._fnDataSource(settings) == 'ssp') {
// 重写,使SSP AJAX数据源表格添加行不会使用URL重刷
settings.bAjaxDataGet = true;
// 重写 end
$.fn.dataTableExt.internal._fnReDraw(settings, holdPosition);
} else {
// Trigger xhr
$.fn.dataTableExt.internal._fnProcessingDisplay(settings, true);
$.fn.dataTableExt.internal._fnBuildAjax(settings, [], function(json) {
$.fn.dataTableExt.internal._fnClearTable(settings);
var data = $.fn.dataTableExt.internal._fnAjaxDataSrc(settings, json);
for ( var i = 0, ien = data.length; i < ien; i++) {
$.fn.dataTableExt.internal._fnAddData(settings, data[i]);
}
$.fn.dataTableExt.internal._fnReDraw(settings, holdPosition);
$.fn.dataTableExt.internal._fnProcessingDisplay(settings, false);
});
}
};
return this.iterator('table', function(settings) {
__reload(settings, resetPaging === false, callback);
});
});
本文介绍如何在使用bootstrapv3和DataTables-1.10.6的情况下,通过重写row API来解决SSP AJAX数据源表格添加删除行时的问题,并提供了具体的JavaScript代码实现。
4378

被折叠的 条评论
为什么被折叠?



