【AngularJs】ui-grid 使用详解

来源:互联网 发布:淘宝店铺怎么上众划算 编辑:程序博客网 时间:2024/03/29 13:34

在ui-grid 导出pdf 时可能会出现中文字符无法显示问题,解决方法看这篇博客:

http://my.oschina.net/gmd/blog/714911

 

html代码:

<html ng-app="myApp">      <head>        <meta charset="utf-8">        <title>ui-Grid Example01</title>          <link rel="stylesheet" type="text/css" href="../css/ui-grid/ui-grid.css" />        <script type="text/javascript" src="../js/lib/angular/angular.js"></script>        <script type="text/javascript" src="../js/lib/jquery/jquery-1.11.2.js"></script>        <script type="text/javascript" src="../js/lib/ui-grid/ui-grid.js"></script>        <!-- ui-grid export 导出-->    <script src="../js/lib/pdfmake/pdfmake.min.js"></script>    <script src="../js/lib/pdfmake/vfs_fonts.js"></script>    <script src="../js/lib/ui-grid/csv.js"></script>    </head>    <body ng-controller="MyCtrl">        <div  ui-grid="gridOptions" style="width: 100%; height: 500px; text-align: center;" ui-grid-edit ui-grid-pagination         ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize>        </div>                <div style="width:100%; height: 100px">             <ol>                <li>名称:{{testRow.name}}</li>                <li>年龄:{{testRow.age}}</li>                <li>生日:{{testRow.birthday}}</li>             </ol>           </div>    </body></html>

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 高度和宽度问题(非常有用);

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%'                                 enableColumnMenu: false,// 是否显示列头部菜单按钮                                 enableHiding: false,                                 suppressRemoveSort: true,                                 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: [101520], //每页显示个数可选项                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                   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: 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: truefontSize: 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: [05015]                },                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: 50birthday: "Oct 28, 1970"salary: "60,000" },                            { name: "Tiancum"age: 43birthday: "Feb 12, 1985"salary: "70,000" },                            { name: "Jacob"age: 27birthday: "Aug 23, 1983"salary: "50,000" },                            { name: "Nephi"age: 29birthday: "May 31, 2010"salary: "40,000" },                            { name: "Enos"age: 34birthday: "Aug 3, 2008"salary: "30,000" },                            { name: "Moroni"age: 50birthday: "Oct 28, 1970"salary: "60,000" },                            { name: "Tiancum"age: 43birthday: "Feb 12, 1985"salary: "70,000" },                            { name: "Jacob"age: 27birthday: "Aug 23, 1983"salary: "40,000" },                            { name: "Nephi"age: 29birthday: "May 31, 2010"salary: "50,000" },                            { name: "Enos"age: 34birthday: "Aug 3, 2008"salary: "30,000" },                            { name: "Moroni"age: 50birthday: "Oct 28, 1970"salary: "60,000" },                            { name: "Tiancum"age: 43birthday: "Feb 12, 1985"salary: "70,000" },                            { name: "Jacob"age: 27birthday: "Aug 23, 1983"salary: "40,000" },                            { name: "Nephi"age: 29birthday: "May 31, 2010"salary: "50,000" },                            { name: "Enos"age: 34birthday: "Aug 3, 2008"salary: "30,000" }];                        getPage(1, $scope.gridOptions.paginationPageSize);        });
0 0
原创粉丝点击