Skip to content

Instantly share code, notes, and snippets.

@hohwille

hohwille/gist:cf6c031675755940cb9c

Created April 22, 2015 09:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hohwille/cf6c031675755940cb9c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hohwille/cf6c031675755940cb9c to your computer and use it in GitHub Desktop.
Download ZIP
ui-grid demo
Raw
gistfile1.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- <link rel="stylesheet" href="http://ui-grid.info/docs/css/bootstrap.min.css" /> -->
<!-- <link rel="stylesheet" href="http://ui-grid.info/css/bootstrap-responsive.min.css" /> -->
<link rel="stylesheet" href="http://ui-grid.info/docs/css/bootstrap-flatly.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://ui-grid.info/css/site.css" />
<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>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="feature" ng-app="demo">
<div ui-i18n="{{lang}}">
<!--<select ng-model="lang" ng-options="l for l in langs"></select><br>-->
<h4 class="feature-heading">Complex Example</h4>
<div class="grid" style="height: 450px;" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns ui-grid-selection ui-grid-move-columns ui-grid-exporter ui-grid-grouping></div>
</dir>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<script>
var app = angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.exporter', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.moveColumns', 'ui.grid.grouping']);
app.run(function($rootScope, uiGridConstants) {
//$rootScope.lang = 'de';
$rootScope.gridOptionsComplex = {
enableFiltering: true,
multiSelect: true,
enableRowHeaderSelection: true,
showGridFooter: true,
showColumnFooter: true,
// enableColumnMenus: false,
enableGridMenu: true,
//exporterMenuCsv: true,
columnDefs: [
{ name: 'name', aggregationType: uiGridConstants.aggregationTypes.count, width: 150 },
{ name: 'gender', filter: { term: 'male' }, width: 150, enableCellEdit: false,
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row,col) === 'male') {
return 'blue';
} else if (grid.getCellValue(row,col) === 'female') {
return 'pink';
}
}
},
{ name: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, width: 100 },
{ name: 'company', enableFiltering: false, width: 200 }
],
data: [
{
"name": "Ethel Price",
"gender": "female",
"company": "Enersol",
"age": 25
},
{
"name": "Claudine Neal",
"gender": "female",
"company": "Sealoud",
"age": 19
},
{
"name": "Beryl Rice",
"gender": "female",
"company": "Velity",
"age": 44
},
{
"name": "Wilder Gonzales",
"gender": "male",
"company": "Geekko",
"age": 26
},
{
"name": "Georgina Schultz",
"gender": "female",
"company": "Suretech",
"age": 53
},
{
"name": "Carroll Buchanan",
"gender": "male",
"company": "Ecosys",
"age": 64
},
{
"name": "Valarie Atkinson",
"gender": "female",
"company": "Hopeli",
"age": 35
},
{
"name": "Schroeder Mathews",
"gender": "male",
"company": "Polarium",
"age": 9
},
{
"name": "Lynda Mendoza",
"gender": "female",
"company": "Dogspa",
"age": 49
},
{
"name": "Sarah Massey",
"gender": "female",
"company": "Bisba",
"age": 40
},
{
"name": "Robles Boyle",
"gender": "male",
"company": "Comtract",
"age": 32
},
{
"name": "Evans Hickman",
"gender": "male",
"company": "Parleynet",
"age": 38
},
{
"name": "Dawson Barber",
"gender": "male",
"company": "Dymi",
"age": 21
},
{
"name": "Bruce Strong",
"gender": "male",
"company": "Xyqag",
"age": 61
},
{
"name": "Nellie Whitfield",
"gender": "female",
"company": "Exospace",
"age": 54
},
{
"name": "Jackson Macias",
"gender": "male",
"company": "Aquamate",
"age": 49
},
{
"name": "Pena Pena",
"gender": "male",
"company": "Quarx",
"age": 25
},
{
"name": "Lelia Gates",
"gender": "female",
"company": "Proxsoft",
"age": 54
},
{
"name": "Alfred Oscar",
"gender": "male",
"company": "Transprop",
"age": 34
},
{
"name": "John Alfred",
"gender": "male",
"company": "Haymans",
"age": 70
},
{
"name": "Leonie Warren",
"gender": "female",
"company": "Hilltop",
"age": 25
},
{
"name": "Belinda Gosford",
"gender": "female",
"company": "Archison",
"age": 42
},
{
"name": "Tracey Misoni",
"gender": "female",
"company": "Verizona",
"age": 34
},
{
"name": "Trevino Moreno",
"gender": "male",
"company": "Conjurica",
"age": 31
},
{
"name": "Ethel Price2",
"gender": "female",
"company": "Enersol2",
"age": 25
},
{
"name": "Claudine Neal2",
"gender": "female",
"company": "Sealoud2",
"age": 19
},
{
"name": "Beryl Rice2",
"gender": "female",
"company": "Velity2",
"age": 44
},
{
"name": "Wilder Gonzales2",
"gender": "male",
"company": "Geekko2",
"age": 26
},
{
"name": "Georgina Schultz2",
"gender": "female",
"company": "Suretech2",
"age": 53
},
{
"name": "Carroll Buchanan2",
"gender": "male",
"company": "Ecosys2",
"age": 64
},
{
"name": "Valarie Atkinson2",
"gender": "female",
"company": "Hopeli2",
"age": 35
},
{
"name": "Schroeder Mathews2",
"gender": "male",
"company": "Polarium2",
"age": 29
},
{
"name": "Lynda Mendoza2",
"gender": "female",
"company": "Dogspa2",
"age": 49
},
{
"name": "Sarah Massey2",
"gender": "female",
"company": "Bisba2",
"age": 40
},
{
"name": "Robles Boyle2",
"gender": "male",
"company": "Comtract2",
"age": 32
},
{
"name": "Evans Hickman2",
"gender": "male",
"company": "Parleynet2",
"age": 38
},
{
"name": "Dawson Barber2",
"gender": "male",
"company": "Dymi2",
"age": 21
},
{
"name": "Bruce Strong2",
"gender": "male",
"company": "Xyqag2",
"age": 61
},
{
"name": "Nellie Whitfield2",
"gender": "female",
"company": "Exospace2",
"age": 54
},
{
"name": "Jackson Macias2",
"gender": "male",
"company": "Aquamate2",
"age": 49
},
{
"name": "Pena Pena2",
"gender": "male",
"company": "Quarx2",
"age": 25
},
{
"name": "Lelia Gates2",
"gender": "female",
"company": "Proxsoft2",
"age": 54
},
{
"name": "Alfred Oscar2",
"gender": "male",
"company": "Transprop2",
"age": 34
},
{
"name": "John Alfred2",
"gender": "male",
"company": "Haymans2",
"age": 70
},
{
"name": "Leonie Warren2",
"gender": "female",
"company": "Hilltop2",
"age": 25
},
{
"name": "Belinda Gosford2",
"gender": "female",
"company": "Archison2",
"age": 42
},
{
"name": "Tracey Misoni2",
"gender": "female",
"company": "Verizona2",
"age": 34
},
{
"name": "Trevino Moreno2",
"gender": "male",
"company": "Conjurica2",
"age": 31
}
]
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment