ng-Grid api: http://blog.csdn.net/lylliu/article/details/44962679
html:
<!DOCTYPE html> <html ng-app="ngGridTestApp"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style/jquery-ui.css"> <link rel="stylesheet" href="style/ng-grid.css"> <title>Title</title> </head> <body ng-controller="ngGridTestController"> <div style="height: 500px" ng-grid="ngGridTest"></div> <script src="framework/jquery.js"></script> <script src="framework/angular.js"></script> <script src="framework/ng-grid.js"></script> <script src="myJs/ngGridTest.js"></script> </body> </html>
javaScript:
angular.module('ngGridTestApp',['ngGrid'])
.controller('ngGridTestController',function($scope){
var idTemplate = "<div style=\'background-color: #e4b9b9;text-align: center\'>\n <span>{{row.entity.id}}</span>\n</div>";
var nameTemplate = "<div style=\'background-color: aquamarine;text-align: center\'>\n <span>{{row.entity.name}}</span>\n</div>";
var ageTemplate = "<div style=\'background-color: aqua;text-align: center\'>\n <span>{{row.entity.age}}</span>\n</div>";
$scope.dateSource = [
{id:1, name:'千山鸟飞绝',age:20},
{id:2, name:'万径人踪灭',age:21},
{id:3, name:'孤舟蓑笠翁',age:22},
{id:4, name:'独钓寒江雪',age:23}
];
$scope.myDefs = [
{field: 'id', width: '25%', displayName: 'ID', cellTemplate: idTemplate},
{field: 'name', displayName: '姓名', cellTemplate: nameTemplate},
{field: 'age', width: '27%', displayName: '年龄', cellTemplate: ageTemplate}
];
$scope.ngGridTest = {
i18n: 'zh-cn',
data: 'dateSource',
columnDefs: $scope.myDefs,
selectedItems: $scope.selectedItem,//选择某行这一行的对象就赋值给$scope.selectedItem
multiSelect: false,//不可多选
showSelectionCheckbox: true//每行显示checkbox
}
});