AngularJs數據表動態表變化

-1

我正在一個項目上工作，我想做一些對我來說很新的東西。我在AngularJS中是新的，在角度數據表中更新。AngularJs數據表動態表變化

我從here得到了角度數據表，對我來說有點棘手，因爲我真的不知道如何使用它。例子對我來說不是很明顯。

我想要做什麼：

我有左邊
上，我想通過服務器提供數據的數據表的權利一些複選框一個事務所頁面用戶點擊後複選框
數據表必須更改dinamicaly，因爲取決於請求我有其他數據表的標題。例如，當用戶點擊「角色」返回的對象只有2個字段ID和角色，我想呈現角色列，但不是ID。當用戶點擊「用戶」時，服務器返回的數據具有多個字段的對象，例如：「accNonExp」，「accNonLocked」，「email」，「用戶名」等。

我該怎麼做？

這裏是我的孔德現在：

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>

春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加載與該複選框的數據檢查？

預先感謝您！

來源

2015-07-19 Stefan

由於getTableData（table）函數沒有返回任何值，因此您提到$ scope.tableData是未定義的。這是因爲AJAX請求是異步的。

爲了解決這個問題，你必須提供一個回調函數，用於填充$ scope.tableData的$ http success。要了解更多有關承諾結帳angulars文檔對於Q執行：

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); 
}

來源

2015-07-19 19:18:17 soaP

在我的孔德，onClick函數返回數據時，我對這些複選框 – Stefan

肯定的一個點擊，但在你的代碼已經提供了你沒有正確設置$ scope.tableData。正如我所提到的，$ http.post方法不會返回任何數據，而是包含成功方法的承諾。在我的示例中，您可以看到，我正在將傳遞給該成功方法的回調中的$ scope.tableData設置爲。 – soaP

AngularJs數據表動態表變化

回答

相關問題