【AngularJs】ui-grid 使用详解

来源：互联网发布：知柏地黄丸多少钱一盒编辑：程序博客网时间：2024/04/19 19:22
<!DOCTYPE html><html ng-app="myApp">      <head>        <meta charset="utf-8">        <title>ui-Grid Example01</title>          <link rel="stylesheet" href="../bower_components/angular-ui-grid/ui-grid.css" />        <script src="../bower_components/angular/angular.js"></script>        <script src="../bower_components/jquery/dist/jquery.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script>        <script src="../bower_components/angular-ui-grid/ui-grid.js"></script>        <!-- ui-grid export 导出-->      </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>    <script type="text/javascript">        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: [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               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: 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,            //---------------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);    });        </script></html>
0 0