实现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的console.log()用法小结
May 31 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 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 GeoIP的使用教程
2011/03/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
微信小程序实现星星评价效果
2018/11/02 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python socket 聊天室实例代码详解
2019/11/14 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
初中毕业生的自我评价
2014/03/03 职场文书
揭牌仪式主持词
2014/03/19 职场文书
爱晚亭导游词
2015/02/09 职场文书
离婚答辩状范文
2015/05/22 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python