实现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的示例代码全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
用javascript实现画板的代码
Sep 05 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Vue头像处理方案小结
Jul 26 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
yii的CURD操作实例详解
2014/12/04 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
详解python算法之冒泡排序
2019/03/05 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python如何定义接口和抽象类
2020/07/28 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
大课间体育活动方案
2014/03/12 职场文书
户外活动总结范文
2014/04/30 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
班委竞选稿范文
2015/11/21 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server