ng-grid实现表格

<div class="gridStyle" ng-grid="gridOptions">
</div>

在所属控制器中：

$scope.gridOptions = {
data: 'books',
rowTemplate: '<div style="height: 100%"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
multiSelect: false,//是否支持多选
enableCellSelection: true,//单元格是否可被选中
enableRowSelection: false,//行是否可被选中
enableCellEdit: true,//单元格可否被编辑
enablePinning: true,
columnDefs: [{//列的定义
field: 'index',
displayName: '序号',
width: 60,
pinnable: false,
sortable: false
}, {
field: 'name',
displayName: '书名',
enableCellEdit: true
}, {
field: 'author',
displayName: '作者',
enableCellEdit: true,
width: 220
}, {
field: 'pubTime',
displayName: '出版日期',
enableCellEdit: true,
width: 120
}, {
field: 'price',
displayName: '定价',
enableCellEdit: true,
width: 120,
cellFilter: 'currency:"￥"'//对于钱可以定义filter格式化
}, {
field: 'bookId',
displayName: '操作',
enableCellEdit: false,
sortable: false,
pinnable: false,
cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
}],
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};rowTemplate：每一行的模版
enablePinning：如下图圈出



cellTemplate：单元格内也可以自定义模版，官方文档中给出了规定的模版。

关于表单的校验：本地校验和远程校验

http://damoqiongqiu.iteye.com/blog/1920191

http://damoqiongqiu.iteye.com/blog/1920993