이제 시작이야

이번에는 jqgrid Excel 다운로드를 적어 볼까 합니다.  이 엑셀 다운로드의 단점은 현재 jqgrid에 보여지는 목록만 다운이 가능합니다.

전체 다운로드를 위해서는 현재 페이지의 rownum 숫자를 변경해야 합니다.

현재 데이터를 Controller 로 보내서 처리 하면 됩니다. 저 같은 경우는 POI를 써서 처리 했습니다.

                                (JqgirdId, FileName, 생략가능 )

function ExportJQGridDataToExcel(tableCtrl, fileNm, exNm) {

var excelFilename = fileNm;

excelFilename = excelFilename+exNm+".xlsx";

    //  Export the data from our jqGrid into a (real !) Excel .xlsx file.

    //

    //  We'll build up a (very large?) tab-separated string containing the data to be exported, then POST them 

    //  off to a .ashx handler, which creates the Excel file.

    var allJQGridData = $(tableCtrl).getRowData();

    var jqgridRowIDs = $(tableCtrl).getDataIDs();                // Fetch the RowIDs for this grid

    var headerData = $(tableCtrl).getRowData(jqgridRowIDs[0]);   // Fetch the list of "name" values in our colModel

    //  For each visible column in our jqGrid, fetch it's Name, and it's Header-Text value

    var columnNames = new Array();       //  The "name" values from our jqGrid colModel

    var columnHeaders = new Array();     //  The Header-Text, from the jqGrid "colNames" section

    var inx = 0;

    var allColumnNames = $(tableCtrl).jqGrid('getGridParam', 'colNames');

    //  If our jqGrid has "MultiSelect" set to true, remove the first (checkbox) column, otherwise we'll

    //  create an exception of: "A potentially dangerous Request.Form value was detected from the client."

    for (var headerValue in headerData) {

        //  If this column ISN'T hidden, and DOES have a column-name, then we'll export its data to Excel.

        var isColumnHidden = $(tableCtrl).jqGrid("getColProp", headerValue).hidden;

        if (!isColumnHidden && headerValue != null) {

            columnNames.push(headerValue);

            columnHeaders.push(allColumnNames[inx]);

        }

        inx++;

    }

    //  We now need to build up a (potentially very long) tab-separated string containing all of the data (and a header row)

    //  which we'll want to export to Excel.

    //  First, let's append the header row...

    var excelData = '';

    for (var k = 0; k < columnNames.length; k++) {

        excelData += columnHeaders[k] + "\t";

    }

    excelData = removeLastChar(excelData) + "\r\n";

    //  ..then each row of data to be exported.

    var cellValue = '';

    for (i = 0; i < allJQGridData.length; i++) {

        var data = allJQGridData[i];

        for (var j = 0; j < columnNames.length; j++) {

            // Fetch one jqGrid cell's data, but make sure it's a string

            cellValue = '' + data[columnNames[j]];

            if (cellValue == null)

                excelData += "\t";

            else {

                if (cellValue.indexOf("a href") > -1) {

                    //  Some of my cells have a jqGrid cell with a formatter in them, making them hyperlinks.

                    //  We don't want to export the "<a href..> </a>" tags to our Excel file, just the cell's text.

                    cellValue = $(cellValue).text();

                }

                //  Make sure we are able to POST data containing apostrophes in it

                cellValue = cellValue.replace(/'/g, "&apos;");

                excelData += cellValue + "\t";

            }

        }

        excelData = removeLastChar(excelData) + "\r\n";

    }

    //  Now, we need to POST our Excel Data to our .ashx file *and* redirect to the .ashx file.

    postAndRedirect("/csdm/ExcelDownload.do?filename=" + excelFilename, { excelData: excelData });

}

function removeLastChar(str) {

    //  Remove the last character from a string

    return str.substring(0, str.length - 1);

}

function postAndRedirect(url, postData) {

    //  Redirect to a URL, and POST some data to it.

    //  Taken from:

    //  http://stackoverflow.com/questions/8389646/send-post-data-on-redirect-with-javascript-jquery

    //

    var postFormStr = "<form method='POST' action='" + url + "'>\n";

    for (var key in postData) {

        if (postData.hasOwnProperty(key)) {

            postFormStr += "<input type='hidden' name='" + key + "' value='" + postData[key] + "'></input>";

        }

    }

    postFormStr += "</form>";

    var formElement = $(postFormStr);

    $('body').append(formElement);

    $(formElement).submit();

}

Jqgrid를 사용할 때 화면이 변경되면 그리드의 영역도 갱신을 해야 됩니다.

그래서 보통 $(window).bind(‘resize’, function() {~~~~}).trigger(‘resize’); 방식을 많이 쓰게 됩니다.

여기서 문제점은 명확한 갱신 시점이 없기 때문에 약간의 텀을 둬서 그리드 갱신을 할 필요가 있습니다.

var resizeTimer;

var resizeGrid = function() {

 if (grid = $('.ui-jqgrid-btable:visible')) {

   grid.each(function(index) {

     gridId = $(this).attr('id');

     gridParentWidth = $('#gbox_' + gridId).parent().width();

     $('#' + gridId).setGridWidth(gridParentWidth, true);

   });

 }

};

 $(window).bind('resize', function() {

clearTimeout(resizeTimer);

resizeTimer = setTimeout(resizeGrid, 100);

}).trigger('resize');