2014-12-06 2 views
0

나는 다음과 같은 코드가 있습니다수정 NG 그리드에 데이터를 변경하는 방법

PHP 파일에서 JSON의 매우 큰 부하를 가져옵니다
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 결과입니다.

[{"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 열이 필요하지 않습니다.
  • "사용자"의 이름을 변경하고 싶습니다.
  • "스킬"열 대신에 모든 데이터가 자체 열에 있어야합니다. 예를 들어, 길들이기 및 마이닝은 자체 행에 데이터가있는 자체 열입니다.

필자는이 플러그인을 사용하는 방법을 모르지만, 어떤 도움을 주시면 감사하겠습니다!

+0

귀하의 데이터입니까? 그렇다면 원하는대로 JSON을 구현하면 열을 쉽게 나눌 수 있습니다. 숨기기 및 이름 바꾸기에 대해서는 GitHub에서 [API] (https://github.com/angular-ui/ng-grid/wiki/Defining-columns)를 확인하면 짧은 순서로 표시됩니다. '$ scope.gridOptions'의'columnDefs'를보십시오). – adamdc78

+0

네, 그런 식으로 렌더링하는 방법을 이해하지 못하겠습니까? – devs

+0

JSON을받은 후이를 수행하는 방법을 모르겠다. @ adamdc78 – devs

답변

0

글쎄, 어쩌면 쿼리 문자열을 변경하면 쉽게 처리 할 수 ​​있습니다. 또한 쿼리 결과 내부를 탐색 할 때 자신 만의 배열을 만들 수 있습니다. 단, 키 이름이 배열 인 배열을 사용하면됩니다. https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

그것은 사용하기 매우 간단하고 많은 시간을 절약에서 페이지 매김

소개

해보십시오 dirPagination

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

.

0

의견 작성자 중 한 명이 이미 제안 했으므로 들어오는 데이터에서받은 것과 다른 열 정의를 지정할 수 있습니다. 당신이 당신의 그리드 옵션을 정의 할 때 선택적으로 표시되는 데이터와 별도로 열 정의를 지정 : 여기에 (특히 필드 나 displayName)에 설명 된대로

$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 및 user 열을 표시합니다. (내가 오타가없는 한)

질문의 마지막 열 부분에 나타났습니다. 최종 열에 많은 정보를 표시하는 방법을 모르겠습니다.ng-grid는 필자 지식에 따라 다양한 그리드 높이를 지원하지 않으므로이 정보를 실제로 집계 할 수있는 방법을 찾아 낼 수 없다면 어려울 것입니다.하지만 도메인에 대해 알만한 정보가 충분하지는 않습니다. 합리적.