本文共 6045 字,大约阅读时间需要 20 分钟。
最近一段时间在使用 然后就找到ui-grid 这个比较不错的表格插件,感觉还不错,所以分享给大家(ps:新手第一次发)
html:
- <pre name="code" class="html">
- <link rel="stylesheet" type="text/css" href="../lib/angular-ui/ui-grid/ui-grid.min.css">
- <div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize ui-grid-exporter ui-grid-edit ui-gird-pagination ui-grid-cellnav>
- </div>
-
- <script src="../lib/angular-ui/ui-grid/ui-grid.min.js"></script>
-
- <script src="../lib/angular-ui/ui-grid/csv.js"></script>
-
- <script src="../lib/angular-ui/ui-grid/pdfmake.min.js"></script>
- <script src="../lib/angular-ui/ui-grid/vfs_fonts.js"></script>
-
-
-
-
-
-
-
-
-
- angular.module('app', ['ui.grid','ui.grid.selection','ui.grid.resizeColumns','ui.grid.autoResize','ui.grid.edit','ui.grid.exporter','ui.grid.pagination','ui.grid.cellNav'])
- .controller('RootCtrl', function($scope,i18nService) {
-
- i18nService.setCurrentLang('zh-cn');
- $scope.gridOptions = {
- data : 'myData',
-
- enableSorting : true,
- useExternalSorting : false,
- enableRowHeaderSelection : false,
- enableGridMenu : false,
- showGridFooter: true,
- enableHorizontalScrollbar : 1,
- enableVerticalScrollbar : 1,
- selectionRowHeaderWidth : 30,
- enableCellEditOnFocus:false,
-
- enablePagination: true,
- enablePaginationControls: true,
- paginationPageSizes: [10, 15, 20],
- paginationCurrentPage:1,
- paginationPageSize: 10,
- paginationTemplate:"<div></div>",
- totalItems : 0,
- useExternalPagination: true,
-
- rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",
- enableFooterTotalSelected: true,
- enableFullRowSelection : true,
- enableRowHeaderSelection : true,
- enableRowSelection : true,
- enableSelectAll : true,
- enableSelectionBatchEvent : true,
- modifierKeysToMultiSelect: false ,
- multiSelect: true ,
- noUnselect: false,
- selectionRowHeaderWidth:30 ,
-
- onRegisterApi : function (gridApi) {
- $scope.gridApi = gridApi;
- $scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){
-
- });
-
- $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
-
- });
- },
-
-
- exporterAllDataFn: function(){
- return getAllData();
- },
- exporterCsvColumnSeparator: ',',
- exporterCsvFilename:'testdown.csv',
- exporterFieldCallback : function ( grid, row, col, value ){
-
- return value;
- },
- exporterHeaderFilterUseName : true,
- exporterMenuCsv : true,
- exporterMenuLabel : "Export",
- exporterMenuPdf : true,
- exporterOlderExcelCompatibility : false,
- exporterPdfCustomFormatter : function ( docDefinition ) {
- docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
- return docDefinition;
- },
- exporterPdfFooter :{
- text: '',
- style: ''
- },
- exporterPdfDefaultStyle : {
- fontSize: 11,font:'simblack'
- },
- exporterPdfFilename:'testdown.pdf',
- exporterPdfFooter: function(currentPage, pageCount) {
- return currentPage.toString() + ' of ' + pageCount;
- },
- exporterPdfHeader : function(currentPage, pageCount) {
- return currentPage.toString() + ' of ' + pageCount;
- },
- exporterPdfMaxGridWidth : 720,
- exporterPdfOrientation : 'landscape',
- exporterPdfPageSize : 'A4',
- exporterPdfTableHeaderStyle : {
- bold: true,
- fontSize: 12,
- color: 'black'
- },
- exporterPdfTableLayout : null,
- exporterPdfTableStyle: {
- margin: [0, 5, 0, 15]
- },
- exporterSuppressColumns : ['name'],
- exporterSuppressMenu: false,
-
- columnDefs: [{ field: 'name',
- displayName: '名字',
- width: '100',
- enableColumnMenu: false,
-
-
- enableCellEdit: false,
- cellEditableCondition:function($scope){
- return boolean;
- },
- visible:true,是否显示default为true,
- cellTemplate : '<a href="" ng-click="grid.appScope.viewPages(row.entity);">{ {row.entity.name==1?"重写":""}}</a>',
- cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
-
- return 'red'
- },
-
- editableCellTemplate: 'ui-grid/dropdownEditor',
- editDropdownOptionsArray: [],
- editDropdownIdLabel: 'name',
- editDropdownValueLabel: 'nameText',
-
- cellFilter:"nameFilet"
- }
-
- ],
- };
- var myData=[{name:''}];
- });
- .directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {
- return {
- priority : -190,
- restrict : 'A',
- scope : false,
-
- compile: function($element, attr) {
-
-
- var fn = $parse(attr['ngDblclick'], null, true);
-
- return function ngEventHandler(scope, element) {
-
- element.on('dblclick', function(event) {
-
- var callback = function() {
-
- if ($scope.gridApi.grid.selection.lastSelectedRow)
- {
- fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
- }
- };
-
- $scope.$apply(callback);
-
- }
- )};
-
- }
-
- };
- } ])
ui-grid api:http://ui-grid.info/docs/#/api/
转载地址:http://wzkxi.baihongyu.com/