Я использую Angular DataTables в своем приложении и создал динамическую таблицу с вложенными строками и пытаюсь добавить сортируемую функциональность в родительские строки.Я пытался добавить ui-sortable
, но не работает.
Вот HTML-код:
<div class="panel-body table-responsive" ng-show="lstFormatFileMetaDetails != null">
<table id="tblFileMetaColumnsDetail" name="tblFileMetaColumnsDetail" datatable="" dt-options="dtFileMetaColumnsDetailOptions" dt-columns="dtFileMetaColumnsDetailColumns" dt-instance="dtFileMetaColumnsDetailInstance" class="display table table-striped table-bordered table-hover">
<!-- THIS TABLE IS GENERATED DYNAMICALLY -->
</table>
</div>
Вот код JavaScript:
//CREATE ANGULAR DATA TABLE
function createTable() {
$scope.dtFileMetaColumnsDetailInstance = {};
$scope.dtFileMetaColumnsDetailOptions = DTOptionsBuilder.fromSource($scope.lstFormatFileMetaDetails)
.withOption('data', $scope.lstFormatFileMetaDetails) //pass data source here
.withOption('dataSrc', '')
.withOption('rowCallback', rowCallback)
.withOption('createdRow', createdRow)
.withLanguage({
loadingRecords: "No data available in table"
})
.withButtons([
'excel',
{
text: 'Reset',
action: function (e, dt, node, config) {
$("#tblFileMetaColumnsDetail").DataTable().search("").draw();
}
}]);
//define columns
var metaColName = $scope.$translate("Meta Col Name");
var mapping = $scope.$translate("Mapping");
var minWidth = $scope.$translate("Min Width");
var incrementalUnique = $scope.$translate("Incremental Unique");
var correctionUnique = $scope.$translate("Correction Unique");
var action = $scope.$translate("Action");
$scope.dtFileMetaColumnsDetailColumns = [
DTColumnBuilder.newColumn('btn').withTitle('').withOption('width', '5%'), //this is to show the '+' button
DTColumnBuilder.newColumn('#').withTitle('#'),
DTColumnBuilder.newColumn('metaColumnName').withTitle(metaColName),
DTColumnBuilder.newColumn('primaryColumnName').withTitle(mapping),
DTColumnBuilder.newColumn('minWidth').withTitle(minWidth),
DTColumnBuilder.newColumn('isIncrementalUnique').withTitle(incrementalUnique),
DTColumnBuilder.newColumn('isCorrectionUnique').withTitle(correctionUnique),
DTColumnBuilder.newColumn('actionButton').withTitle(action).withOption('width', '9%'),
];
var b = document.querySelector("#tblFileMetaColumnsDetail tbody");
if(b!=null){
b.setAttribute("ui-sortable","");
}
}
var id = 0;
//CALLED WHEN ROW IS CREATED
function createdRow(row, data, dataIndex) {
$(row).attr('id', id);
$(row).attr('class', 'ui-sortable-handle');
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
id++;
}
/*************** End - HANDLING DATATABLE SUBGRID **************/
Вотсозданная таблица.
Я добавил атрибут ui-sortable
в tbody в createTable()
function.and, когда я вижу в inspect element, attributeуспешно добавлен.но когда я добавил тот же атрибут в другую таблицу статических данных.он работает нормально.
Насколько я понимаю, проблема в том, что ui-sortable
работает на ng-repeat
.но я создал строки динамически.
Я искал по этому вопросу, но не нашел точного решения.Мы будем благодарны за любую помощь.