AngularJS——ngGrid(可配置的表格)

  • Post author:
  • Post category:其他


ngGrid的功能其实是比较强大的,官网地址:http://angular-ui.github.io/ui-grid/

从官网看,它的基本步骤如下:

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>&nbsp;&nbsp;\n        <a><i class=”icon-minus” ng-click=”deleteItem(row.entity, row.rowIndex)”></i></a>\n    </span>\n</div>’}

]

};

还有这种模板写法

过滤器的加法是这样的:

field: 'deptCode | performedByFilter :deptDict'



版权声明:本文为qq_34188112原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。