发布于 2017-01-25 11:28:25 | 178 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

jqGrid jQuery网格插件

jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。

---

jqgrid并没有自带导出表格数据的方法，这里就自己实现了一个，尝试过在页面直接将数据导出，发现只有IE下可以通过调用saveas来实现，但是别的浏览器不支持，于是考虑将数据传回后台，然后后台返回下载文件来实现

首先，是一段javascript脚本：

/** 
 *  
 *  
 * @param table_id 表格的id 
 * @param container_id 容器的id 
 * @param form_id 提交表单的id 
 * @param title 文件名 
 * @param rownumbers 
 */  
function getXlsFromTbl(table_id, container_id ,form_id, title, rownumbers) {  
    try {  
        var content = "";  

  
        if (table_id != null && table_id != "" && table_id != "null") {  
        <SPAN style="WHITE-SPACE: pre"> </SPAN>content = getTblData($('#' + table_id), $('#' + container_id), rownumbers);  
        }  
        if (content == "") {  
            alert("表格不存在");  
            return;  
        }  
        var fileName = getExcelFileName(title);  

        doFileExport($('#' + form_id), fileName, content);  
    }  
    catch (e) {  
        alert("导出异常:" + e.name + "->" + e.description + "!");  
    }  
}  
function getTblData(tableobj, containerobj, rownumbers) {  

  
    var outStr = "";  
    if (tableobj != null) {  
        var rowdata = tableobj.getRowData();  
        var Lenr = 1;  

  
        for (i = 0; i < Lenr; i++) {  
            //var Lenc = curTbl.rows(i).cells.length;   
            var th;  
            if (rownumbers == false) {  
                th = containerobj.find('TH:not(:first-child)');  
            }  
            else {  
                th = containerobj.find('TH');  
            }  
            th.each(function(index, element) {  
                var j = index + 1;  
                var content = $(element).text();  
                content = content.replace(/(^\s*)|(\s*$)/g, "");//去掉空格   
                outStr += content + ",";  
            });  
            outStr += "+nl+";  
        }  
        var tmp = "";  
        for (i = 0; i < rowdata.length; i++) {  
            var row = eval(rowdata[i]);  
            for (each in row) {  
            <SPAN style="WHITE-SPACE: pre">   </SPAN>var temp = $(row[each]).text();  
            <SPAN style="WHITE-SPACE: pre">   </SPAN>if($(row[each]).text() == null || $(row[each]).text() == ""){  
            <SPAN style="WHITE-SPACE: pre">       </SPAN>if(row[each].charAt(0) != '<')  
            <SPAN style="WHITE-SPACE: pre">           </SPAN>outStr += row[each] + ",";  
            <SPAN style="WHITE-SPACE: pre">       </SPAN>  
            <SPAN style="WHITE-SPACE: pre">   </SPAN>}  
            <SPAN style="WHITE-SPACE: pre">   </SPAN>else  
            <SPAN style="WHITE-SPACE: pre">       </SPAN>outStr += $(row[each]).text() + ",";  
            }  
            outStr += "+nl+";  
        }  
    }  
    else {  
        outStr = null;  
        alert(inTbl + " null!");  
    }  
    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";  

  
    return fileName;  
}  
function doFileExport(formobj, filename, content) {  
<SPAN style="WHITE-SPACE: pre"> </SPAN>formobj.html("<input id='filename' name='filename' type='text' style='display: none'><input id='content' name='content' type='text' style='display: none'>");  
    $("#filename").val(filename);  
    $("#content").val(content);  
    formobj.submit();  
}   

<form id="download_form" method="post"  target="_blank" action="downLoadTableDataAction">  

<div id="table_container">  
<SPAN style="WHITE-SPACE: pre"> </SPAN><table id="keyword_detail"></table>  
<SPAN style="WHITE-SPACE: pre"> </SPAN><div id="footer"></div>  
</div>