easyui のデータグリッドの Excel へのエクスポートを実装するサンプル コード

以前、easyuiでデータグリッドの内容を印刷する方法を紹介しましたが、今日はデータグリッドの内容をExcelファイルにエクスポートする方法を紹介します。コード実装は以下の通りです:

export.js

function ChangeToTable(printDatagrid) {
  var tableString = &#39;<table cellspacing="0" class="pb">&#39;;
  var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
  var columns = printDatagrid.datagrid("options").columns;  // 得到columns对象
  var nameList = new Array();
 
  // 载入title
  if (typeof columns != &#39;undefined&#39; && columns != &#39;&#39;) {
    $(columns).each(function (index) {
      tableString += &#39;\n<tr>&#39;;
      if (typeof frozenColumns != &#39;undefined&#39; && typeof frozenColumns[index] != &#39;undefined&#39;) {
        for (var i = 0; i < frozenColumns[index].length; ++i) {
          if (!frozenColumns[index][i].hidden) {
            tableString += &#39;\n<th width="&#39; + frozenColumns[index][i].width + &#39;"&#39;;
            if (typeof frozenColumns[index][i].rowspan != &#39;undefined&#39; && frozenColumns[index][i].rowspan > 1) {
              tableString += &#39; rowspan="&#39; + frozenColumns[index][i].rowspan + &#39;"&#39;;
            }
            if (typeof frozenColumns[index][i].colspan != &#39;undefined&#39; && frozenColumns[index][i].colspan > 1) {
              tableString += &#39; colspan="&#39; + frozenColumns[index][i].colspan + &#39;"&#39;;
            }
            if (typeof frozenColumns[index][i].field != &#39;undefined&#39; && frozenColumns[index][i].field != &#39;&#39;) {
              nameList.push(frozenColumns[index][i]);
            }
            tableString += &#39;>&#39; + frozenColumns[0][i].title + &#39;</th>&#39;;
          }
        }
      }
      for (var i = 0; i < columns[index].length; ++i) {
        if (!columns[index][i].hidden) {
          tableString += &#39;\n<th width="&#39; + columns[index][i].width + &#39;"&#39;;
          if (typeof columns[index][i].rowspan != &#39;undefined&#39; && columns[index][i].rowspan > 1) {
            tableString += &#39; rowspan="&#39; + columns[index][i].rowspan + &#39;"&#39;;
          }
          if (typeof columns[index][i].colspan != &#39;undefined&#39; && columns[index][i].colspan > 1) {
            tableString += &#39; colspan="&#39; + columns[index][i].colspan + &#39;"&#39;;
          }
          if (typeof columns[index][i].field != &#39;undefined&#39; && columns[index][i].field != &#39;&#39;) {
            nameList.push(columns[index][i]);
          }
          tableString += &#39;>&#39; + columns[index][i].title + &#39;</th>&#39;;
        }
      }
      tableString += &#39;\n</tr>&#39;;
    });
  }
  // 载入内容
  var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
  for (var i = 0; i < rows.length; ++i) {
    tableString += &#39;\n<tr>&#39;;
    for (var j = 0; j < nameList.length; ++j) {
      var e = nameList[j].field.lastIndexOf(&#39;_0&#39;);
 
      tableString += &#39;\n<td&#39;;
      if (nameList[j].align != &#39;undefined&#39; && nameList[j].align != &#39;&#39;) {
        tableString += &#39; style="text-align:&#39; + nameList[j].align + &#39;;"&#39;;
      }
      tableString += &#39;>&#39;;
      if (e + 2 == nameList[j].field.length) {
        tableString += rows[i][nameList[j].field.substring(0, e)];
      }
      else
        tableString += rows[i][nameList[j].field];
      tableString += &#39;</td>&#39;;
    }
    tableString += &#39;\n</tr>&#39;;
  }
  tableString += &#39;\n</table>&#39;;
  return tableString;
}
 
function Export(strXlsName, exportGrid) {
  var f = $(&#39;<form action="/export.aspx" method="post" id="fm1"></form>&#39;);
  var i = $(&#39;<input type="hidden" id="txtContent" name="txtContent" />&#39;);
  var l = $(&#39;<input type="hidden" id="txtName" name="txtName" />&#39;);
  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(&#39;导出excel&#39;, $(&#39;#grid&#39;));">导出</a>

上記は、easyui のデータグリッドを Excel にエクスポートするためにエディターが提供するサンプル コード全体です