'프로그래밍/Jquery' 카테고리의 글 목록

◎ tabl2excel 라이브러리 사용

▼ 내용

table to excel converter

java 단이나 jsp 단으로 poi나 jxl 라이브러리를 사용할수있지만....

js 로 바꾸고싶어 찾아보다 사용하기 편한 라이브러리를 발견하여 관련된 사용법을 작성합니다.

아래 소스를 다운받아 엑셀로 실행하엿을경우 위 그림처럼 export가 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../scripts/jquery.table2excel.js"></script>
</head>
<body>
<table id="TableToExcel" border=2 width=710 cellpadding=0 cellspacing=0 class='table table-bordered' align=center style='border-collapse:collapse;' >
    <thead>
        <tr>
            <td>번호</td>
            <td>번호</td>
            <td>번호</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<iframe id="txtArea1" style="display:none"></iframe>
<!-- IE 호환을 위해서 iframe을 추가해야한다 -->
<!-- IE에서는 txtArea1 의 객체를 찾기 때문이다. 크롬은 없어도 된다. 있어도 상관은 없다. -->

<input type='button' class='btn btn-inverse' value='excel 다운' style='width:100px;height:36px;font-weight:bold;' onclick="ReportToExcelConverter()" />
</body>
<script>
	function ReportToExcelConverter() {
		$("#TableToExcel").table2excel({
			exclude: ".noExl",
			name: "Excel Document Name",
			filename: "report" +'.xls', //확장자를 여기서 붙여줘야한다.
			fileext: ".xls",
			exclude_img: true,
			exclude_links: true,
			exclude_inputs: true
		});
	};
</script>
</html>

위 소스처럼 table의 id를 지정하고 제이쿼리함수 $("#아이디") 를 지정한다음 위 소스처럼 작성하면 table 을 자동으로 excel 형식으로 export 해준다. script 를 불러올때 꼭 jquery 를 부른다음 table2excel.js 를 로드해야한다. 또한 iframe을 써줘야 ie에서 작동이된다.

excel exprort.zip

예제 파일이다.

◎ tabl2excel 공식파일과 사이트

▼ 내용

https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html

Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.zip

https://github.com/rainabba/jquery-table2excel

jquery-table2excel-master.zip

위에 링크가 공식문서고 나는 아래에서 다운받아서 작업하엿기 때문에 둘다 링크를 남긴다

