原文：207 Importing Data
导入程序功能允许导入到 csv 或 json 格式的数据。导入程序可以使用表格中的菜单, 或者接受由用户实现的自定义文件选取电脑中的文件。
导入程序功能以 json 或 csv 格式导入文件, 如果需求存在, 则可以扩展到其他文件格式。
api 文档中提供了导入器功能的文档, 特别是:
gridOptionspublicApi对于 json 格式文件, 将假定接收的元素与列匹配. 字段属性在gridOptions 的 columnDefs, 并被加载到所提供的实体。对于 csv 文件, 数据将映射到 columnDefs, 其中包含 csv 标题行中的列需要匹配 column.name或column.displayName。可以选择提供将标题映射到列的自定义column.name, 而这将改为使用, 您可以用它来实现自定义的 “列选取器” 类型例程。如果在标题上使用国际化 (比方说, 通过添加 cellHeaderFilter), 则还可以选择将筛选函数传递到 importerHeaderFilterCallback 例程中。此例程将被调用displayName 以尝试匹配翻译的文本, 如果您提供此例程, 它必须返回立即翻译, 而不是一个 promise-所以如果使用angular-translate, 您需要使用$translate.instant。
您可以选择提供一个自定义函数, 在每个实体中映射导入的数据, 请参考 importerObjectCallback 的文档。
若要使用导入程序, 需要在表格上引入ui-grid-importer指令, 并且必须提供一个 gridOptions. importerDataAddCallback 函数, 将创建的对象添加到数据数组中。您还需要安装 csv-js库, bower install 安装-savedev csv-js。您可以通过使用 globals 来配置 csv-js 库,例如 CSV.DETECT_TYPES = false;有关更多信息, 请参见 {https://github.com/gkindel/CSV-JS csv 文档}。
可以在 ui.grid.importer 找到导入程序功能的配置和 API 。
导入程序将菜单项添加到表格菜单中, 使用 gridOption enableGridMenu 启用表格菜单。您可以通过设置 importerShowMenu 来关闭导入菜单 importerShowMenu: false.
例子 在此示例中, 我们使用表格菜单导入文件。您需要从文件系统中提供一个文件以使用本教程, 您可以复制任何导入. json 或导入. csv 作为测试文件。
表格将开始为空, 并且在导入文件后将 auto-populate 列定义和数据 (在许多用法中, 您将在前面定义列定义, 此示例说明这样做不是强制性的)。
代码： index.html
<!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="/release/ui-grid.js"></script> <script src="/release/ui-grid.css"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <div ui-grid="gridOptions" ui-grid-importer class="grid"></div> </div> </body> </html>main.css
.grid { width: 500px; height: 400px; }app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer']); app.controller('MainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) { $scope.data = []; $scope.gridOptions = { enableGridMenu: true, data: 'data', importerDataAddCallback: function ( grid, newObjects ) { $scope.data = $scope.data.concat( newObjects ); }, onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; } }; }]);import.json:
[{"Name":"John Smith","Gender":"male","Company":"TestIcon"},{"Name":"Jane Doe","Gender":"female","Company":"FastTruck"}]import.csv:
"Name","Gender","Company" "John Smith","male","TestIcon" "Jane Doe","female","FastTrucks"Demo
作者水平有限，不当之处敬请指正。
感谢您的阅读，如果觉得文章对您有帮助，请支持一下。
