easyui中前台利用js导出显示的datagrid

注意：本方法是通过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 
      *
      */
$.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申明有问题，以修正，注意是utf-8编码，如果是gb2312，需要修改动态页文件的写入编码
    '' +
    '' + param.title + '' +
    '' +
    '' + worksheet.height + '' +
    '' + worksheet.width + '' +
    'False' +
    'False' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    worksheet.xml +
    '';
    },
    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 += '';
                    headerXml += '' +
                '' + $(jq).datagrid('getColumnOption', cfs[i]).title + '' +
                '';
                    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 = '' +
    '' +
    '' +
    '' +
    '' +
    colXml +
    '' +
    headerXml +
    '';
        // 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 += '';
            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 += '';
                        if (cellType[k] == 'DateTime') {
                            t += v.format('Y-m-d');
                        } else {
                            t += v;
                        }
                        t += '';
                    }
                    k++;
                }
            }
            t += '';
        }
        result.xml = t + '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    'Blank' +
    '1' +
    '32767' +
    '' +
    '600' +
    '' +
    '' +
    '' +
    'False' +
    'False' +
    '' +
    '';
        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("点击下载");
                    
                },
                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);//返回文件名提供下载