Original: 207 Importing Data
The importer function allows data to be imported into csv or json format. The importer can use the menu in the table or accept custom files implemented by the user to select files in the computer.
The importer function imports files in json or csv format. If the requirement exists, it can be extended to other file formats.
Documentation of importer functionality is provided in api documents, in particular:
For json format files, it is assumed that the received element matches the column. Field attributes are loaded into the provided entity in columnDefs of gridOptions. For csv files, the data will be mapped to columnDefs, which contains columns in the csv header row that need to match column.name or column.displayName. You can choose to provide a custom column.name that maps headings to columns, which you can use to implement a custom column selector type routine. If you use internationalization in headings (for example, by adding cellHeaderFilter), you can also choose to pass the filter function to the importerHeaderFilterCallback routine. This routine will be called displayName to try to match the translated text. If you provide this routine, it must return the immediate translation instead of a promise - so if you use angular-translate, you need to use $translate.instant.
You can choose to provide a custom function that maps the imported data in each entity, referring to the documentation of the importer Object Callback.
To use the importer, you need to introduce ui-grid-importer instructions on the table, and you must provide a gridOptions. importerDataAddCallback function to add the created objects to the data array. You also need to install the csv-js library and bower install the-savedev csv-js. You can configure csv-js libraries by using globals, such as CSV.DETECT_TYPES = false; for more information, see{ https://github.com/gkindel/CSV-JS csv document}.
You can find the configuration and API of the importer function in ui.grid.importer.
The importer adds menu items to the table menu and uses gridOption enableGridMenu to enable the table menu. You can close the importer Show Menu: false by setting importer Show Menu.
Example
In this example, we import files using the table menu. You need to provide a file from the file system to use this tutorial. You can copy any import. json or import. csv as test files.
The table will start empty, and auto-populate column definitions and data will be imported (in many uses, you will define column definitions earlier, and this example shows that this is not mandatory).
Code:
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 
Limited level, inappropriate place please correct.