在做一中考评项目的时候,遇到了这么一个需求,就是把评教后得到的老师的成绩导出为Excel。其实需求很普通,实现起来有些复杂,因为老师考评不但有固定的考核项,还有额外加分项。于是我们就抽出来了一个表,专门存放评教后的成绩,导出的时候就直接读数据库然后导出Excel。后来需求变了,要求额外加分项动态添加,也就是说一个老师有几个额外加分项是管理员导入的,这样成绩表就不能用了,因为额外加分项是不固定的。所以才有了下面这种解决办法,那就是直接从界面读数据,导出到Excel。
实现原理
从界面DataGrid导出Excel的原理是,将DataGrid的数据导入到XML文件中,然后将XML文件传回Controller,在Controller中转化为Excel文件,然后下载下来。
实现效果
页面DataGrid
导出的Excel
代码实现
1、首先添加一个DataGrid的扩展方法,可以将代码放到单独的js文件中
$.extend($.fn.datagrid.methods, {
getExcelXml: function (jq, param) {
var worksheet = this.createWorksheet(jq, param);
//alert($(jq).datagrid('getColumnFields'));
var totalWidth = 0;
var cfs = $(jq).datagrid('getColumnFields');
for (var i = 1; i < cfs.length; i++) {
totalWidth += $(jq).datagrid('getColumnOption', cfs[i]).width;
}
//var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
return '<?xml version="1.0" encoding="utf-8"?>' +//xml申明有问题,以修正,注意是utf-8编码,如果是gb2312,需要修改动态页文件的写入编码
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
'<o:DocumentProperties><o:Title>' + param.title + '</o:Title></o:DocumentProperties>' +
'<ss:ExcelWorkbook>' +
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
'</ss:ExcelWorkbook>' +
'<ss:Styles>' +
'<ss:Style ss:ID="Default">' +
'<ss:Alignment ss:Vertical="Top" />' +
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
'<ss:Borders>&#