0

0

AngularJS表格如何导出添加信息?几分钟告诉你关于angularjs表格导出消息的过程

寻∝梦

寻∝梦

发布时间:2018-09-07 14:47:12

|

1387人浏览过

|

来源于php中文网

原创

本篇文章主要的额讲述了关于angularjs表格导出添加额外信息的问题,本文章里面包括了angularjs表格导出信息的全过程,希望对大家有用,现在我们一起来看这篇文章吧

原指令

原导出excel指令,angularjs 导出excel指令。

1.png

这是用户的需求,单位申请检定器具,可以申请一次检定多个器具,技术机构的人员拿到的打印表格去联系部门检定,所以表格中应该是有器具的表格信息,同时还有申请单位、联系电话等信息。

刚阅读完官方文档,在不影响原指令的使用情况下,我们可以去再设置一个可选的extraData参数,如果传入该参数,就把这个放到表格的头部,未传入,即兼容原指令使用,按原方法输出表格。(想看更多就到PHP中文网angularjs学习手册中学习)

指令完善

指令加一个参数extraData,绑定模式加?,表示该属性可选

scope: {
    extraData: '=?',            // = 双向绑定,?表示该属性可选
    tableId: '@',               // 表格id
    exportCols: '@',            // 表格导出的列数,为了解决编辑删除按钮的问题,如果全部导出会将编辑删除的代码一并导出
    multipleRowCols: '@',       // 表格中有效数据跨行的列数,添加空,用于显示跨行效果
    noMultipleRowCols: '@',     // 整个表格中不跨行的列数,用户判断该行为正常行还是跨行行
    csvName: '@'                // 导出表格名称
}

数据结构设计

因为需要在一项中传入要额外添加的所有信息,所以这里最好的数据结构应该是Map

Kaiber
Kaiber

Kaiber是一个视频生成引擎,用户可以根据自己的图片或文字描述创建视频

下载
// 如果传入了extraData的话,表示有额外的数据,添加到表格头
if (scope.hasOwnProperty('extraData')) {
    // foreach传入的map
    scope.extraData.forEach(function(value, key) {
        // 对于null/undefined的数据采用空字符替换
        let tempValue = value ? value : '';
        // 拼接到数据中
        csvString = csvString + key + "," + tempValue + "\n";
    });
}

Map进行遍历,拼接键值对,每循环一次加一个换行。

构建Map

// 生成额外的数据信息,用于Excel导出使用
self.generateMapForExcelExtraData = function() {
    var map = new Map();
    map.set('申请日期', $filter('date')($scope.work.apply.applyTime));
    map.set('申请单位', $scope.work.apply.department.name);
    map.set('申请人', $scope.work.apply.createUser.name);
    map.set('联系电话', $scope.work.apply.createUser.mobile);
    map.set('检定场所', $scope.work.apply.checkPlace);
    map.set('申请备注', $scope.work.apply.remarks);
    map.set('申请ID', $scope.work.apply.id);
    map.set('受理部门', $scope.work.apply.auditingDepartment.name);
    map.set('受理人', $scope.work.apply.auditingUser.name);
    map.set('受理人电话', $scope.work.apply.auditingUser.mobile);
    map.set('计划检定日期', $scope.work.apply.plannedCheckDate);
    map.set('受理备注', $scope.work.apply.replyRemarks);
    $scope.extraData = map;
};

实现效果:

2.png

本篇文章到这就结束了(想看更多就到PHP中文网angularjs学习手册中学习),有问题的可以在下方留言提问

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

88

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

90

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

61

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

493

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

16

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

12

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

5

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
angular.js中文教学视频教程
angular.js中文教学视频教程

共40课时 | 14.2万人学习

Excel 教程
Excel 教程

共162课时 | 10.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号