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

从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列。
我想重命名＆＃34;用户＆＃34;。
而不是＆＃34;技能＆＃34;我想知道所有数据都在其自己的专栏中，例如，驯服和挖掘是它自己的专栏，其中包含数据＆＃39;自己的行。

我不知道怎么用这个插件做到这一点，任何帮助都将不胜感激！

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

关于分页

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

尝试dirPagination

使用它非常简单，节省了大量时间。

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'}];

应仅显示标题为Id和User的id和user列。（除非我有拼写错误）

刚刚注意到问题的最后一栏：我不确定如何在最后一栏中显示如此多的信息。根据我的知识，ng-grid不支持可变网格高度，所以除非你能找到一种方法将这些信息真正压缩到一个专栏中，否则它会很难实现，但我对你的域名不太了解，无法推荐任何内容。这似乎是合理的。

如何在ng-grid中修改和更改数据

2 个答案: