jqGrid資料匯出

        這幾天網站改版，吧以前用伺服器控制項通過後台代碼綁定顯示資料的模式改成了用JQUERY通過AJAX綁定JQGRID來顯示資料，不得不說JQUERY UI確實挺漂亮的，不過UI控制項比較少，比如常用的下拉式清單控制項和LAYOUT布局控制項木有啊。。。而且JQGRID顯示資料還挺快的，因為期間有用到另一款UI外掛程式，JQUERY EASYUI，EASYUI提供的UI控制項就很多了，很喜歡它的LAYOUT控制項和MESSAGE訊息提示控制項，給使用者體驗非常好，但是該死的DATAGRID控制項顯示資料那叫一個慢，經常執行著都會彈出系統提示：當前頁執行的指令碼可能會導致系統變慢，是否停止執行的提示。。。還有TAB控制項切換頁簽那叫一個卡啊。。可能是我在TAB中放了DATAGRID顯示資料的原因，放其他INPUT標籤什麼的感覺不會太卡勉強可以接受，不過可以吧網頁布局的很整齊很簡潔，左邊TREE右邊TAB，我大愛這種布局。但是！！！！！最該死的還不是這些，是竟然EASYUI的THEME竟然會和JQUERY UI的THEME不相容，同時引用它們的CSS時頁面會變亂，比如你用JQUERY UI的accordion做左邊菜單，但是你又引用了EASYUI的樣式，accordion就會顯示的亂七八糟的，於是我淡定了，我心想，漂亮是要付出代價的，於是我拋棄了EASYUI（真的是很捨不得，為什麼效能就不能高一點呢,或者不要和JQUERY UI的THEME衝突那該多好）。

     好吧，言歸正傳，說說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這個方法執行匯出就好了

$('#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了。