如何修改和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-网格更改数据

回答

相关问题