实现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 iframe的相互操作浅析
Oct 14 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JS简单随机数生成方法
Sep 05 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue中v-model的应用及使用详解
Jun 27 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
青年文明号事迹材料
2014/01/18 职场文书
闭幕式主持词
2014/04/02 职场文书
借款协议书
2014/04/12 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript