Как изменить и изменить данные в нг-сетке

Question

У меня есть следующий код:

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

который тянет очень большую нагрузку JSON из файла PHP, который хранится в базе данных. Вот мои результаты 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); 

И это то, что моя сетка в настоящее время выглядит следующим образом:

Существует пара здесь не так:

• Мне не нужны столбцы id или lastlogin.
• Я бы хотел переименовать «пользователей».
• Вместо столбца «skills» я бы хотел, чтобы все данные были в его собственном столбце, например, приручение и интеллектуальный анализ - это собственный столбец с его данными в собственной строке.

Я не уверен, как это сделать с этим плагином, хотя любая помощь будет оценена!

Answer 1

Ну, возможно, изменение строки запроса будет легко справиться с этим. Также к тому моменту, когда вы перемещаетесь внутри результата запроса, вы можете создать собственный массив, просто используйте массив с ключом в качестве имени столбца.

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

О PAGINATION

Try dirPagination на https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Это очень просто использовать его и экономит много времени.

Answer 2

Как уже указывал один из комментаторов, вы можете указать разные определения столбцов, чем вы получили в своих входящих данных. Когда вы определяете параметры сетки, вы дополнительно указать определение столбцов отдельно от данных:

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

Тогда вам просто нужно определить столбцы, чтобы ссылаться на входящие данные как описано здесь (особенно поля и DISPLAYNAME):

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

В вашем случае, что-то вроде

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

должен только показать идентификационные и пользовательские столбцы с идентификаторами заголовков и пользователем. (за исключением случаев, когда у меня есть опечатка)

Только что заметили последнюю часть столбца вашего вопроса: я не уверен, как показать столько информации в последней колонке.ng-grid не поддерживает переменную высоту сетки, насколько мне известно, поэтому это затруднит работу, если вы не сможете определить способ действительно сконденсировать эту информацию в столбце, но я недостаточно знаю о вашем домене, чтобы рекомендовать все, что кажется разумный.