New JavaScript UI Library
w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5
w2ui.com
w2ui 공식 홈페이지에서 w2ui플러그인을 내려받는다.
내려받은 플러그인에서 w2ui-1.5.js , w2ui-1.5.css 두 파일을 디렉토리에 저장한다.
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/w2ui-1.5.js"></script>
<link href="/css/w2ui-1.5.css" rel="stylesheet" />저장한 파일들을 참조하도록 저장된 디렉토리 경로와 함께 각각 선언해준다.
<style>
#wrap{
margin : 0 auto;
width:760px;
height:200px;
}
</style>위 코드와 같이 style 속성을 적용한다.
Body영역 본문에는 id가 wrap인 div 태그요소를 추가한다.
<body>
<div id="wrap"></div>
</body>이어서 작성할 스크립트 코드로 wrap id를 갖는 div영역에 그리드가 그려질 예정이다.
다음은 그리드를 그려내는 Script 코드이다.
<script>
$(document).ready(function() {
$('#wrap').w2grid({
name : 'grid'
});
});
</script>name : 'grid' 옵션이 빠지면 그리드는 그려지지않는다.
그리드의 가장 기본 틀을 그려준다.
옵션을 하나하나 추가해보자.
다음은 columns옵션과 records옵션이다.
columns 옵션은 그리드 내의 열의 속성, 열의 제목, 열의크기, 수정가능여부 등의 기능을 설정할 수 있다.
, columns: [ //그리드의 열
{field:'name', caption: '도서명', size: '40%', editable:{type:'text'}}
, {field: 'author', caption: '저자', size: '10%'}
, {field: 'publisher', caption: '출판사', size: '20%'}
, {field: 'price', caption: '가격', size: '10%'}
, {field: 'point', caption: '판매 지수', size: '20%'}
]// 속성 : field-열을 구분하는 문자열, caption-이름, size-크기, editable-수정 가능 여부
, records: [{//그리드의 행
recid: 1
, name: '모던 웹 디자인을 위한 HTML5 + CSS3 입문'
, author: '윤인성'
, publisher: '한빛미디어'
, price: 30000
, point: 30400
}]columns 속성에서 field 키 속성에 입력한 value 값인 name은 records 속성의 키속성 name과 같다.
records 속성의 recid 속성은 w2ui플러그인을 사용하기 위해 반드시 입력해야만 하는 값이다.
columns 속성에서 editable속성은 수정하고싶은 그리드를 더블클릭했을 경우 수정이 가능하도록 그리드를 변경한다.
show 속성은 그리드를 꾸미는 속성이다.
, show: {
header: true
, toolbar: true
, footer: true
, columnHeaders: true
, lineNumbers: true
, expandColumn: true
, selectColumn: true
, emptyRecords: true
, toolbarReload: true
, toolbarColumns: true
, toolbarSearch: true
, toolbarAdd: true
, toolbarDelete: true
, toolbarSave: true
}위와같이 설정하면 아래 사진과같이 그리드가 꾸며진다.
꾸며진다는 표현보다는 여러 기능을 구현할 수 있도록 UI가 추가되어 변경된다.
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid</title>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/w2ui-1.5.js"></script>
<link href="/css/w2ui-1.5.css" rel="stylesheet" />
<style>
#wrap{
margin : 0 auto;
width:760px;
height:200px;
}
</style>
<script>
$(document).ready(function() {
$('#wrap').w2grid({
name : 'grid'
, columns: [
{field:'name', caption: '도서명', size: '40%'}
, {field: 'author', caption: '저자', size: '10%'}
, {field: 'publisher', caption: '출판사', size: '20%'}
, {field: 'price', caption: '가격', size: '10%'}
, {field: 'point', caption: '판매 지수', size: '20%'}
] //그리드의 열 (속성 : field-열을 구분하는 문자열, caption-이름, size-크기, editable-수정 가능 여부)
, records: [{
recid: 1
, name: '모던 웹 디자인을 위한 HTML5 + CSS3 입문'
, author: '윤인성'
, publisher: '한빛미디어'
, price: 30000
, point: 30400
}] //그리드의 행
, show: {
header: true
, toolbar: true
, footer: true
, columnHeaders: true
, lineNumbers: true
, expandColumn: true
, selectColumn: true
, emptyRecords: true
, toolbarReload: true
, toolbarColumns: true
, toolbarSearch: true
, toolbarAdd: true
, toolbarDelete: true
, toolbarSave: true
}
});
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
'JavaScript > nodeJS & Ajax & Plugin' 카테고리의 다른 글
| w2ui 플러그인을 활용한 그리드 그리기 -3 (추가, 수정, 삭제) (0) | 2022.01.10 |
|---|---|
| w2ui 플러그인을 활용한 그리드 그리기 -2 (메서드와 이벤트) (0) | 2022.01.10 |
| [node.js] RevertAjax Polling 실시간 채팅 어플리케이션 예제 구현 (0) | 2022.01.09 |
| [node.js] mysql 서버 연동 (0) | 2022.01.08 |
| [node.js] - XMLHttpRequest / XML문서 데이터 추출 (childeNodes,nodeValue) (0) | 2022.01.07 |