Excel组件来完成这个工作。这里我主要讲EasyUI内的DataGrid如何结合JS导出Excel文件
一、
导出Excel的核心代码段如下所示
function
Exproter()
{
//获取Datagride的列
var
rows
=
$('#test').datagrid('getRows')
var
oXL
=
new
ActiveXObject("Excel.Application")
//创建AX对象excel
var
oWB
=
oXL.Workbooks.Add()
//获取workbook对象
var
oSheet
=
oWB.ActiveSheet
//激活当前sheet
for
(var
i
=
0
i
<
rows.length
i++)
{
oSheet.Cells(i
+
1,
1).value
=
rows[i].O_NAME
}
oXL.Visible
=
true
//设置excel可见属性
}
二、以上JS方法能够顺利执行的大前提就是
1.机器上Excel已经安装.
2.Internet
选项=>安全=>Internet
\"对没有标记为安全的ActiveX控件进行初始化和脚本运行，设定为启用\"
//EasyUI
datagrid
动态导出Excel
function
ExporterExcel()
{
//获取Datagride的列
var
rows
=
$('#tt').datagrid('getRows')
var
columns
=
$("#tt").datagrid("options").columns[0]
var
oXL
=
new
ActiveXObject("Excel.Application")
//创建AX对象excel
var
oWB
=
oXL.Workbooks.Add()
//获取workbook对象
var
oSheet
=
oWB.ActiveSheet
//激活当前sheet
//设置工作薄名称
oSheet.name
=
"导出Excel报表"
//设置表头
for
(var
i
=
0
i
<
columns.length
i++)
{
oSheet.Cells(1,
i+1).value
=
columns[i].title
}
//设置内容部分
for
(var
i
=
0
i
<
rows.length
i++)
{
//动态获取每一行每一列的数据值
for
(var
j
=
0
j
<
columns.length
j++)
{
oSheet.Cells(i
+
2,
j+1).value
=
rows[i][columns[j].field]
}
}
oXL.Visible
=
true
//设置excel可见属性
}
以上就是小编为大家带来的EasyUI
结合JS导出Excel文件的实现方法全部内容了，希望大家多多支持脚本之家~
1.创建项目
2.cd到该文件夹
3.运行（开发模式）
如果再起一个服务器，可能会出现端口号不会自动排的现象，针对这种情况，可以在package.json中自行设置端口号，如下图
4.模拟数据服务器
4.1 http://www.mockapi使用GitHub登录，创建一个新项目
4.2点击进入
4.3点击进入
4.4填写信息
4.4.1填写路由名称（数据表名）
4.4.2填写数据表里的内容
4.4.3生成链接
4.4.4在浏览器地址栏中输入地址加路由records
4.5访问数据
第一种方法：通过外网进行访问
①浏览器地址栏测试数据访问
②终端测试数据访问
③浏览器console debug栏测试api接口（get方式）
第二种方法：将json数据存放在本地服务器进行访问
1.链接： https://github.com/typicode/json-server
2.全局安装
3.在fssytem中创建一个json文件格式为{“records”:}，然后将前文通过外 网地址访问到的数据赋值粘贴到：后面
4.运行服务器
5.在地址栏中输入命令中的http地址（服务器运行中）
4.6App.js中
4.7发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 jQuery方式
4.7.1命令安装jquery
4.7.2 App.js中导入jQuery组件
4.7.3使用jQuery发请求
4.7.4使用传统的map遍历(App.js中)
4.7.5records文件中
4.7.4使用ES6扩展运算符
4.7.5Records.js
4.8优化部分
4.8.1需要在record.js优化时间显示
4.8.2优化jQuery引入app.js
4.8.3引入显示状态和错误显示状态
4.8.3.1定义isloaded(是否完成加载)，定义error
4.8.3.2重设状态机，分别设置成功时和失败时的状态
4.8.3.3视情况进行判断，写出对应的显示内容
4.9发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 axios方式（与jQuery两种方法任选其一即可）
网址：https://github.com/axios/axios
4.9.1安装
4.9.2导入
4.9.3使用因为axios会将所获取的数据存在data的集合中，所以需要response.data
4.9.4引入显示状态和错误显示状态
5.0优化URL请求，目的是使用环境变量来将URL请求地址写灵活，方便统一管理。
方法一 ：src中创建一个utils文件夹，创建一个Config.js文件，配置环境变量
App.js中导入
使用
由于windows系统不支持配置环境变量，解决方式如下:
Package.json中配置（红框之间有空格）
重启服务器
页面显示
方法二：
在根目录下创建一个.env.development.local 文件（与src平级）
在package.json中删除之前配置的东西，恢复原状
重启服务器
继续优化
1.删除原来的后缀
2.App.js中简写
3.config.js中
4.App.js
� 5.提取公共变量
功能：增加input框，实现添加，编辑，取消，更新，删除等功能
6.0增加input框
6.1在components文件夹中创建一个名为Input的文件，因为bootstrap按钮和input框相比较大，所以需要另外设置css样式进行引入使用
效果图如下：
6.2实现添加提交功能
1. Input文件中通过设置input的onChange事件来获取输入的值
1.1调用selectedinfo方法
1.2为了保证所有选框都填写完整才可以提交的情况，这里需要设置一下button的属性，当所有都完整的时候，button才可以点击
1.3点击button进行提交
1.3.1使用post方式将数据提交到服务器上（在Config.js文件配置post 方法并开放）
1.3.2在子组件RecordForm中导入上文方法并使用，服务器响应成功后将该值传递给父级App
1.3.3父级App接收到值后进行处理负责显示在界面上
1.3.3.1导入input文件
� 1.3.3.2设置与子级对应的行间属性handleNewRecord
1.3..3.3设置addRecord方法
6.3实现编辑功能
1.先在增加编辑、删除功能键，并在App.js文件中增加一个操作表头。
2.当点击编辑的时候，前面的内容状态变为input可修改的状态框
2.1设置一个中间变量edit,默认状态是false，当点击编辑按钮时，edit为true，对应内容状态为可输入的input框。Edit的状态决定使用哪个模板.
2.1.1设置edit中间变量
2.1.2点击编辑按钮调用handleEdit事件（定义点击编辑前的状态模板）
2.1.3定义handleEdit方法，并重置状态机设置edit状态
2.1.4定义点击编辑按钮后的状态模板
2.1.5根据edit的状态来决定使用哪个模板
6.4实现取消功能（直接在取消调用与编辑按钮一样的方法即可）
6.5实现更新功能
1.先提交数据到服务器,传值给父级
1.1在Config,js文件中配置更新的put方法，为了得到更新的是哪一个数据，还需要传id值
1.2在Record导入该方法，以便在更新事件中使用
1.3给更新按钮增加更新事件
1.4定义该更新事件
修改前
修改后
Record文件中所有之前格式类似为this.props.data的都改为如下格式：
1.5为了找到当前这个input框的值，需要给input增加一个ref行间属性
2.父级app进行处理显示
2.1设置与子
