티스토리 뷰
jqgrid
<script type="text/javascript">
$(document).ready(function(){
$(´#grid´).jqGrid({
url:´bb.jsp´, // Json객체를 반환해줄 요청URL
datatype:´json´,
jsonReader:{page:´page´,root:´list´,total:´total´},
colNames:[´id´,´pw´,´ADDR´,´TEL´],
colModel:[
{name:´id´,width:50, editable:false},
{name:´pw´,width:50, editable:true},
{name:´addr´,width:50, editable:true},
{name:´tel´,width:50, editable:true}
],
width:500,
viewrecords:true, //그리드가 보여줄 총 페이지 현재 페이지등의 정보를 노출
rowNum:3, //한화면에 보여줄 row의 수
rowList:[3,6,9], //한 화면에서 볼 수 있는 row의 수를 조절 가능
caption:´회원리스트´,
pager:´#pager´ //페이징을 처리할 <div> 태그의 #+id값
});
$("#grid").navGrid("#pager", //추가,수정,삭제,검색,로드 아이콘 나오게 하기
{add:true,del:true,edit:true,search:false,refresh:false});
});
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
</html>
# onSelectRow: function(id){} 이벤트
onSelectRow: function(id){
alert(id);
}
});
$(´#grid´).addRowData(1,{"id":"a","pw":"b","addr":"c","tel":"d"});
$(´#grid´).addRowData(2,{"id":"e","pw":"f","addr":"g","tel":"h"});
});
# 그리드.getRowData(id) : 주어진id에 해당하는 줄의 object반환
onSelectRow: function(id){
alert($(this).getRowData(id).pw);
}
});
$(´#grid´).addRowData(1,{"id":"a","pw":"b","addr":"c","tel":"d"});
$(´#grid´).addRowData(2,{"id":"e","pw":"f","addr":"g","tel":"h"});
});
# editurl:´NewFile7.jsp´
페이지에 등장하는 add,edit,del아이콘에서 submit버튼을 클릭했을때 요청되는 url설정
onSelectRow: function(id){
alert($(this).getRowData(id).pw);
},
editurl:´NewFile7.jsp´
});
$(´#grid´).navGrid(´#pager´);
$(´#grid´).addRowData(1,{"id":"a","pw":"b","addr":"c","tel":"d"});
$(´#grid´).addRowData(2,{"id":"e","pw":"f","addr":"g","tel":"h"});
});
# 그외
align : "center" , // 컬럼 글 정렬
title : "false" , // 마우스 오버 시 타이틀 글씨 숨김
width : 120 , // 컬럼 넓이 (픽셀 속성 , 퍼센트 속성은 사용 불가)
search : true , // searchToolbar , searchButton 사용 시 컬럼 찾기 기능 사용가능
resizable : true , // 컬럼 사이즈를 자유자재로 조절할 수 있음
sorttype : "date" / "integer" / "text" / function
sortable : true , // 컬럼 간의 위치를 바꿀 수 있다. (editable , multiselect 기능과 중복 사용 불가!)
hidden : true , // 컬럼에 값을 가지고 있지만 그리드에서 숨김
editable : true , // 셀 값을 변경 할 수 있음
edittype : "text" / "select" / "checkbox" / "textarea"
editoptions : {optionName:optionValue} , // 위의 edittype 값에 따라 적용 옵션이 다름 (각 값의 input 옵션과 동일)
frozen : true , // 컬럼 틀고정 기능 사용가능 (editable , multiselect 기능과 중복 사용 불가!)
rowNum:10, // 한화면에 보여줄 row의 수
width:'auto', // 그리드 전체 넓이 조정 (오토 조절 가능)
autowidth:true, // 오토 조절 가능 (width 옵션과 동시 사용 불가!)
rowList:[10,20,30], // 한 화면에서 볼 수 있는 row의 수를 조절 가능
pager:'#pager', // 페이징을 처리할 <div> 태그의 #+id값
rownumbers: true, // row의 숫자를 표시해준다.
sortname:'ProductCode', // 처음 그리드를 불러올 때에 정렬 기준 컬럼
viewrecords: true, // 그리드가 보여줄 총 페이지 현재 페이지등의 정보를 노출
multiselect: true, // 멀티 셀렉트 박스가 첫번째 컬럼에 생김
sortorder:"desc", // 정렬 기준
sortable: true, // colmodel 에서 sortable 기능 사용하려면 true!
caption:"그리드 제목 입력", // 그리드 상단에 그리드의 제목을 입력할 수 있음
height: "220", // 그리드 높이 설정
editurl: "URL.action", // 셀이 수정될 때 수정 요청을 받아서 처리할 URL
cellEdit: true, // 셀 수정 기능을 사용하려면 true!
grouping:true, // row 그룹핑 (서브그리드와는 다른 개념)
groupingView:
{groupField:['컬럼 이름'], // 기준이 될 컬럼의 이름
groupColumnShow: [true], // 기준이 된 컬럼으로 그룹핑 후 기준 컬럼 숨김
groupText:['{0}({1})], // {0} = 그룹핑된 셀값 , {1} = 그룹 하위 값들의 갯수
groupDataSorted: true}, // 그룹핑된 값들 정렬
'VIEW > JSP&SERVLET' 카테고리의 다른 글
| [JSP] <jsp:useBean>,Cookie,EL (0) | 2017.12.01 |
|---|---|
| [JSP] preventDefault,stopPropagation,$.param(),폼태그전송방식,serialize(),serializeArray() (0) | 2017.12.01 |
| [JSP] Servlet (0) | 2017.12.01 |
| [JSP] json,$.ajax() (0) | 2017.12.01 |
| [JSP] jQuery Selectors (0) | 2017.12.01 |