ui-gird(2)--配置

引入指令

1、html端

    <div ui-grid="gridOptions" style="width: 100%;height: auto; text-align:center;" ui-grid-edit             ui-grid-selection ui-grid-pagination ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize>    </div>

2、js端

var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.edit', 'ui.grid.exporter', 'ui.grid.resizeColumns', 'ui.grid.autoResize']);

指令解释

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

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

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

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

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

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

配置语言国际化

• 引入依赖

  app.controller(‘listController’, function (scope,rootScope, $http, i18nService) {
  // 国际化 转成中文
  i18nService.setCurrentLang(“zh-cn”);
  });

gird 属性配置

1、columnDefs

columnDefs: [{         field: 'name',        displayName: '名字',        width: '10%',        enableColumnMenu: false,// 是否显示列头部菜单按钮        enableHiding: false,        suppressRemoveSort: true,        enableCellEdit: false // 是否可编辑    },        { field: "age"},        { field: "birthday"},        { field: "salary"}    ]

2、常用属性

    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:"<div></div>", //自定义底部分页代码    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    modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;    multiSelect: true ,// 是否可以选择多个,默认为true;    noUnselect: false,//默认false,选中后是否可以取消选中    selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；

3、导出配置

    //--------------导出----------------------------------    exporterAllDataFn: function () {        return getPage(1, $scope.gridOptions.totalItems);    },    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, font: 'simblack' //font 设置自定义字体    },    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' pdf横向或纵向    exporterPdfPageSize: 'A4',// 'A4' or 'LETTER'    exporterPdfTableHeaderStyle: {        bold: true,        fontSize: 12,        color: 'black'    },    exporterPdfTableLayout: null,    exporterPdfTableStyle: {        margin: [0, 5, 0, 15]    },    exporterSuppressColumns: ['buttons'],    exporterSuppressMenu: false,

4、分页设置

//---------------api---------------------    onRegisterApi: function (gridApi) {        $scope.gridApi = gridApi;        //分页按钮事件,刷新表格内的数据        gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {            if (getPage) {                getPage(newPage, pageSize);            }        });        //行选中事件。控制台打印选中的行，并把行内的值赋值给testRow        $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {            if (row) {                $scope.testRow = row.entity;                console.log("row");                console.log(row);            }        });    }