站长之站 站长之站QQ群:16356000 100345456 16263640 130690866
还没有任何记录...
当前位置:站长之站 > 编程开发 > 正文 > angularjs之ui-grid 使用详解

angularjs之ui-grid 使用详解

来源:网络作者:网络日期:2018/2/11 20:47:00收藏
本文链接:angularjs之ui-grid 使用详解http://www.cncncc.com/ArtLang/Show.Asp?id=1977
html部分
<!--ui-grid css-->  
<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>  
<!--ui-grid js-->  
<script src="../lib/angular-ui/ui-grid/ui-grid.min.js"></script>  
<!--ui-grid excel export-->  
<script src="../lib/angular-ui/ui-grid/csv.js"></script>  
<!--ui-grid pdf export-->  
<script src="../lib/angular-ui/ui-grid/pdfmake.min.js"></script>  
<script src="../lib/angular-ui/ui-grid/vfs_fonts.js"></script>  
<!--ui-grid-selection 选择行指令-->  
<!--ui-grid-resize-columns 表格宽可拉伸指令-->  
<!--ui-grid-auto-resize 自动使用div的高度和宽度指令-->  
<!--ui-grid-exporter 导出指令-->  
<!--ui-grid-edit 编辑指令-->  
<!--ui-gird-pagination 分页指令-->  
<!--ui-gird-pagination 分页指令-->  
<!--ui-grid-cellnav 单元格指令-->  
<!--gridStyle 自定义设置样式-->
JS部分
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,//时候显示表格的footer  
                enableHorizontalScrollbar : 1,//表格的水平滚动条  
                enableVerticalScrollbar : 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)  
                selectionRowHeaderWidth : 30,  
                enableCellEditOnFocus:false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')  
                //分页属性  
                enablePagination: true, //是否分页,default为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, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true  
                enableFullRowSelection : true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中  
                enableRowHeaderSelection : true, //是否显示选中checkbox框 ,default为true  
                enableRowSelection : true, // 行选择是否可用,default为true;  
                enableSelectAll : true, // 选择所有checkbox是否可用,default为true;   
                enableSelectionBatchEvent : true, //default为true  
                modifierKeysToMultiSelect: false ,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;  
                multiSelect: true ,// 是否可以选择多个,默认为true;  
                noUnselect: false,//default为false,选中后是否可以取消选中  
                selectionRowHeaderWidth:30 ,//default为30,设置选择列的宽度  
                //api   
                onRegisterApi : function (gridApi) {  
                    $scope.gridApi = gridApi;  
                    $scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){  
                        //编辑离开事件  
                    });  
                      
                    $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){  
                       //行选中事件  
                     });  
                },  
                 
                //导出(只支持csv,扩展性不太好)  
                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,//是否兼容低版本excel  
                exporterPdfCustomFormatter : function ( docDefinition ) {  
                 docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };  
                 return docDefinition;  
                },  
                exporterPdfFooter :{   
                                     text: '',   
                                     style: ''   
                                   },  
                exporterPdfDefaultStyle : {  
                  fontSize: 11,font:'simblack' //font 设置自定义字体  
                },  
                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',//  'landscape' 或 'portrait' pdf横向或纵向  
                exporterPdfPageSize : 'A4',// 'A4' or 'LETTER'   
                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,// 是否显示列头部菜单按钮  
                                 //enableHiding: false,  
                                 //suppressRemoveSort: true,  
                                 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>',//重写cell  
                                 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {  
                                  //做一些判断。。。  
                                  return 'red'//自定义样式   
                                },  
                                 //cell下拉  
                                 editableCellTemplate: 'ui-grid/dropdownEditor',  
                                 editDropdownOptionsArray: [],//[{name:1,nameText:'Yoko'}]  
                                 editDropdownIdLabel: 'name',//id  
                                 editDropdownValueLabel: 'nameText',//显示的名字  
                                   
                                 cellFilter:"nameFilet"//过滤器  
                             }  
                               
                            ],  
            };  
          var myData=[{name:''}];  
        });
自定义指令:
.directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {  
          return {  
            priority : -190, // run after default uiGridCell directive  
            restrict : 'A',  
            scope : false,  
  
            compile: function($element, attr) {  
  
                // Get the function at ng-dblclick for ui-grid  
                var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ 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);  
  
                    }  
                )};  
  
            }  
  
            };  
        } ])



作者:站长之站 收集整理,任何媒体转发须保留作者个人微信和来源,不尊重作者劳动的行为将受到举报。
本文链接:angularjs之ui-grid 使用详解http://www.cncncc.com/ArtLang/Show.Asp?id=1977

【angularjs之ui-grid 使用详解】由站长之站收集整理,您可以自由传播,请主动带上本文链接

觉得有用就多来支持一下,没有能帮到您,站长之站也只能表示遗憾,希望有一天能帮到您。

(责任编辑:站长之站)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
站长之站 · CNCMS
站长之站 测试频道
业界动态
业界动态 门户网站 聚焦人物 电子商务 站长新闻 观察评论
编程开发
ASP教程 .NET教程 JSP教程 PHP教程 Xml/Xslt Shtml教程 CGI专区 JavaScrip 其他编程
服务器类
Web服务器 Ftp服务器 Mail服务器 Dns服务器 Linux服务器 Win服务器 安全防护 服务器其他
建站指南
主机域名 建站入门 建站经验 网站推广 网站优化 网站策划 网络赚钱 网络创业 SEO 专区
网页设计
Html教程 设计心得 动态网页 JS/Ajax Div/Css CSS教程 设计其它
软件教程
Photoshop Fireworks FLASH Dreamweaver Frontpage 其他教程
数据库类
MSAccess MS_SQL My_SQL VFP PowerBuilder Oracle 其它数据
全站导航
业界动态编程开发服务器类建站指南网页设计软件教程数据库类
关于我们/版权
版权所有:
Copyright © 2008 - 2019 站长之站 www.cncncc.com
PowerBy:CNCMS(5.1.20)

苏ICP备16002106号-1