王骏的博客
编程、网络技术点滴...

公告

逐渐将VC知识库的博客迁移到这里!

随笔分类

随笔档案

相册

最新评论

阅读排行榜

评论排行榜

程序员博客   首页  新随笔  订阅  管理  登录 
 
JO2000 阅读(377) 评论(0)

Html:

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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>
<link rel="stylesheet" href="http://www.okbase.net/file/link?u=http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="http://www.okbase.net/file/link?u=main.css" type="text/css">
</head>
<body>

<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
</div>

<script src="app.js"></script>
</body>
</html>

 

JS:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};

$scope.gridOptions.columnDefs = [
{ name:'id', width:50, enablePinning:false },
{ name:'name', width:100, pinnedLeft:true },
{ name:'age', width:100, pinnedRight:true },
{ name:'address.street', width:150 },
{ name:'address.city', width:150 },
{ name:'address.state', width:50 },
{ name:'address.zip', width:50 },
{ name:'company', width:100 },
{ name:'email', width:100 },
{ name:'phone', width:200 },
{ name:'about', width:300 },
{ name:'friends[0].name', displayName:'1st friend', width:150 },
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
{ name:'friends[2].name', displayName:'3rd friend', width:150 },
];
$scope.gridOptions.rowTemplate = '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ng-mouseover="grid.appScope.hoveredIndex = rowRenderIndex" ng-mouseleave="grid.appScope.hoveredIndex = null" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{\'ui-grid-row-header-cell\': col.isRowHeader, \'your-hover-class\': grid.appScope.hoveredIndex === rowRenderIndex}" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);


CSS:
.your-hover-class {
color:red;
}