UI-Sortable не работает с динамическими угловыми данными - PullRequest
1 голос
/ 05 апреля 2019

Я использую 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 **************/


Вотсозданная таблица.

here is the created table

Я добавил атрибут ui-sortable в tbody в createTable() function.and, когда я вижу в inspect element, attributeуспешно добавлен.но когда я добавил тот же атрибут в другую таблицу статических данных.он работает нормально.

Насколько я понимаю, проблема в том, что ui-sortable работает на ng-repeat.но я создал строки динамически.

Я искал по этому вопросу, но не нашел точного решения.Мы будем благодарны за любую помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...