如何修改和NG-網格更改數據

我有以下代碼：如何修改和NG-網格更改數據

var app = angular.module('mcmmo', ['ngGrid']); 
app.controller('mcmmoCtrl', function($scope, $http) { 
    $scope.filterOptions = { 
     filterText: "", 
     useExternalFilter: true 
    }; 
    $scope.totalServerItems = 0; 
    $scope.pagingOptions = { 
     pageSizes: [250, 500, 1000], 
     pageSize: 250, 
     currentPage: 1 
    }; 
    $scope.setPagingData = function(data, page, pageSize){ 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
     $scope.myData = pagedData; 
     $scope.totalServerItems = data.length; 
     if (!$scope.$$phase) { 
      $scope.$apply(); 
     } 
    }; 
    $scope.getPagedDataAsync = function (pageSize, page, searchText) { 
     setTimeout(function() { 
      var data; 
      if (searchText) { 
       var ft = searchText.toLowerCase(); 
       $http.get('stats.php').success(function (largeLoad) {  
        data = largeLoad.filter(function(item) { 
         return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
        }); 
        $scope.setPagingData(data,page,pageSize); 
       });    
      } else { 
       $http.get('stats.php').success(function (largeLoad) { 
        $scope.setPagingData(largeLoad,page,pageSize); 
       }); 
      } 
     }, 100); 
    }; 

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

    $scope.$watch('pagingOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 
    $scope.$watch('filterOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 
    $scope.gridOptions = { 
     data: 'myData', 
     enablePaging: true, 
     showFooter: true, 
     totalServerItems: 'totalServerItems', 
     pagingOptions: $scope.pagingOptions, 
     filterOptions: $scope.filterOptions, 
     plugins: [new ngGridFlexibleHeightPlugin()] 
    }; 
});

從一個php文件拉JSON的一個非常大的負荷，這是存儲在數據庫中。這是我的json結果。

[{"id":"1","user":"user1","lastlogin":"1402936307","skills":[{"taming":"4","mining":"534","woodcutting":"84","repair":"26","unarmed":"0","herbalism":"108","excavation":"219","archery":"10","swords":"75","axes":"24","acrobatics":"74","fishing":"403","alchemy":"0"}]

}

這裏是輸出這個PHP：

require_once('db.php'); 
error_reporting(1); 
    $getUsers = mysqli_query($db, 'SELECT * FROM mcmmo_users LIMIT 300'); 
    $rows = array(); 

    while ($r = mysqli_fetch_assoc($getUsers)) 
    { 
     $skills = array(); 
     $tempRow = $r; 
     $getSkills = mysqli_query($db, "SELECT * FROM mcmmo_skills WHERE user_id = '" . $r['id'] . "' LIMIT 300"); 
     while ($r = mysqli_fetch_assoc($getSkills)) 
     { 
      unset($r['user_id']); 
      $skills[] = $r; 
     } 
     $tempRow['skills'] = $skills; 
     $rows[] = $tempRow; 
    } 

    header('Content-Type: application/json'); 
    echo json_encode($rows);

而這正是我的網格目前的樣子：

enter image description here

有一對夫婦這裏的東西錯了：

我不想要id或lastlogin列。
我想重命名「用戶」。
除了「技能」專欄之外，我希望所有數據都位於自己的專欄中，例如，馴服和挖掘是它自己的專欄，它的數據在自己的專欄中。

我不確定如何用這個插件做到這一點，但任何幫助將不勝感激！

來源

2014-12-06 devs

是你的個人資料？如果是這樣，按照你想要的方式構建JSON是一種簡單的方法來分割列。至於隱藏和重命名，檢查GitHub上的[API]（https://github.com/angular-ui/ng-grid/wiki/Defining-columns）會很快顯示出來;請參閱'$ scope.gridOptions'中的'columnDefs'）。 – adamdc78 2014-12-06 20:58:30

是的，我不明白你會如何做到這一點來渲染它？ – devs 2014-12-06 21:40:21

含義，不知道如何在收到JSON後執行該操作@ adamdc78 – devs 2014-12-06 22:28:03

好吧，也許改變查詢字符串將很容易處理它。同樣，當您在查詢結果中導航時，您可以構建自己的數組，只需使用包含鍵的數組作爲列的名稱即可。

$getUsers = mysqli_query($db, 'SELECT * FROM mcmmo_users LEFT JOIN mcmmo_skills ON mcmmo_users.id = mcmmo_skills.user_id'); 
$rows = array(); 

$cont = 0; 
$userSkills = array(); 
while ($r = mysqli_fetch_assoc($getUsers)) 
{ 
    $userSkills[$cont++] = array(
     "Users" => $r['user'], 
     "Taming" => $r["taming"], 
     "Mining" => $r["mining"] 
    ); 
} 

header('Content-Type: application/json'); 
echo json_encode($userSkills);

關於分頁

嘗試dirPagination在https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

這是非常簡單的使用，節省了大量的時間。

來源

2014-12-06 23:34:19 Kerberus

正如其中一位評論者已經建議的那樣，您可以指定不同於列入輸入數據的列定義。當你定義網格選項，你可選擇分開顯示的數據指定列定義：

$scope.resultGridOptions = { 
     data: 'myData', 
     columnDefs: 'columndefs', 
     // other parameters....

然後你只需要定義列引用您的來電數據記錄在這裏（特別是外地和顯示名）：

https://github.com/angular-ui/ng-grid/wiki/Defining-columns

在你的情況，像

$scope.columndefs = [{field:'id', displayName:'Id'}, {field:'user', displayName:'User'}];

只應使用標題Id和User顯示id和用戶列。（除非我有拼寫錯誤）

只是注意到了問題的最後一欄：我不知道如何在最後一欄顯示如此多的信息。根據我的理解，ng-grid不支持可變網格高度，所以除非你能找出一種方法將這些信息真實地壓縮到一個列中，否則它會變得很困難，但是我對你的域名不太瞭解，合理。

來源

2014-12-08 22:04:58 ajl

如何修改和NG-網格更改數據

回答

相關問題