이제 시작이야

1. JSP 파일 화면 상단 처리

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

2. 톰켓 server.xml 파일 설정

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8" >

포트 설정하는 부분에 URIEncoding="UTF-8"  이부분을 추가한다.

이클립스 ini 환경설정 파일에 아래 내용을 추가

-vm

C:/Develop/Java/jdk1.8.0_11/bin/javaw.exe

openlayer3 현재 화면의 Extent 가져오기

var geometry = ol.proj.transformExtent(map.getView().calculateExtent(map.getSize()), 'EPSG:3857' , 'EPSG:4326');

openlayer3

point를 이용한 center 이동 & 좌표체계 변환

map.getView().setCenter(ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'));

extent 이용한 center 이동 & 좌표체계 변환

map.getView().fit(ol.proj.transformExtent(getGeometry1.getExtent(), 'EPSG:4326', 'EPSG:3857'), map.getSize());

zoom level 변경

map.getView().setZoom(12);

아래의 해당 코드는 google map을 openlayer3 맵으로 불러오기 하는 코드입니다.

var googleLayerTile = new ol.layer.Tile({

name: 'Google',

    source: new ol.source.OSM({

        url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',

        attributions: [

            new ol.Attribution({ html: '© Google' }),

            new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })

        ]

    })

});

아래의 해당 코드는 google의  google streetview를 사용 할 시에 항공 사진이 있는 위치를 지도상에 Point로 보여주는 코드 입ㄴ다.

var googleStreetTile = new ol.layer.Tile({

visible: false,    

name: 'Google_streetview',

zIndex: 3,   

source: new ol.source.OSM({

url: 'http://mt{0-3}.googleapis.com/vt?lyrs=svv|cb_client:apiv3&style=40,18&x={x}&y={y}&z={z}',

attributions: [

              new ol.Attribution({ html: '© Google' }),

              new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })

              ]

})

});

이번에는 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');