자바스크립트 오브젝트 Object

JAVASCRIPT 자바스크립트 2020. 5. 11. 10:17

오브젝트란 변수와 함수의 모음인데요. 

사용방법은 아래와 같아요. 

var people = {

 age : '11살'

sex : '남자'

birthday : '5월24일'

getAge : function(){return this.age}

};

 function  같은 경우 외부에 선언하고 쓸수도 있어요.

function getAge()
{
	return this.age;
}
var people = {

 age : '11살'

sex : '남자'

birthday : '5월24일'

getAge : getAge

};

 

저작자표시

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

자바스크립트 document 문서 객체 모델  (0) 2020.05.11
자바스크립트 브라우저객체모델 window  (0) 2020.05.11
[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제  (0) 2019.06.05
차트 OrgChart 웹차트 jquery차트 제이쿼리 차트 조직도  (0) 2017.02.12
jquery excel 저장  (0) 2014.12.24
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제

JAVASCRIPT 자바스크립트 2019. 6. 5. 21:33

출처 : http://hobbiez.tistory.com/321
 

checked 여부 확인

$("input:checkbox[id='ID']").is(":checked") == true : false  /* by ID */

$("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */

checked/unchecked 처리

$("input:checkbox[id='ID']").prop("checked", true); /* by ID */

$("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */

특정 라디오버튼 선택 / 모든 라디오버튼 선택해제

$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);

$("input:radio[name='NAME']").removeAttr("checked");

전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 HTML

<label><input type="checkbox" id="check_all" class="input_check"> <b>전체선택</b></label>

<ul class="select_subject">

<label><input type="checkbox" class="input_check" name="class[1]" value="1"> <b>1</b></label>

<label><input type="checkbox" class="input_check" name="class[2]" value="2"> <b>2</b></label>

</ul>

전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 jQuery

$(function(){

    $("#check_all").click(function(){

        var chk = $(this).is(":checked");//.attr('checked');

        if(chk) $(".select_subject input").prop('checked', true);

        else  $(".select_subject input").prop('checked', false);

    });

});

 

저작자표시

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

자바스크립트 브라우저객체모델 window  (0) 2020.05.11
자바스크립트 오브젝트 Object  (0) 2020.05.11
차트 OrgChart 웹차트 jquery차트 제이쿼리 차트 조직도  (0) 2017.02.12
jquery excel 저장  (0) 2014.12.24
jquery 엑셀파일 저장할때  (0) 2014.12.24
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

차트 OrgChart 웹차트 jquery차트 제이쿼리 차트 조직도

JAVASCRIPT 자바스크립트 2017. 2. 12. 18:50

오늘은 조직도를 표현할때 유용한 OrgChart를 소개합니다. 

 이차트를 소개하는 이유는 매우 사용하기 편하면서도 표현력이 좋습니다. 

아래의 예제를 보시죠. 

엄청 깔끔하게 나오지 않나요?

소스는 더 간결합니다. 


// sample of core source code

var datasource = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager' },
    { 'name': 'Su Miao', 'title': 'department manager',
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer' },
        { 'name': 'Hei Hei', 'title': 'senior engineer' }
      ]
    },
    { 'name': 'Hong Miao', 'title': 'department manager' },
    { 'name': 'Chun Miao', 'title': 'department manager' }
  ]
};

$('#chart-container').orgchart({
  'data' : datasource,
  'depth': 2,
  'nodeContent': 'title'
});


children에 json 형태의 데이터만 넣어주면 됩니다. 


작동하는것도 보시죠?

매우 인상적이지 않나요?

역방향으로도 표시되고 4방향으로 표시할수 있어요.

정말 대박이라고 밖에 말할수 없네요. 

저는 이것으로 인맥관계도를 표시해 보았는데요. 

참으로 편했습니다. 

컬러도 이렇게 수정하면 이쁘게 변경할수 있습니다. 


와우 정말 깔끔하지 않나요?

