Question

我们有几个REST端点，它返回一个csv格式的文件，每个文件上的列数不同。我在我的AngularJS应用程序上为每个都硬编码了columnDefs。到目前为止它工作得很好。

一旦引入新的csv文件，它将成为一场噩梦。它也变成了一个夜晚，当现有的csv文件被修改并且我没有得到通知时。

我们怎样才能使它尽可能通用，这意味着它会根据响应进行调整？每当有变化时，我想摆脱硬编码的columnDefs。

Answer 1

以下是如何通过可以从服务器加载数据的对象数组创建columnDefs：

    <!DOCTYPE html>
<html >
    <head>
        <title>Demo Grid</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    </head>
    <body ng-app="app">
        <div ng-controller="gridController">
            <div ui-grid="gridOptions" ng-init="GetGridData(urlList)">
            </div>
        </div>

        <script src="Scripts/ng/angular.min.js"></script>
        <script src="Scripts/ng-grid/ui-grid.min.js"></script>
        <link rel="Stylesheet" type="text/css" href="Scripts/ng-grid/ui-grid.min.css" />

        <script type="text/javascript">
            var app = angular.module('app', ['ui.grid']);

            app.controller("gridController", ["$scope", "$http", "$q", function ($scope, $http, $q)
            {
                $scope.urlList = "YourURL";

                function fnGetList(url)
                {
                    var deferred = $q.defer();
                    $http.get(url)
                        .success(function (data)
                        {
                            deferred.resolve(data);
                        })
                        .error(function (errorMessage)
                        {
                            alert(errorMessage);
                            deferred.reject;
                        });
                    return deferred.promise;
                };

                function fnParseContent(content)
                {
                    //  Assuming your content.data and content.columnDefs contains well-formed JSON

                    if (content.columnDefs !== undefined)
                    {
                        $scope.gridOptions.columnDefs = JSON.parse(content.columnDefs);
                    }

                    if (content.data !== undefined)
                    {
                        $scope.loadData = JSON.parse(content.data);
                    }
                }

                $scope.GetGridData = function (url)
                {
                    //console.log("In GetGridData: " + "Getting the data");
                    $scope.loadData = undefined;

                    //  Test Only - Uncomment for client-side test only
                    //  This is how your columnDefs should look like coming from the server

                    //var content =
                    //{
                    //    columnDefs: JSON.stringify(
                    //        [
                    //            { field: 'UserName', name: 'User' },
                    //            { field: 'Email', name: 'e-mail' }
                    //        ]),
                    //    data: JSON.stringify(
                    //        [
                    //                {
                    //                    "UserName": "Joe.Doe",
                    //                    "Email": "Joe.Doe@myWeb.com"
                    //                },
                    //                {
                    //                    "UserName": "Jane.Doe",
                    //                    "Email": "Jane.Doe@myWeb.com"
                    //                },
                    //        ])
                    //}
                    //fnParseContent(content);
                    //return;

                    //  End of Test Only block

                    fnGetList(url).then(fnParseContent(content));
                };

                $scope.gridOptions =
                {
                    data: 'loadData',
                };
            }
            ]);
        </script>
    </body>
</html>

希望这可以帮助您解决问题。

干杯。

Answer 2

我就这样做了

RestFactory.all('csvexport').get($scope.gdEndpointPath, {
    reportresourceid : $rootScope.downloadToken,
}).then(function(csvdata) {
    $scope.gridOptions.columnDefs.length = 0;
    $scope.myData = csvToJson(csvdata);
    $scope.gridOptions.data = $scope.myData;

    for (var i = 0; i < csvdata.split("\n")[0].split(",").length; i++) {
        $scope.gridOptions.columnDefs.push({ name : JSON.parse(csvdata.split("\n")[0].split(",")[i]), enableSorting: true })
    }
}, function(err) {
       ....... 
});

需要使Angular ui-grid columnDefs尽可能通用的想法

2 个答案: