首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

实现easyui的datagrid导出为excel的示例代码

Posted in Javascript onNovember 10, 2016

之前有介绍过如何实现easyui里datagrid内容的打印，今天给大家介绍下如何实现datagrid内容导出为excel文件。以下为代码实现：

export.js

function ChangeToTable(printDatagrid) {
  var tableString = '<table cellspacing="0" class="pb">';
  var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
  var columns = printDatagrid.datagrid("options").columns;  // 得到columns对象
  var nameList = new Array();

  // 载入title
  if (typeof columns != 'undefined' && columns != '') {
    $(columns).each(function (index) {
      tableString += '\n<tr>';
      if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
        for (var i = 0; i < frozenColumns[index].length; ++i) {
          if (!frozenColumns[index][i].hidden) {
            tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
            if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
              tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
            }
            if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
              tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
            }
            if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
              nameList.push(frozenColumns[index][i]);
            }
            tableString += '>' + frozenColumns[0][i].title + '</th>';
          }
        }
      }
      for (var i = 0; i < columns[index].length; ++i) {
        if (!columns[index][i].hidden) {
          tableString += '\n<th width="' + columns[index][i].width + '"';
          if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
            tableString += ' rowspan="' + columns[index][i].rowspan + '"';
          }
          if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
            tableString += ' colspan="' + columns[index][i].colspan + '"';
          }
          if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
            nameList.push(columns[index][i]);
          }
          tableString += '>' + columns[index][i].title + '</th>';
        }
      }
      tableString += '\n</tr>';
    });
  }
  // 载入内容
  var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
  for (var i = 0; i < rows.length; ++i) {
    tableString += '\n<tr>';
    for (var j = 0; j < nameList.length; ++j) {
      var e = nameList[j].field.lastIndexOf('_0');

      tableString += '\n<td';
      if (nameList[j].align != 'undefined' && nameList[j].align != '') {
        tableString += ' style="text-align:' + nameList[j].align + ';"';
      }
      tableString += '>';
      if (e + 2 == nameList[j].field.length) {
        tableString += rows[i][nameList[j].field.substring(0, e)];
      }
      else
        tableString += rows[i][nameList[j].field];
      tableString += '</td>';
    }
    tableString += '\n</tr>';
  }
  tableString += '\n</table>';
  return tableString;
}

function Export(strXlsName, exportGrid) {
  var f = $('<form action="/export.aspx" method="post" id="fm1"></form>');
  var i = $('<input type="hidden" id="txtContent" name="txtContent" />');
  var l = $('<input type="hidden" id="txtName" name="txtName" />');
  i.val(ChangeToTable(exportGrid));
  i.appendTo(f);
  l.val(strXlsName);
  l.appendTo(f);
  f.appendTo(document.body).submit();
  document.body.removeChild(f);
}

export.aspx

protected void Page_Load(object sender, EventArgs e)
    {
      Response.Clear();
      Response.Buffer = true;
      Response.Charset = "utf-8";
      Response.ContentEncoding = System.Text.Encoding.UTF8;
      Response.AppendHeader("content-disposition", "attachment;filename=\"" + HttpUtility.HtmlEncode(Request["txtName"]??DateTime.Now.ToString("yyyyMMdd")) + ".xls\"");
      Response.ContentType = "Application/ms-excel";
      Response.Write("<html>\n<head>\n");
      Response.Write("<style type=\"text/css\">\n.pb{font-size:13px;border-collapse:collapse;} "+
              "\n.pb th{font-weight:bold;text-align:center;border:0.5pt solid windowtext;padding:2px;} " +
              "\n.pb td{border:0.5pt solid windowtext;padding:2px;}\n</style>\n</head>\n");
      Response.Write("<body>\n" + Request["txtContent"] + "\n</body>\n</html>");
      Response.Flush();
      Response.End(); 
    }

其中export.aspx为了防止前台页面内容干扰，前台页面只留：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="export.aspx.cs" Inherits="newland.WebUI.export" ValidateRequest="false" %>

这句话，其他的全部删除。

调用方法：

<a href="javascript:void(0);" onclick="Export('导出excel', $('#grid'));">导出</a>

以上就是小编为大家带来的实现easyui的datagrid导出为excel的示例代码全部内容了，希望大家多多支持三水点靠木~

实现easyui的datagrid导出为excel的示例代码

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
网上抓的一个特效
May 11 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 #Javascript
VueJS全面解析
Nov 10 #Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 #Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 #Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 #Javascript
通过bootstrap全面学习less
Nov 09 #Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
Nov 09 #Javascript
复合索引(1) 逻辑函数(1) BufferPool(1) zabbix(9) http_stub_status_module(1) 数据合并(1) location(2) 缓存机制(1) 连接查询(1) keeplive_timeout(1)
You might like
php开发环境配置记录
2011/01/14 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
基于jQuery的烟花效果（运动相关）点击屏幕出烟花
2012/06/14 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
利用原生js实现html5小游戏之打砖块（附源码）
2018/01/03 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
js实现贪吃蛇小游戏（加墙）
2020/07/31 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
django富文本编辑器的实现示例
2019/04/10 Python
python多线程并发及测试框架案例
2019/10/15 Python
Django重设Admin密码过程解析
2020/02/10 Python
python画图常规设置方式
2020/03/05 Python
QML用PathView实现轮播图
2020/06/03 Python
python爬虫请求头的使用
2020/12/01 Python
运动会解说词200字
2014/02/06 职场文书
表决心的诗句大全
2014/03/11 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
保证书格式
2015/01/16 职场文书
第一书记观后感
2015/06/08 职场文书
工作收入证明模板
2015/06/12 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
如何书写你的职业生涯规划书？
2019/06/27 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL