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'

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