阿里云新用户优惠

二十六、UI-Grid Importing Data 导入数据

· 213 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：207 Importing Data

导入程序功能允许导入到 csv 或 json 格式的数据。导入程序可以使用表格中的菜单, 或者接受由用户实现的自定义文件选取电脑中的文件。

导入程序功能以 json 或 csv 格式导入文件, 如果需求存在, 则可以扩展到其他文件格式。

api 文档中提供了导入器功能的文档, 特别是:

  • gridOptions
  • publicApi

对于 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="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/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"

关注微信公众号，与我交流吧~

分享