Question

我在应用程序中使用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()属性。当我在inspect元素中看到时，属性添加成功。但是当我在另一个静态数据表中添加了相同的属性时。一切正常。

据我了解，问题在于ui-sortable ng-repeat。但我已经动态创建了行。

我确实进行了搜索，但没有得到确切的解决方案。任何帮助将不胜感激。

UI-Sortable无法使用动态Angular数据表

0 个答案: