文档章节

ui-grid 使用讲解

whitelover
 whitelover
发布于 2016/05/06 15:07
字数 1026
阅读 14819
收藏 10

在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: [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);
        });

效果图:

© 著作权归作者所有

whitelover
粉丝 13
博文 26
码字总数 10236
作品 0
私信 提问
加载中

评论(23)

A
AhSahm
这个表格行数过多如何怎么往下划,比如我分页设置没页显示30行,当鼠标在表格区域的时候就不能往下滑动了,必须要移除去或者拖动滚动条才能往下
初晓之博
初晓之博
要实现ui-grid的列可以拉伸,则在用angular.module()创建应用时必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。
whitelover
whitelover 博主

引用来自“平兄是我”的评论

uigrid 的滚动条可以自动显示吗,我感觉好像一直会显示一个滚动条出来,虽然不会出现滚动。为什么不能再需要的时候在显示呢,感觉怪怪的
文中提到了水平滚动条和垂直滚动条的是否禁用设置,如果没有禁用,那么会在需要的时候显示出来的,如果像你所说的,没有必要显示滚动条的时候显示出来了,那么你最好检查一下你的css 。
平兄是我
平兄是我
uigrid 的滚动条可以自动显示吗,我感觉好像一直会显示一个滚动条出来,虽然不会出现滚动。为什么不能再需要的时候在显示呢,感觉怪怪的
请叫我旭哥
请问下大佬每一列右上角的升序,降序,隐藏列,怎么监听呢? 我现在需求是 当点击隐藏后,当前列隐藏,然后我想通过点击一个按钮,再让这个隐藏列,恢复显示。查阅了很多资料,没有介绍关于这一点,而去玩发现这几个按钮的监听事件都是写在ui-grid.js中,这样我没法操作,求解。谢谢。
q184692551
q184692551

引用来自“q184692551”的评论

您好,ui-grid代码本地部署的时候出了点小问题,左侧部分勾选图标显示不出来,显示的是类似于韩文的乱码。请问这是什么原因呢

引用来自“whitelover”的评论

显示乱码是需要指定国际化:
i18nService.setCurrentLang("zh-cn"); //指定为中文,以上文章有写,仔细看。
过了近一年又百度到您的文章,博客密码都忘了,谢谢。百度里中文资料还是就那么一点,您的是最用心和写的细的
narlian
narlian
抱歉, 写错了, 是csv 导出的时候遇到中文乱码, 现在测试出来的是office2007会有乱码问题, office2016是好的, 另外我导出的文件用记事本打开是正常的, 应该是导出文件是 utf-8 编码造成的, 请问有没有解决办法, 非常感谢
narlian
narlian
你好, 我的 csv 导入遇到了中文乱码的情况, 请问有什么办法解决中吗?
碧海听滔
碧海听滔
ui-grid在第一次加载时,行选中事件无法使用,刷新一次页面以后才能用。这是为什么呢?(数据是Ajax请求以后赋给ui-grid的)
whitelover
whitelover 博主

引用来自“xianxue”的评论

哪位知道,columnDefs根据选择的不同,在同一个页面会展现不同的表格内容,怎么做呢?之前用过ng-if但是代码量太大了
html 中 ui-grid="gridOptions01" 多个grid 这个名称不同, js 中$scope.gridOptions01
Angularjs ng-grid 升级到 UI-Grid

Upgrading from 2.x to 3.0 ui-grid 3.0 is a substantial upgrade from ng-grid 2.x, with the majority of the code base having been rewritten. Where possible the configuration is ba......

whitelover
2016/05/03
4.7K
0
Kendo UI常用示例汇总(七)

Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件...

Miss_Hello_World
2016/04/29
35
0
2017-05-17日志

1.放弃使用jqGrid,使用angular-ui-grid 2.angular-ui-grid在某些情况下不能自适应伸缩(https://github.com/angular-ui/ui-grid/issues/3590) 3.与中源具体商议首次下单减免5元的详情...

test2013
2017/05/17
4
0
WPF实例秀——如何获取UI元素的图像

WPF实例秀——如何获取UI元素的图像 这个标题还真难说明白,我还是再解释一下吧。 比如我想在UI上拖拽某个元素,拖拽过程中,我需要让这个UI元素的影相跟着鼠标移动(但UI还停留在原位),当...

水之真谛
2008/12/12
0
0
Semantic UI 1.11.3/1.11.4 发布,Web UI 框架

Semantic UI 1.11.3 发布,更新内容如下: Bug 修复 Build Tools - Fix issues with minified CSS not being on top of minified semantic ui concatenated release bug in clean-css Grid -......

oschina
2015/03/08
1K
22

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部