名称：{{testRow.name}}               

ui-grid-edit: grid 编辑指令；

ui-gird-pagination : grid 分页指令；

ui-grid-selection : grid 选择行所需指令；

ui-grid-exporter : grid 导出功能所需指令；

ui-grid-resize-colums: grid 列宽可以拉伸所需指令；

ui-grid-auto-resize : 解决grid布局 自动适应div 高度和宽度问题（非常有用）；

js 代码：

var app = angular.module('myApp', ['ui.grid','ui.grid.selection','ui.grid.edit',

            'ui.grid.exporter','ui.grid.pagination','ui.grid.resizeColumns','ui.grid.autoResize']);

        

        app.controller('MyCtrl', function($scope,i18nService) {

            // 国际化；

            i18nService.setCurrentLang("zh-cn");

            

            $scope.gridOptions = {

                data: 'myData',

                columnDefs: [{ field: 'name', 

                                 displayName: '名字', 

                                 width: '10%', 

                                 enableCellEdit: false // 是否可编辑

                             },

                             { field: "age"},

                             { field: "birthday"},

                             { field: "salary"}

                            ],

                            

                enableSorting: true, //是否排序

                useExternalSorting: false, //是否使用自定义排序规则

                enableGridMenu: true, //是否显示grid 菜单

                showGridFooter: true, //是否显示grid footer

                enableHorizontalScrollbar :  1, //grid水平滚动条是否显示, 0-不显示  1-显示

                enableVerticalScrollbar : 0, //grid垂直滚动条是否显示, 0-不显示  1-显示

                

                //-------- 分页属性 ----------------

                enablePagination: true, //是否分页，默认为true

                enablePaginationControls: true, //使用默认的底部分页

                paginationPageSizes: [10, 15, 20], //每页显示个数可选项

                paginationCurrentPage:1, //当前页码

                paginationPageSize: 10, //每页显示个数

                //paginationTemplate:"

", //自定义底部分页代码

                totalItems : 0, // 总数量

                useExternalPagination: true,//是否使用分页按钮

                

           

                //----------- 选中 ----------------------

                enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true

                enableFullRowSelection : true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中

                enableRowHeaderSelection : true, //是否显示选中checkbox框 ,默认为true

                enableRowSelection : true, // 行选择是否可用，默认为true;

                enableSelectAll : true, // 选择所有checkbox是否可用，默认为true; 

                enableSelectionBatchEvent : true, //默认true

                   isRowSelectable: function(row){ //GridRow

                   if(row.entity.age > 45){

                       row.grid.api.selection.selectRow(row.entity); // 选中行

                   }

                },

                modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;

                multiSelect: true ,// 是否可以选择多个,默认为true;

                noUnselect: false,//默认false,选中后是否可以取消选中

                selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；

                

                //--------------导出----------------------------------

                exporterAllDataFn: null,

                exporterCsvColumnSeparator: ',',

                exporterCsvFilename:'download.csv',

                exporterFieldCallback : function ( grid, row, col, value ){

                 if ( value == 50 ){

                   value = "可以退休";

                 }

                 return value;

                },

                exporterHeaderFilter :function( displayName ){ 

                   return 'col: ' + name; 

                },

                exporterHeaderFilterUseName : true,

                exporterMenuCsv : true,

                exporterMenuLabel : "Export",

                exporterMenuPdf : true,

                exporterOlderExcelCompatibility : false,

                exporterPdfCustomFormatter : function ( docDefinition ) {

                 docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };

                 return docDefinition;

                },

                exporterPdfFooter :{ 

                                     text: 'My footer', 

                                     style: 'footerStyle' 

                                   },

                exporterPdfDefaultStyle : {

                  fontSize: 11

                },

                exporterPdfFilename:'download.pdf',

                /* exporterPdfFooter : {

                 columns: [

                   'Left part',

                   { text: 'Right part', alignment: 'right' }

                 ]

                }, 

                或 */

                exporterPdfFooter: function(currentPage, pageCount) { 

                       return currentPage.toString() + ' of ' + pageCount; 

                },

                exporterPdfHeader : function(currentPage, pageCount) { 

                   return currentPage.toString() + ' of ' + pageCount; 

                },

                exporterPdfMaxGridWidth : 720,

                exporterPdfOrientation : 'landscape',//  'landscape' 或 'portrait'

                exporterPdfPageSize : 'A4',// 'A4' or 'LETTER' 

                exporterPdfTableHeaderStyle : {

                 bold: true,

                 fontSize: 12,

                 color: 'black'

                },

                exporterPdfTableLayout : null,

                exporterPdfTableStyle: {

                 margin: [0, 5, 0, 15]

                },

                exporterSuppressColumns : ['buttons'],

                exporterSuppressMenu: false,

                //---------------api---------------------

                onRegisterApi: function(gridApi) {

                    $scope.gridApi = gridApi;

                    //分页按钮事件

                    gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {

                          if(getPage) { 

                              getPage(newPage, pageSize); 

                           }

                    });

                    //行选中事件

                    $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){

                        if(row){

                            $scope.testRow = row.entity;

                        }

                     });

                }

            };

            

            var getPage = function(curPage, pageSize) {

                    var firstRow = (curPage - 1) * pageSize;

                    $scope.gridOptions.totalItems = mydefalutData.length;

                    $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);

                    //或者像下面这种写法

                    //$scope.myData = mydefalutData.slice(firstRow, firstRow + pageSize);

            };

            

            var mydefalutData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },

                            { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },

                            { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },

                            { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },

                            { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },

                            { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },

                            { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },

                            { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },

                            { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },

                            { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },

                            { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },

                            { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },

                            { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },

                            { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },

                            { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];

            

            getPage(1, $scope.gridOptions.paginationPageSize);

        });

