如何实现jqGrid数据导出

2019独角兽企业重金招聘Python工程师标准>>>

说说jqGrid数据导出的实现，JQGRID这么复杂的TABLE都做出来了，为啥就不能给我们这些懒人实现一个导出数据的方法呢，百度狗狗了很久都没找到，只能自己写了。下面就吧我写的JS共享出来

function getXlsFromTbl(inTblId, inTblContainerId, title, rownumbers) {  
    try {  
        var allStr = "";  
        var curStr = "";  
        //alert("getXlsFromTbl");  
        if (inTblId != null && inTblId != "" && inTblId != "null") {  
            curStr = getTblData($('#' + inTblId), $('#' + inTblContainerId), rownumbers);  
        }  
        if (curStr != null) {  
            allStr += curStr;  
        }  
        else {  
            alert("你要导出的表不存在！");  
            return;  
        }  
        var fileName = getExcelFileName(title);  
        doFileExport(fileName, allStr);  
    }  
    catch (e) {  
        alert("导出发生异常:" + e.name + "->" + e.description + "!");  
    }  
}  
function getTblData(curTbl, curTblContainer, rownumbers) {  
  
    var outStr = "";  
    if (curTbl != null) {  
        var rowdata = curTbl.getRowData();  
        var Lenr = 1;  
  
        for (i = 0; i < Lenr; i++) {  
            //var Lenc = curTbl.rows(i).cells.length;  
            var th;  
            if (rownumbers == true) {  
                th = curTblContainer.find('TH:not(:first-child)');  
            }  
            else {  
                th = curTblContainer.find('TH');  
            }  
            th.each(function(index, element) {  
                //alert($(element).text());  
                //取得每行的列数  
                var j = index + 1;  
                var content = $(element).text();  
                //alert(j + "|" + content);  
                outStr += content + "\t";  
                //赋值  
  
            });  
            outStr += "\r\n";  
        }  
        var tmp = "";  
        for (i = 0; i < rowdata.length; i++) {  
            var row = eval(rowdata[i]);  
            for (each in row) {  
                outStr += row[each] + "\t";  
            }  
            outStr += "\r\n";  
        }  
  
  
    }  
    else {  
        outStr = null;  
        alert(inTbl + "不存在!");  
    }  
    return outStr;  
}  
function getExcelFileName(title) {  
    var d = new Date();  
    var curYear = d.getYear();  
    var curMonth = "" + (d.getMonth() + 1);  
    var curDate = "" + d.getDate();  
    var curHour = "" + d.getHours();  
    var curMinute = "" + d.getMinutes();  
    var curSecond = "" + d.getSeconds();  
    if (curMonth.length == 1) {  
        curMonth = "0" + curMonth;  
    }  
    if (curDate.length == 1) {  
        curDate = "0" + curDate;  
    }  
    if (curHour.length == 1) {  
        curHour = "0" + curHour;  
    }  
    if (curMinute.length == 1) {  
        curMinute = "0" + curMinute;  
    }  
    if (curSecond.length == 1) {  
        curSecond = "0" + curSecond;  
    }  
    var fileName = title + "_" + curYear + curMonth + curDate + "_"  
            + curHour + curMinute + curSecond + ".csv";  
    //alert(fileName);   
    return fileName;  
}  
function doFileExport(inName, inStr) {  
    var xlsWin = null;  
    if (!!document.all("HideFrm")) {  
        xlsWin = HideFrm;  
    }  
    else {  
        var width = 6;  
        var height = 4;  
        var openPara = "left=" + (window.screen.width / 2 - width / 2)  
                + ",top=" + (window.screen.height / 2 - height / 2)  
                + ",scrollbars=no,width=" + width + ",height=" + height;  
        xlsWin = window.open("", "_blank", openPara);  
    }  
    xlsWin.document.write(inStr);  
    xlsWin.document.close();  
    xlsWin.document.execCommand('Saveas', true, inName);  
    xlsWin.close();  
}

用法是这样的，HTML的BODY中必须有这些元素

<iframe id="HideFrm" style="display: none"></iframe>  
  
<div id="div_list">  
        <table id="list4">  
        </table>  
</div>  
<button id="export" value="导出">导出</button>

 

那个iframe可要可不要，不要的话导出的时候会弹出一个网页窗口，要的话比较有好一点，反正是display: none的。table是你要转换为jqGrid的,必须要有一个DIV包裹住这个TABLE，因为导出中要取TABLE的列名要用到。然后对button写一个click事件调用getXlsFromTbl这个方法执行导出就好了  

 

1. $('#export').click(function() {  
                   var title = "供应信息";  
                   getXlsFromTbl('list4', 'div_list', title, true)  
               });

 getXlsFromTbl有四个参数：第一个参数是要转换成JQGRID的table的ID，第二个参数是包裹这个table的DIV的ID，第三个是用来拼接导出文件名的,第四个参数是指示是否JQGRID显示了rownumbers，就是最前面那一串序号123456什么的。如果你的JQGRID参数设置了rownumber:true,那这边参数就填true,反之同理,否则导出的的文件列会对歪一列.

JQGRID怎么加载数据网上就一大堆了，JQGRID API也写的很详细，这里就不会说了，大家自己去BAIDU了。

转载于:https://my.oschina.net/kingchen8080/blog/510325