히파루스의 솔직한 여행 이야기

MSSQL에서 이런 테이블을 aaa,bbb,ccc,ddd,eee,fff,ggg 처럼 하나의 필드로 나타내려 할 경우

SELECT 

STUFF((SELECT '^' + FieldName FROM TableName FOR XML PATH('')),1,1,'') 

STUFF와  FOR XML PATH 로간단히 나타낼 수 있다.

이후 Classic ASP 등에선 split 함수를 사용한다면 손쉽게 쿼리 후 배열 저장도 가능하겠다.

arrData = Split(FieldName, "^")

response.write ubound(arrData)

response.write arrData(1)

jQuery가 쉽긴 하지만 정확히 인지하고 사용하지 않으면 조금만 응용하려해도 막히는것도 사실이다.

일전에 잠시 다뤘던 배열 컨트롤에 대한 제어를 다시 떠올려보자

대부분 동일한 클래스명을 통해 접근 후 제어를 하게 된다.

이렇게 해당 컨트롤이 위치한 tr에 속한 컨트롤을 접근하듯이

            var row = $(this).closest('tr');

            var objTarget = row.find('.S_IDX');        

selectbox의 option을 한번에 날리는 empty() 함수야 

objTarget.empty(); <-- 이렇게 처리하면 잘 동작하지만

선택된 녀석의 text를 찾는등 추가 인자가 들어가는 상황의 함수라면 이야기가 달라진다.

이런식으로 접근해서 text를 얻어오는게 일반적이지만 

$(#selectBox option:selected").text();

배열 컨트롤이므로 위에서 언급한대로 object를 구한 상태에서 접근해야 하므로 objTarget를 통해 아래처럼 접근을 시도해보면 동작하지 않음을 확인할 수 있다. 

$(objTarget option:selected").text(); ???

(objTarget option:selected").text(); ???

objTarget.(option:selected").text(); ???

결론은 이렇게 하면 된다.

$('option:selected', objTarget).text();

개발을 하다보면 배열로 컨트롤들을 나열하고 이 컨트롤들을 제어할 필요가 생긴다.

jQuery를 통해 동일한 클래스명으로 처리하면 쉬운데

막상 하려면 조금 난해해진다.

다음과 같이 컨트롤들이 테이블에 나열했다 쳐보자

하고자 하는 작업은 셀렉트박스를 선택하면 선택된 값을 해당 라인에 위치한 텍스트박스에 넣어주는 작업이다.

이 경우 closest을 사용하면 되겠다.

closest을 사용해 해당 row를 갖고온 후 그 row속에서 접근하고자 하는 컨트롤의 클래스명으로 접근 후

선택된 값을 넣어주면 끝난다.

        $(".SELECT_BOX").change(function(e) {

            e.preventDefault();

            var row = $(this).closest('tr'); // 일단 현재 선택한 셀렉트박스가 속한 tr을 찾은 후

            var findControl = row.find('.TEXT_BOX'); // tr에 속한 클래스만 찾아내면 손쉽게 텍스트박스를 발견 할 수 있으며

            findControl.val($(this).val()); // 발견한 텍스트박스에 현재 선택한 셀렉트박스의 값을 넣어주면 끝

        });  

개쉽다.

어쩌다 웹페이지를 이미지로 저장해달라는 요구가 있다.

그때 유용한 오픈소스들을 활용하면 어렵지 않게 구현이 가능하지만

망할  M$ 익스플로러 때문에 삽질을 해댔다.

참고로 IE10 이상부터 지원한다.

아래 소스는 맥 크롬에서도 테스트 해봤다.

js 첨부파일은 각각 여기서 다운로드도 가능함

https://html2canvas.hertzen.com/

https://github.com/hongru/canvas2image

일단 include시키고

<script src="/js/html2canvas.js"></script>

<script src="/js/canvas2image.js"></script>

버튼 누르면 이미지 저장

$("#SAVE").click(function(e) {

    e.preventDefault();

   var canvas ="";

   html2canvas($("#container"), {

       onrendered: function(canvas) {

            //document.getElementById("RESULT").src = canvas.toDataURL();   // 이미지를 보여주고 싶으면 이런식으로 치환해버림 됨

            if (canvas.msToBlob) { // 망할 익스플로러 예외처리.. 망해라 M$

                var blob = canvas.msToBlob();

                window.navigator.msSaveBlob(blob, "FILENAME.png");

            } else {

                Canvas2Image.saveAsPNG(canvas, document.body.clientWidth, document.body.clientHeight, "FILENAME");

            }

       }

   });

});

*활용팁

이미지 덤프기능인 이 소스를 적용하였는데 스크롤이 너무 길어서 다 나타나지 않는다면?

사이즈를 키워주고 덤프 뜨면 되겠지.. 이정도는 기본이니 사족급 팁

window.resizeTo(document.body.scrollWidth, document.body.scrollHeight);

* 추가팁

빌어먹을 익스플로러에선 테이블선이 제대로 나타나지 않는다.

이럴땐 오픈소스를 수정해야 한다.

html2canvas.js를 열어 

이 파랑 부분을 width: container.cssInt('border' + side + 'Width'), 

이렇게 width: container.cssFloat('border' + side + 'Width'),

고쳐주면 제대로 보여진다.