'자바스크립트/jQuery'에 해당되는 글 5건
jQuery를 이용한 테이블 셀병합
자바스크립트/jQuery 2013. 9. 7. 00:09통계 화면을 구성하던 중 같은 값에 대해서 셀을 병합해야 했는데 서버 스크립트에서 복잡하게 하지 말고
jQuery를 이용해 클라이언트단에서 구현하는 방법을 찾아봤습니다.
이미 같은 문제로 고민해서 구현해 놓은 것 중에 어떤 분 말씀대로 가장 깔끔한 코드를 첨부합니다 ^^
셀이 병합되는 모습을 보기 싫다면 테이블을 감추고 병합 후에 보여주면 될 것 같습니다.
문제 화면
유효성 검사 | 버전 | 1.1 |
데이터 검사 | 버전 | 1.1 |
데이터 검사 | 버전 | 1.3 |
요구하는 화면
유효성 검사 | 버전 | 1.1 |
데이터 검사 | 버전 | 1.1 |
1.3 |
/*
*
* 같은 값이 있는 열을 병합함
*
* 사용법 : $('#테이블 ID').rowspan(0);
*
*/
$.fn.rowspan =
function
(colIdx, isStats) {
return
this
.each(
function
(){
var
that;
$(
'tr'
,
this
).each(
function
(row) {
$(
'td:eq('
+colIdx+
')'
,
this
).filter(
':visible'
).each(
function
(col) {
if
($(
this
).html() == $(that).html()
&& (!isStats
|| isStats && $(
this
).prev().html() == $(that).prev().html()
)
) {
rowspan = $(that).attr(
"rowspan"
) || 1;
rowspan = Number(rowspan)+1;
$(that).attr(
"rowspan"
,rowspan);
// do your action for the colspan cell here
$(
this
).hide();
//$(this).remove();
// do your action for the old cell here
}
else
{
that =
this
;
}
// set the that if not already set
that = (that ==
null
) ?
this
: that;
});
});
});
};
/*
*
* 같은 값이 있는 행을 병합함
*
* 사용법 : $('#테이블 ID').colspan (0);
*
*/
$.fn.colspan =
function
(rowIdx) {
return
this
.each(
function
(){
var
that;
$(
'tr'
,
this
).filter(
":eq("
+rowIdx+
")"
).each(
function
(row) {
$(
this
).find(
'th'
).filter(
':visible'
).each(
function
(col) {
if
($(
this
).html() == $(that).html()) {
colspan = $(that).attr(
"colSpan"
) || 1;
colspan = Number(colspan)+1;
$(that).attr(
"colSpan"
,colspan);
$(
this
).hide();
// .remove();
}
else
{
that =
this
;
}
// set the that if not already set
that = (that ==
null
) ?
this
: that;
});
});
});
}
셀병합 호출
//첫번째 열을 병합한다.
$(
'#테이블 ID'
).rowspan(0);
레이어창을 브라우저 화면 가운데 띄우기
자바스크립트/jQuery 2009. 11. 6. 10:3301.
function
fnOpenChapter() {
02.
var
obj = $(
'#chapter_select'
);
03.
var
iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;
04.
var
iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;
05.
06.
obj.css({
07.
position:
'absolute'
08.
, display:
'block'
09.
, top: iHeight
10.
, left: iWidth
11.
});
12.
}
여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.
jQuery 기반 Library 들 소개
자바스크립트/jQuery 2009. 10. 19. 11:14- jQuery Core v1.3.2 : http://www.jquery.com/
- jQuery UI v1.7.2 : http://ui.jquery.com/
- jQuery Grid v3.5 : http://www.trirand.com/blog/
- jQuery Tools v1.0.2 : http://flowplayer.org/tools/index.html
- jQuery Form v2.28 : http://malsup.com/jquery/form/
- jquery keyfilter v1.7: http://code.google.com/p/jquery-keyfilter/
- jquery numberformatter v1.2 : http://code.google.com/p/jquery-numberformatter/
- UI.Layout v1.2.0 : http://layout.jquery-dev.net/
jQuery UI는 jQuery 에서 공식적으로 진행하고 있는 UI Library입니다. 현재는 기반이 되는 기능과 특수효과, 그리고, 가장 많이 사용할 것으로 여겨지는 Widget 들을 제공하고 있습니다.
이 Library가 기대가 많이 됩니다. Wiki 쪽에 보면 여러 Widget들이 개발중인 걸 보실 수 있습니다.
jQuery Grid는 말 그대로 Grid 기능입니다. Grid가 가져야할 기본 기능 외에도 Tree Grid 기능도 있고, Subgrid 기능도 갖추고 있습니다. Tree Grid 는 한 칼럼만 사용하면 그냥 간단한 Tree 처럼 사용할 수도 있습니다.
이 Grid는 여기서 소개하기에는 너무 많은 기능을 자랑합니다. Grid 자체에서 새 항목을 등록하거나 수정하는 기능을 칼럼에 대한 설정만으로도 가능하게 되어 있습니다. 데모나 문서를 참조해서 보세요.
jQuery Tools는 jQuery UI에서 지원해 주지 못하는 있었으면 하는 Widget들을 지원해 줍니다. Tab은 UI 쪽에 있긴 하지만요.
이건 백문이 불여일견입니다. 한 번 데모(http://flowplayer.org/tools/demos/index.html)를 보세요.
jQuery Form은 Form 값을 Ajax로 처리하는 걸 간편하게 해 주는 Library입니다. 처리의 간편함을 위해 사용했습니다. 아쉬운 건 JavaScript Object의 값을 Form의 각 요소에 세팅해 주는 게 있었으면 했는데 없어서 직접 구현했네요.
jquery keyfilter는 Input 필드나 TextArea에서 Key 입력을 제한해 주는 Library입니다. 보통 keydown 이벤트에 keyCode 값을 읽어 true / false를 돌려 주는 식으로 구현을 많이 하는데 역시 이걸 사용하면 간편해집니다.
jquery numberformatter 는 숫자 포매팅해 주는 Library 입니다. Locale 을 적용해서 포매팅 해 주는 게 특징이구요. 패턴을 직접 지정해 줄 수도 있습니다.
UI.Layout 은 BorderLayout을 구현한 건데요. Java에서 AWT, Swing 프로그램이나 델파이 같은 RAD 툴을 써 보신 분은 아실 겁니다. 화면의 영역은 east, west, south, north, center 5가지 영역으로 나누어 놓고, 전체 화면의 크기가 변경될 때 east, west는 지정한 폭을, south, north 는 지정한 높이를 유지시켜 주는 역할을 합니다. 물론 그렇기 때문에 center 영역은 나머지 4개 영역을 제외한 영역으로 꽉 차게 유지가 되는 거죠.
여기에 동서남북 4개 영역과 center 사이의 경계를 드래그로 조절하게 한다든지 4개 영역을 닫았다 열었다 한다든지 하는 기능들이 들어 있습니다. 웹 프로그램이 Thin Client 역할로 사용되면서 이런 기능들이 요구되고 있는 상황인 거죠.
이 Layout 이 아쉬운 부분이 jQuery Grid와 연동이 자동으로 안 되고 onresize 이벤트 핸들러를 만들어 처리해 주어야 하는 점이었습니다. 하지만 복합한 코딩을 요구하는 건 아니니까요. 간단히 작성하실 수 있을 겁니다.
그리고 마지막 뽀너스입니다. ^^
이번 프로젝트에서 써 보지는 않았는데요. 설마 이런 게 JavaScript로 가능하리라고는 생각지 않아서 검색조차 안 해 봤는데 있더라구요. MaskEdit 가 있었습니다.
- Masked Input v1.2.2 : http://digitalbush.com/projects/masked-input-plugin/
jQuery File Tree 예제
자바스크립트/jQuery 2009. 1. 6. 14:15jQuery 를 이용한 File Tree 예제입니다.
라이브데모를 볼 수 있는 곳 : http://abeautifulsite.net/notebook_files/58/demo/
소스에 대한 내용을 볼 수 있는 곳 : http://abeautifulsite.net/notebook.php?article=58
소스 다운로드 : http://abeautifulsite.net/notebook_files/58/jqueryFileTree.zip
현재 버전은 1.01 이며 Ajax 로 구현이 되어 있습니다.