==============================

'use strict';

myApp.controller(
'itEquipmentCreatController', [
'ItEquipmentCommonService',
'$scope',
'$location',
'$http',
function(ItEquipmentCommonService,$scope,$location,$http,$timeout) {
$scope.titleText="设置项目-IT设备清单";//title show
$scope.proNo="001";//项目编号
//rack
$scope.backSearch = function(path){
$location.path(path);
};
//显示动态表格
$scope.showData = function(flag) {
$scope.visible = flag;
};

// // 国际化；
// i18nService.setCurrentLang("zh-cn");
$scope.gridOptions = {
// data: 'myData',
// columnDefs: [{ field: 'name', displayName: '名字',
// width: '10%',
// enableColumnMenu: false,// 是否显示列头部菜单按钮
// enableHiding: false,
// suppressRemoveSort: true,
// enableCellEdit: false // 是否可编辑
// },
// { field: "age"},
// { field: "birthday"},
// { field: "salary"}
// ],

//----------- 选中----------------------
enableRowSelection : true, // 行选择是否可用，默认为true;
enableFullRowSelection : true, //不起作用...
enableSelectAll: false,
rowHeight: 30,
modifierKeysToMultiSelect: false ,//默认false,为true时只能按ctrl或shift键进行多选, multiSelect 必须为true;
multiSelect: false ,// 是否可以选择多个,默认为true;
noUnselect: false,//默认false,选中后是否可以取消选中

//---------------api---------------------
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;

//行选中事件
$scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
if(row){
$scope.testRow = row.entity;
}
});
}
};

var getPage = function(curPage, pageSize) {
var firstRow = (curPage - 1) * pageSize;
$scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);
};
//后台查询所有数据显示
var mydefalutData = [
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];

getPage(1, 5);

/**
* 调用service
*/
$scope.proText="---选项目编号--";
ItEquipmentCommonService.queryProNoes($scope);//查询项目编号
ItEquipmentCommonService.queryProInfo($scope,$scope.proNo);//根据项目编号，查询项目相关信息

/**设置第一个被选中，为默认值：以下设置方法不可取，会引起列表上出现默认数据被重复*/
//方法一：利用循环
// for(var i=0;i<=$scope.proNoes.length;i++ ){
// if($scope.proNoes.proNo=='01'){
// proText=$scope.proNoes[i].proNo+"-"+$scope.proNoes[i].proName;
// break;
// }
// }
// alert( $scope.proText)
//方法二：
//$scope.modelPro=$scope.proNoes[1].proNo+"-"+$scope.proNoes[1].proName;
}
]);