0

我对我的应用程序感到震惊，在那里我thousands of data for creating reports and dataentry为用户提供了表单。以前我用来管理来自后端的 json 调用，datatablejs用于修复 header 和 column。

但是现在我需要angularjs用作前端的框架，并且需要fix header and column使用datatable js. 但我无法做到这一点。

请帮我摆脱这些东西。

是否可以使用带角度的数据表 js，如果没有，请建议我使用响应式解决方案修复表的标题和列的方法？任何替代解决方案也值得赞赏。

4

1 回答 1

1

一种方法是对表使用引导程序，并且角度 js 内置了诸如 ng-repeat 之类的指令，可用于将范围变量内的数据填充到表中。使用 ng-repeat 也可以使列动态化。

这是我的html代码

<div class="table-responsive" ng-init="initialise()">
    <table class="table table-condensed shortMargin" id="dashboardTable">
        <thead id="table-header">
            <tr>
                <th ng-click="sortData('respondentName')">
                    Respondent Name
                    <div ng-class="getSortClass('respondentName')"></div>
                </th>

                <th ng-click="sortData('assessmentTitle')">
                    Assessment Title
                    <div ng-class="getSortClass('assessmentTitle')"></div>
                </th>

                <th ng-click="sortData('positionTitle')">
                    Position Title
                    <div ng-class="getSortClass('positionTitle')"></div>
                </th>

                <th ng-click="sortData('status')">
                    Status
                    <div ng-class="getSortClass('status')"></div>
                </th>

                <th>Action</th>

            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="task in TaskList | orderBy:sortColumn:reverseSort ">

                <td><a href="" ng-click="SetDetails(task)" data-toggle="modal" data-target="#RespondentDetailModal">{{task.respondentName}}</a></td>

                <td>
                    {{task.assessmentTitle}}
                </td>

                <td>
                    {{task.positionTitle}}
                </td>

                <td>
                    {{task.status}}
                </td>

                <td>
                    <a href="" class="btn btn-default btn-sm submit" type="button" ng-click="showTaskDetails(task)" data-target="#TaskDetails">
                        <span class="glyphicon glyphicon-zoom-in"></span>
                    </a>
                </td>

            </tr>

        </tbody>
    </table>

</div>

这是我的js代码

 $scope.initialise = function () {

        ngProgressLite.start();

        getWorkFlowByRoleName($scope.role[0]);
    };

function getWorkFlowByRoleName(name) {
        apiService.get('workFlowStatus/GetActiveTasksByRoleName/' + name,
                        name,
                        getWorkFlowByRoleNameCompleted,
                        reviewTasksLoadFailed
                        );
    }
    function getWorkFlowByRoleNameCompleted(response) {
        $scope.TaskList = response.data;

    }
    function reviewTasksLoadFailed(response) {
        if (response.statusText == "Not Found")
            $scope.taskEmptyMsg = "No tasks are assigned to you yet!! ";
    }

   //Function to sort by column
    $scope.sortData = function (column) {
        $scope.reverseSort = ($scope.sortColumn == column) ?
            !$scope.reverseSort : false;
        $scope.sortColumn = column;
    }

    $scope.getSortClass = function (column) {

        if ($scope.sortColumn == column) {
            return $scope.reverseSort
              ? 'glyphicon glyphicon-chevron-down'
              : 'glyphicon glyphicon-chevron-up';
        }

        return '';
    }

*注意： sortData() 和 getSortClass() 函数在单击时对每一列进行排序。

这些表看起来有点像这样：

点击这里查看图片

于 2016-04-05T06:53:03.937 回答