easyui中前台利用js导出显示的datagrid
来源：互联网 发布：库里16赛季数据 编辑：程序博客网 时间：2024/06/10 02:01
注意：本方法是通过js获取页面的datagird的数据xml转换后提交到后台，暂只能导出页面datagrid显示的数据，有数据分页的暂不支持全部导出（可以改进，有时间研究）
第一步：添加datagrid 的扩展属性（可以写在通用js文件中）
/** Jquery easyui datagrid js导出excel 修改自extgrid导出excel * allows for downloading of grid data (store) directly into excel * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document, * converts to Base64, then loads everything into a data URL link. * * @author Animal <extjs support team> * */$.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>' + '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' + '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' + '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' + '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' + '</ss:Borders>' + '<ss:Interior />' + '<ss:NumberFormat />' + '<ss:Protection />' + '</ss:Style>' + '<ss:Style ss:ID="title">' + '<ss:Borders />' + '<ss:Font />' + '<ss:Alignment ss:Vertical="Center" ss:Horizontal="Center" />' + '<ss:NumberFormat ss:Format="@" />' + '</ss:Style>' + '<ss:Style ss:ID="headercell">' + '<ss:Font ss:Bold="1" ss:Size="10" />' + '<ss:Alignment ss:Horizontal="Center" />' + '<ss:Interior ss:Pattern="Solid" />' + '</ss:Style>' + '<ss:Style ss:ID="even">' + '<ss:Interior ss:Pattern="Solid" />' + '</ss:Style>' + '<ss:Style ss:Parent="even" ss:ID="evendate">' + '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' + '</ss:Style>' + '<ss:Style ss:Parent="even" ss:ID="evenint">' + '<ss:NumberFormat ss:Format="0" />' + '</ss:Style>' + '<ss:Style ss:Parent="even" ss:ID="evenfloat">' + '<ss:NumberFormat ss:Format="0.00" />' + '</ss:Style>' + '<ss:Style ss:ID="odd">' + '<ss:Interior ss:Pattern="Solid" />' + '</ss:Style>' + '<ss:Style ss:Parent="odd" ss:ID="odddate">' + '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' + '</ss:Style>' + '<ss:Style ss:Parent="odd" ss:ID="oddint">' + '<ss:NumberFormat ss:Format="0" />' + '</ss:Style>' + '<ss:Style ss:Parent="odd" ss:ID="oddfloat">' + '<ss:NumberFormat ss:Format="0.00" />' + '</ss:Style>' + '</ss:Styles>' + worksheet.xml + '</ss:Workbook>'; }, createWorksheet: function (jq, param) { // Calculate cell data types and extra class names which affect formatting var cellType = []; var cellTypeClass = []; //var cm = this.getColumnModel(); var totalWidthInPixels = 0; var colXml = ''; var headerXml = ''; var visibleColumnCountReduction = 0; var cfs = $(jq).datagrid('getColumnFields'); var colCount = cfs.length; for (var i = 1; i < colCount; i++) { if (cfs[i] != '') { var w = $(jq).datagrid('getColumnOption', cfs[i]).width; totalWidthInPixels += w; if (cfs[i] === "") { cellType.push("None"); cellTypeClass.push(""); ++visibleColumnCountReduction; } else { colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="130" />'; headerXml += '<ss:Cell ss:StyleID="headercell">' + '<ss:Data ss:Type="String">' + $(jq).datagrid('getColumnOption', cfs[i]).title + '</ss:Data>' + '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>'; cellType.push("String"); cellTypeClass.push(""); } } } var visibleColumnCount = cellType.length - visibleColumnCountReduction; var result = { height: 9000, width: Math.floor(totalWidthInPixels * 30) + 50 }; var rows = $(jq).datagrid('getRows'); // Generate worksheet header details. var t = '<ss:Worksheet ss:Name="' + param.title + '">' + '<ss:Names>' + '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + param.title + '\'!R1:R2" />' + '</ss:Names>' + '<ss:Table x:FullRows="1" x:FullColumns="1"' + ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) + '" ss:ExpandedRowCount="' + (rows.length + 2) + '">' + colXml + '<ss:Row ss:AutoFitHeight="1">' + headerXml + '</ss:Row>'; // Generate the data rows from the data in the Store //for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) { for (var i = 0, it = rows, l = it.length; i < l; i++) { t += '<ss:Row>'; var cellClass = (i & 1) ? 'odd' : 'even'; r = it[i]; var k = 0; for (var j = 1; j < colCount; j++) { //if ((cm.getDataIndex(j) != '') if (cfs[j] != '') { //var v = r[cm.getDataIndex(j)]; var v = r[cfs[j]]; if (cellType[k] !== "None") { t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">'; if (cellType[k] == 'DateTime') { t += v.format('Y-m-d'); } else { t += v; } t += '</ss:Data></ss:Cell>'; } k++; } } t += '</ss:Row>'; } result.xml = t + '</ss:Table>' + '<x:WorksheetOptions>' + '<x:PageSetup>' + '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' + '<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />' + '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' + '</x:PageSetup>' + '<x:FitToPage />' + '<x:Print>' + '<x:PrintErrors>Blank</x:PrintErrors>' + '<x:FitWidth>1</x:FitWidth>' + '<x:FitHeight>32767</x:FitHeight>' + '<x:ValidPrinterInfo />' + '<x:VerticalResolution>600</x:VerticalResolution>' + '</x:Print>' + '<x:Selected />' + '<x:DoNotDisplayGridlines />' + '<x:ProtectObjects>False</x:ProtectObjects>' + '<x:ProtectScenarios>False</x:ProtectScenarios>' + '</x:WorksheetOptions>' + '</ss:Worksheet>'; return result; }});第二步：在页面js中生成datagrid的xml数据，并通过ajax提交到后台处理（下面实例的后台是mvc的，回调成功后生成下载链接）
//getExcelXML有一个JSON对象的配置，配置项看了下只有title配置，为excel文档的标题 var data = $('#grid').datagrid('getExcelXml', { title: 'datagrid import to excel' }); //获取datagrid数据对应的excel需要的xml格式的内容 //用ajax发动到动态页动态写入xls文件中 var url = virpath + '/Article/datagrid_to_excel'; //如果为asp注意修改后缀 $.ajax({ url: url, data: { Data：data }, type: 'POST', dataType: 'text', success: function (fn) { $("#Dlg-Export_xiazai").html("<a class='easyui-linkbutton' iconCls='icon-ok' href='" + fn + "' target='_blank' style='border:1px solid black;padding:10px 10px 10px 10px ' >点击下载</a>"); }, error: function (xhr) { $("#Dlg-Export_xiazai").html('动态页有问题\nstatus：' + xhr.status + '\nresponseText：' + xhr.responseText) } });第三步：后台程序，这个非常简单。
//获取前台post提交的数据 string data = Request["Data"]; //定义生成文件的目录，获取绝对地址 string pathToFiles = Server.MapPath("/UploadFiles"); //定义生成文件的名称 string fn = DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".xls"; //组合成文件的路径 string path = @"" + pathToFiles+ "\\"+fn; //判断是否已经存在文件 if (!System.IO.File.Exists(path)) { //新建文件，并写入数据 System.IO.File.WriteAllText(path, data, Encoding.UTF8); } else { //文件已存在，添加写入数据 System.IO.File.AppendAllText(path, data, Encoding.UTF8);//如果是gb2312的xml申明，第三个编码参数修改为Encoding.GetEncoding(936) } return Content("/UploadFiles/" + fn);//返回文件名提供下载 0 0
- easyui中前台利用js导出显示的datagrid
- 【工作记录0013】easyui中datagrid绑定,后台可读出数据,前台未显示的解决方法
- js实现EasyUI-datagrid前台分页
- easyui datagrid 前台分页的实现
- easyui datagrid前台分页
- 在easyui的datagrid中如何显示图片？
- easyui中datagrid如何显示子对象的属性
- Easyui-datagrid中不显示数据的可能原因
- js--easyUI--EasyUI的datagrid自适应高度
- 在js中获取easyui datagrid的数据
- MVC项目中如何用JS导出EasyUI DataGrid为Excel
- EasyUI的DataGrid 的打印导出功能
- 实现easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- easyui的datagrid导出为excel
- 实现easyui的datagrid导出为excel
- Easyui DataGrid中增加行号显示
- Java笔记——集合类：Map的使用
- 游戏项目实践（二）
- POJ 2777 Count Color
- HTML5 AJAX history.pushState
- Arm Linux Kernel 构建 情景分析
- easyui中前台利用js导出显示的datagrid
- gradle学习(11)-编写构建脚本
- 一个简单的ORM制作(SQL帮助类)
- Android:手把手教你打造可缩放移动的ImageView
- selenium c# 自动化测试demo
- iOS时间轴的实现
- C++中宽字符类型（wchar_t）的编码一定是Unicode？
- 2015年1月9日《linux程序设计》笔记
- 2014年终总结