저작자표시 비영리 변경금지

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery 란? (0)	2019.02.27
제이쿼리의 기본문법 (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

라이브러리 (jquery.com)

자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 라고 한다.

CDN(Content Delivery Network)

제이쿼리 같은 JS 파일을 직접 로컬에 다운 받지 않고 웹주소 URL 로 통하여 클라이언트가 직접

접속해서 자원을 바로 전달해주는 URL 주소이다.

그냥 URL 주소를 넣으면 주소를 사용할수있다.

주소에 http 나 https 를 안붙인 이유는 접속자가

http 나 https 를 이용해서 들어오면 같은 프로토콜을 이용해서 접속하겠다는

상대적인 경로이다.

jquery가 2점대 이상은 IE 6,7,8 은 사용 불가하다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.

DOM (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 문서들을 객체를 사용하여 시각화 표시 한다고 생각하면된다.

웹페이지도 결국 하나의 문서이기 때문이다.

jQuery 는 javascript의 라이브러리 이다.

라이브러리지만 지금 안쓰는곳이 없다 할정도로

아주 많은 javascript 개발자들이 사용하고있다.

지금 이글을 작성한 지금도 react,view,agular 스펠링이 맞나 모르겠지만...

위 언급한 라이브러리 들이 커지고 있는상황이지만 그래도 아직까지

점유율은 jQuery가 가장 크다.

제이쿼리는 $ 로 시작한다

$ <-- 함수를 $의 변수로 저장한것

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
제이쿼리의 기본문법 (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

$('li').css('color','red');

제이쿼리는 항상 $로 시작합니다

$ = jquery function 입니다. (제이쿼리 함수다)

$('css 선택자') <-- 대부분 어떤 element 의 css 선택자가 올지를 정한다 # id선택자 . class 선택자 그냥은 태그

$('li') <-- 는 제이쿼리 함수이다 (li 태그의 모든요소들을 객체로 객체로 바꾼결과

// $('li') 는 var object2 = (function() { return document.getElementsByTagName('li') });

약간 이런느낌??

chaining

$('li').css('color','red').css('textDecoration' , 'underline');

$('li')의 객체를 .css 프로퍼티로 전달햇는대 결국

$('li').css('color','red') 이것도 객체이기 때문에 .css 프로퍼티를 또 붙혀서 사용할수있다

이것을 chaining 라고한다.

내가 이렇게 선택한 엘리먼트 들을 연속적으로 또 메소드를 호출한다

html객체의 이름찾기

<body>
    <ol>
        <li name= 'name'>안녕하삼</li>
        <li id = 'active'>안녕하삼</li>
        <li class = 'class'>안녕하삼</li>
        <li>안녕하삼</li>
        <span id = 'act'>스판</span>
    </ol>
    <script>
            var li = document.getElementById('active');
            console.log(li.constructor.name);  // HTMLLIElement

            var li2 = document.getElementById('act');
            console.log(li2.constructor.name);  // HTMLSpanElement

            var lis = document.getElementsByTagName('li');
            console.log(lis.constructor.name); // HTMLCollection
    </script>
</body>

저렇게 id로 하나만 선택하는 것들은 HTML(엘리먼트이름)Element 가 나오고

Elements로 복수개를 선택하는 것들은 HTMLCollection 으로 나온다

HtmlCollection 은 유사배열이다.

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다.

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다.

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고도 있는데, 이것은 성격에 따라서 달라진다.

HTMLElement 는 Element의 자식이고 Element는 Node의 자식이다.

Node는 Object의 자식이다.

이런 관계를 DOM Tree 라고 한다.

Dom Tree (이고잉 자바스크립트 출처) DOM Tree

jquery 객체

html collection 은 실시간으로 구조가 변경이된다.

제어대상찾기

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
jQuery 란? (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

제이쿼리는 자바스크립트보다 보다 실용적이고 적은 코딩으로 작성하기 때문에 줄임말을 자주사용한다

setAttribute , getAttribute 에 대응 되는 jquery의 메소드는 attr이다.

$('t1').attr('checked'); // getAttribute 고

$('t1').attr('checked' , false); // setAttribute 이다

또한 removeAttribute 에 대응되는 jquery의 메소드는 remobeAttr 이다.

제이쿼리에 .attr 은 속성제어자 이고 .prop 는 프로퍼티방식 이다

t1.prop('href'); // 은 href 의 값을 가져오는 것이고 get

t1.prop('href','abcd'); // 는 t1.href = 'abcd' 와 같다

또 javascript 에서는 속성제어자와 프로퍼티방식이 미묘한 차이가 있다고 했지만

제이쿼리에서는 이것을 내부적으로 보완 해주기 때문에

$('#t1').prop('className' , 'important');

$('#t2').prop('class' , 'important');

는 내부적으로 보완해줘서 서로 같은결과를 나타낸다.

제이쿼리 하위엘리먼트 선택 (조회범위 제한)

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <ul>
        <li class="marked">html</li>
        <li>css</li>
        <li id="active">JavaScript
            <ul>
                <li>JavaScript Core</li>
                <li class="marked">DOM</li>
                <li class="marked">BOM</li>
            </ul>
        </li>
    </ul>

    <script>
        $(".marked","#active").css("background-color","red");
        $("#active .marked").css("background-color","red");
         //id값이 active 인 값중에 class가 marked 인 걸 red로 지정한다
        $('#active').find('.marked').css("background-color","red");
         //id값이 active 인 값중에 class가 marked 인 걸 찾아서 red로 지정한다
         //위 3개의 구문은 같다고 봐도된다

        $('#active').css('color','blue').find('.marked').css('background-color','red');
         //id값이 active 인 값은 글씨 blue 로 그중에 클래스가 .marked인걸 찾아서 배경을 빨강
    </script>
    
</body>
</html>

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
jQuery 란? (0)	2019.02.27
제이쿼리의 기본문법 (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body id = "body">
    <ol id="ol">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li id='li4'><a href="#">4</a></li>
    </ol>
    <div id = 'ul'>
        <li id = 'target'>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </div>
    <script>
        //var ul = document.getElementById('ul');
        $('#ul').prepend('프리펜드'); // ul 시작후 첫번쨰 노드에 
        $('#ul').append('어펜드'); // ul 시작후 마지막 노드에
        $('#ul').before('비포'); // ul 노드 시작전에
        $('#ul').after('에프터'); //ul 노드 끝난 후에
       //만약 추가할 대상이 제쿼 객체라면 해당 엘리먼트가 지정된 api로 이동이된다
    </script>
</body>
</html>

위 예제의 결과

제이쿼리 NODE의 REMOVE 와 EMPTY

REMOVE --> 선택된 엘리먼트만을 제거

EMPTY --> 선택된 엘리먼트의 텍스트만을 제거

$('#target').remove(); //타겟 엘리먼트를 제거
$('#target').empty();  // 타겟 엘리먼트의 들어있는 텍스트 노드만 제거

제이쿼리 NODE의 replaceWith와 replaceAll

replaceWith --> 제어대상을 먼저 지정

replaceAll --> 제어대상을 인자로 전달

clone --> 대상 복사

$('#target').replaceWith($('#source').clone); //인자가 앞에 있음
$('#source').clone().replaceAll('#target'); // 인자가 뒤에 있음

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
jQuery 란? (0)	2019.02.27
제이쿼리의 기본문법 (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27

아빠개발자의 노트