Question

我正在开展一个项目，我想做一些对我来说不熟悉的事情。我是AngularJS的新手，也是角度数据表中的新手。

我从here获得了角度数据表，对我来说有点棘手，因为我真的不知道如何使用它。对我来说，例子不是很清楚。

我想做什么：

我有一个sigle页面，左侧有一些复选框
我想要一个数据表，其中包含服务器在用户点击复选框后提供的数据
数据表必须改变dinamicaly，因为取决于请求我有数据表的其他标题。例如，当用户点击＆＃34;角色＆＃34;返回的对象只有2个字段id和role，我想渲染角色列而不是id。当用户点击＆＃34;用户＆＃34;服务器返回的数据包含多个具有更多字段的对象，例如：＆＃34; accNonExp＆＃34;，＆＃34; accNonLocked＆＃34;，＆＃34; email＆＃34;，＆＃34; username＆＃34 ;和其他人。

我该怎么做？

现在是我的康德：

js：

depo.controller('masterMainController', ['$scope', '$http', function ($scope, $http) {
    $scope.listOfTables = null;
    $scope.tableData = {};

    $scope.onClick = function(){
        $scope.tableData = getTableData($scope.valueSelected);
    };

    $http.post('/master/listOfTables').success(function (response) {
        $scope.listOfTables = response;
        console.log(response);
    });

    function getTableData(table) {
        $http.post('/master/tableData/' + table).success(function (response) {
            console.log(response);
            return response;
        });
    }

    $scope.dataTable = function(DTOptionsBuilder, DTColumnBuilder) {
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromJson($scope.tableData)
            .withPaginationType('full_numbers');
/*        vm.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID'),
            DTColumnBuilder.newColumn('firstName').withTitle('First name'),
            DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
        ];*/
    }
}]);

JSP：

<%@ include file="/WEB-INF/views/includes/onlyForLoggedUsers.jsp" %>
<html>
<head>
    <title>Main Master</title>
</head>
<script content="text/javascript" src="/res/custom_script/admin/masterMain.js"></script>
<body ng-app="depo">
<div class="container-fluid" ng-controller="masterMainController">
    <p class="logout_paragraph">Logged as <strong>${pageContext.request.userPrincipal.name}</strong> | <a
            id="logout_link" onclick="formSubmit()">Logout</a></p>

    <form action="/logout" method="post" id="logoutForm" style="display: none;">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
    </form>
    <div class="jumbotron">
        <h2>Welcome !</h2>
    </div>
    <div>
        <div id="divChkListOfTables" class="admin_left_menu pre-scrollable col-md-2">
            <div id="chkListOfTables" class="admin_tables_list radio">
                <h4>Tables</h4>
                <label ng-repeat="table in listOfTables.tables" class="admin_tables_list_chk_box">
                    <input type="radio" name="chkTablesRadio" ng-model="$parent.valueSelected" ng-change="onClick()"
                           ng-value="table" class="radio-button"> {{table}}
                </label>
            </div>
        </div>
        <div id="admin_data_table" class="col-md-10">
            <table datatable="dataTable" dt-options="masterMainController.dtOptions" dt-columns="masterMainController.dtColumns" class="row-border hover">

            </table>

        </div>
    </div>
</div>
</body>
</html>

Spring RestController：

@RestController
@RequestMapping(value = "/master")
public class MasterMainRest {

    @Autowired
    UnitService unitService;

    @Autowired
    RoleService roleService;

    @Autowired
    UsersService usersService;

    @RequestMapping(value = "/listOfTables", method = RequestMethod.POST)
    public MasterTablesDTO getListOfTables(){
        List<String> tables = new ArrayList<>();
        tables.add("unit");
        tables.add("role");
        tables.add("users");

        MasterTablesDTO masterTablesDTO = new MasterTablesDTO();
        masterTablesDTO.setTables(tables);

        return masterTablesDTO;
    }

    @RequestMapping(value = "/tableData/{table}", method = RequestMethod.POST)
    public List getTablesData(@PathVariable String table){
        List list = null;
        switch (table){
            case "unit":
                list = unitService.findAll();
                break;
            case "role":
                list = roleService.findAll();
                break;
            case "users":
                list = usersService.findAll();
                break;
        }
        return list;
    }

}

当我到达此页面时，我发现了这个错误：

TypeError: Cannot read property 'aDataSort' of undefined
    at U (jquery.dataTables.min.js:63)
    at xa (jquery.dataTables.min.js:67)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:91)
    at Function.n.extend.each (jquery-2.1.3.min.js:2)
    at n.fn.n.each (jquery-2.1.3.min.js:2)
    at m [as dataTable] (jquery.dataTables.min.js:83)
    at h.fn.DataTable (jquery.dataTables.min.js:159)
    at Object.g [as renderDataTableAndEmitEvent] (angular-datatables.min.js:6)
    at Object.h [as doRenderDataTable] (angular-datatables.min.js:6)
    at Object.d.render (angular-datatables.min.js:6)

是的我知道这个错误是因为$ scope.tableData是空的，或者这是我在某些论坛上读到的。如何检查第一个复选框，并根据复选框选中$ scope.tableData加载数据？

提前谢谢！

Answer 1

由于getTableData（table）函数没有返回任何值，因此你提到的$ scope.tableData是未定义的。这是因为AJAX请求是异步的。

要解决此问题，您必须提供回调$ http成功的回调，其中填写$ scope.tableData。要了解有关q实现的promises checkout angulars文档的更多信息：

https://docs.angularjs.org/api/ng/service/$q

这样的事情应该解决它。

$scope.onClick = function(){
    getTableData($scope.valueSelected).success(function(response) {
        $scope.tableData = response.data 
    });
};

function getTableData(table) {
    return $http.post('/master/tableData/' + table);
}

AngularJs数据表动态表更改

1 个答案: