十八、UI-Grid 大数据集
来源:互联网 发布:白手套 知乎 编辑:程序博客网 时间:2024/06/07 17:41
原文:190 Large Dataset
这个表格示例使用10000个记录的数据集。
演示如下:
- 绑定复杂的列属性 城市.地址。
- 同一字段可以在具有不同名称的表格中列出两次
- 使用字段而不是名称便于2.x 向后兼容
代码:
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"> <strong>Data Length:</strong> {{ gridOptions.data.length | number }} <br> <br> <div id="grid1" ui-grid="gridOptions" class="grid"></div> </div> </body></html>
main.css
.grid { width: 500px; height: 450px;}
app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);app.controller('MainCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) { $scope.gridOptions = { }; $scope.gridOptions.columnDefs = [ {name:'id'}, {name:'name'}, {field:'age'}, // showing backwards compatibility with 2.x. you can use field in place of name {name: 'address.city'}, {name: 'age again', field:'age'} ]; var canceler = $q.defer(); $http.get('/data/10000_complex.json', {timeout: canceler.promise}) .success(function(data) { $scope.gridOptions.data = data; }); $scope.$on('$destroy', function(){ canceler.resolve(); // Aborts the $http request if it isn't finished. });}]);
Demo
水平有限,不当之处敬请指正。
0 0
- 十八、UI-Grid 大数据集
- 二十八、UI-Grid Grouping 分组
- 十八掌大数据培训
- 十八掌大数据分析
- kendo ui grid 使用远程数据
- 十一、UI-Grid 增/删/替换 数据
- angularjs ui-grid 导出表格数据csvExport
- 二十五、UI-Grid 导出数据
- 二十六、UI-Grid 导入数据
- angularjs ui-grid 导出表格数据csvExport
- Kendo UI grid数据聚合实例
- 数据挖掘十八大经典算法
- 学大数据就来十八掌
- 十八掌大数据视频免费领
- kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)
- Kendo UI grid API 获取 filter 后的所有数据
- Kendo UI Grid中的动态数据(一)
- Kendo UI Grid中的动态数据(三)
- Js判断Android和IOS、微信和QQ
- MySQL基础实战操作总结
- CrossValidation十字交叉验证的Python实现
- KNN(一)--简单KNN原理及实现
- [李景山php]每天laravel[036]-laravel 系统服务 --- 认证-1
- 十八、UI-Grid 大数据集
- 【第一个爬虫】python爬取58同城企业信息并插入数据库
- 实现ATM取款机功能
- 选拔赛之 线段树
- httpd常见状态码
- Java同步块(synchronized block)使用详解
- 实例记录
- android java substring
- linq表连接遇到的问题