사진이나 아이콘으로 표시할수도 있습니다. 

거기에 라이센스는 The MIT License (MIT) 이렇지요.

데모및 소스는 여기서 볼수 있습니다.

https://github.com/dabeng/OrgChart

그럼 즐거운 개발 되세요.




'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

자바스크립트 오브젝트 Object  (0) 2020.05.11
[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제  (0) 2019.06.05
jquery excel 저장  (0) 2014.12.24
jquery 엑셀파일 저장할때  (0) 2014.12.24
table 엑셀 데이타로  (0) 2014.12.24
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

jquery excel 저장

JAVASCRIPT 자바스크립트 2014. 12. 24. 16:32
<div id="dv">
                <table id="tblExport" style="border:1px solid black; ">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style='background-color:red;'>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <button id="btnExport">Export to excel</button>
            </div>
        </div>


$(document).ready(function () {
        $("#btnExport").click(function () {
            $("#tblExport").btechco_excelexport({
                containerid: "tblExport"
               , datatype: $datatype.Table
            });
        });
    });


'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제  (0) 2019.06.05
차트 OrgChart 웹차트 jquery차트 제이쿼리 차트 조직도  (0) 2017.02.12
jquery 엑셀파일 저장할때  (0) 2014.12.24
table 엑셀 데이타로  (0) 2014.12.24
jqgride formatter  (0) 2014.12.22
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

jquery 엑셀파일 저장할때

JAVASCRIPT 자바스크립트 2014. 12. 24. 16:20

출처 :http://her0116.comics.pe.kr/64


/ 파일명을 지정 하지 않고 할때

$("#btnExcel").live("click", function () {

window.open('data:application/vnd.ms-excel,' + encodeURIComponent($("#tableName").html()))

 e.preventDefault();

});

// 파일명 지정하고 할때

$("#btnExcel").live("click", function () {
        var a = document.createElement('a');
        var data_type = 'data:application/vnd.ms-excel';
        var table_html = encodeURIComponent($("#tableName").html());
        a.href = data_type + ', ' + table_html;
        a.download = '파일명.xls';
        
        a.click();
        e.preventDefault();
});

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

차트 OrgChart 웹차트 jquery차트 제이쿼리 차트 조직도  (0) 2017.02.12
jquery excel 저장  (0) 2014.12.24
table 엑셀 데이타로  (0) 2014.12.24
jqgride formatter  (0) 2014.12.22
jquery table 이나 사이즈 변경시..  (0) 2014.11.28
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

table 엑셀 데이타로

JAVASCRIPT 자바스크립트 2014. 12. 24. 16:18

출처:http://moonstoneit.blogspot.kr/2013/06/html-excle-jsp-html-table-excel-export.html

//Data.html-------------data what you want to make to Excel(엑셀로만들 데이타)


<script type="text/javascript">
function excel(){
document.frm.action = "excel.jsp";
document.frm.excel_data.value = document.getElementById("excel_body").outerHTML;
document.frm.submit();

}
<form name="frm" method="post">
       <input type="hidden" name="excel_data" />
</form>
<table id="excel_body">
<caption>list</caption>
<thead>
<tr>
<th>userid</th>
<th>name</th>
<th>mail</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="data" varStatus="status">
<tr>
<td>
<c:out value='${data.userid}' />
</td>
<td>
<c:out value='${data.username}' />
</td>
<td>
<c:out value='${data.email}' />
</td>
</c:forEach>

</tbody>
</table>



//excel.jsp---------------------use just C&P (그냥복사해서 쓰세요)
<%
request.setCharacterEncoding("utf-8");
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-Disposition", "attachment; filename=\"excel.xls\"");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
out.print("<meta http-equiv=\"Content-Type\" content=\"application/vnd.ms-excel; charset=utf-8\">");
%>
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style type="text/css">
body {font-family:tahoma;font-size:12px}
table {padding:2px;border-spacing:0px;font-family:tahoma;font-size:12px;border-collapse:collapse}
td {text-align:center}
</style>
</head>
<body>
<% out.print(request.getParameter("excel_data")); %>
</body>
</html>

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

