从官网看,它的基本步骤如下:
1.<div class=”gridStyle” ng-grid=”gridOptions”></div>
gridOptions就是绑定表格的变量。
2.可以先给表格设置一个基本的样式,如:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
3.在控制器中添加数据:
$scope.myData = [{name: “Moroni”, age: 50},
{name: “Tiancum”, age: 43},
{name: “Jacob”, age: 27},
{name: “Nephi”, age: 29},
{name: “Enos”, age: 34}];
4.在同个控制器下初始化表格:
$scope.gridOptions = { data: ‘myData’ };
有很多基础的例子可以从官网学习。
$scope.gridOptions= {
data: ‘myData ‘,
selectedItems: ,
multiSelect: false,
enableColumnResize: true,
enableCellEditOnFocus: true,
enableRowEditOnSelected: true,
i18n: ‘zh-cn’,
columnDefs: [
{displayName: ‘序号’, cellClass: “text-center”, width: ‘6%’, enableCellEdit: false,
cellTemplate: ‘<div class=”ngCellText” ng-class=”col.colIndex()”><span ng-cell-text>{
{ row.rowIndex }}</span></div>’},
{field: ‘examClass’, displayName: ‘检查分类’, width: ‘10%’, enableCellEdit: true,
editableCellTemplate: ‘<select style=”width: 100%;” ui-select2 ng-grid-select2 is-grid=”true” ng-model=”row.entity.examClass” >\n <option ng-repeat=”examClass in examClassDict” value=”{
{examClass.examClassName}}”>{
{examClass.examClassName}}</option>\n</select>’},
{field: ‘examEquipName’, displayName: ‘设备名称’, width: ‘15%’, enableCellEdit: true,
editableCellTemplate: ‘<input style=”width: 100%;” ng-input type=”text” is-grid=”true” ng-model=”row.entity.examEquipName” ng-change=”change()”>’},
{field: ‘memo’, displayName: ‘备注’, width: ‘20%’, enableCellEdit: true,
editableCellTemplate: ‘<input style=”width: 100%;” ng-input type=”text” is-grid=”true” ng-model=”row.entity.memo”>’},
{displayName: ‘操作’, width: ‘8%’, enableCellEdit: false, cellClass: ‘text-center’,
cellTemplate: ‘<div class=”ngCellText” ng-class=”col.colIndex()”>\n <span ng-cell-text>\n <a><i class=”icon-plus” ng-click=”newItem(row.rowIndex)”></i></a> \n <a><i class=”icon-minus” ng-click=”deleteItem(row.entity, row.rowIndex)”></i></a>\n </span>\n</div>’}
]
};
还有这种模板写法
过滤器的加法是这样的:
field: 'deptCode | performedByFilter :deptDict'