实现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检查日期格式的函数[比较全]
Oct 17 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
使用JS实现简易计算器
Jun 14 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读取3389的脚本
2014/05/06 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
javascript hashtable实现代码
2009/10/13 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JS高级笔记
2011/07/13 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
工程专业求职自荐书范文
2014/02/18 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
廉政教育的心得体会
2014/09/01 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python