jquery excel 저장  (0) 2014.12.24
jquery 엑셀파일 저장할때  (0) 2014.12.24
jqgride formatter  (0) 2014.12.22
jquery table 이나 사이즈 변경시..  (0) 2014.11.28
자바 스프링 3.x  (0) 2014.11.21
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

jqgride formatter

JAVASCRIPT 자바스크립트 2014. 12. 22. 12:56

출처:http://cafe.naver.com/javacreator/853

Jqgrid에서 특정 컬럼에 링크를 걸고 싶거나... 데이터를 다른 값으로 보여주고 싶을 때

formatter를 사용 하면 된다.

$('#gridtable').jqGrid({
   mtype: 'POST',
   height: 'auto',
   width: 300,
   caption: "카테고리",
      colNames:[
    '선택'
   ],
      colModel:[
       { name : 'userid', index: 'userid', width: 80, align: 'right', formatter: setsel }
      ],
});

//--- formatter에 정의 된 함 수는 3가지 인자를 반환한다. cellval 해당 컬럼의 값이다. options는 rowId와 값 등을 구할 수 있으며 rowObject는 해당 row의 데이터값을 가지고 있다. rowObject.userid와 같은 형식으로 접근가능.

 

function setsel( cellval, options, rowObject ){

   var text = '';

   text = '<a href="naver.com">네이버이동</a>';

   return text;

}

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

jquery 엑셀파일 저장할때  (0) 2014.12.24
table 엑셀 데이타로  (0) 2014.12.24
jquery table 이나 사이즈 변경시..  (0) 2014.11.28
자바 스프링 3.x  (0) 2014.11.21
새창에 윈도우 띠우기.  (0) 2014.09.18
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

jquery table 이나 사이즈 변경시..

JAVASCRIPT 자바스크립트 2014. 11. 28. 11:38

$( window ).resize(function() 

    {

   

             if($(window).width()<"890")

                 {$( "#tb" ).width("890px");}

             else

                 { $( "#tb" ).width($( "body").width());}

    });


윈도우 width를 읽어오는 이유는 테이블은 이벤트 발생시 길이가 바로 적용되어 있지 않은 경우가 있음. 

그래서 상위 윈도우의 width 를 읽어옴~ 


'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

table 엑셀 데이타로  (0) 2014.12.24
jqgride formatter  (0) 2014.12.22
자바 스프링 3.x  (0) 2014.11.21
새창에 윈도우 띠우기.  (0) 2014.09.18
javascript에서 trim() 쓰기  (0) 2014.09.18
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

자바 스프링 3.x

JAVASCRIPT 자바스크립트 2014. 11. 21. 15:51

스프링 동영상 강좌 찾기.

http://www.youtube.com/watch?v=KCs2hXM-2E0


참고~

'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

jqgride formatter  (0) 2014.12.22
jquery table 이나 사이즈 변경시..  (0) 2014.11.28
새창에 윈도우 띠우기.  (0) 2014.09.18
javascript에서 trim() 쓰기  (0) 2014.09.18
날짜 계산 응용  (0) 2014.09.16
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

새창에 윈도우 띠우기.

JAVASCRIPT 자바스크립트 2014. 9. 18. 11:20

 window.open('파일명','윈도우명','left=0, top=10, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=708, height=829');


'JAVASCRIPT 자바스크립트' 카테고리의 다른 글

jquery table 이나 사이즈 변경시..  (0) 2014.11.28
자바 스프링 3.x  (0) 2014.11.21
javascript에서 trim() 쓰기  (0) 2014.09.18
날짜 계산 응용  (0) 2014.09.16
javascript ie11 ie10 자바스크립트 document.body.scrollTop scrollTop  (0) 2014.09.04
블로그 이미지

은호아빠

여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#

,

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바