RealGrid HELPB8-6 StateBar 사용하기
들어가며
이번 강좌에서는 StateBar에 대하여 알아보도록 하겠습니다.
이론
StateBar는 데이터 행의 상태(RowState)를 표시하는 수직 Bar입니다. 데이터셋이 처음 로드된 후 각각의 데이터 행은 사용자 편집을 통해 수정/추가/삭제/추가후삭제의 상태를 가질 수 있습니다. 행 상태에 대한 내용은 RowState페이지를 참조하세요.
StateBar 정보 가져오기
GridBase.getStateBar()를 사용해서 현재 설정된 StateBar의 정보를 가져 올 수 있습니다.
가져오는 StateBar의 속성 정보는 아래와 같습니다.
width: StateBar의 너비를 픽셀 단위로 지정합니다.visible: StateBar의 표시 여부를 지정합니다.
StateBar 정보 설정하기
[GridBase.setStateBar()를 사용해서 StateBar의 정보를 설정할 수 있습니다.
실습
실습에서는 StateBar 속성 정보를 실행해보면서 결과를 확인해보도록 하겠습니다.
-
버튼을 클릭하면 그리드에 StateBar가 표시됩니다.
$("#btnVisible").click(function () { //StateBar 표시 gridView.setStateBar({visible: true}); }); -
너비를 80픽셀로 설정하기
$("#btnWidth").click(function () { gridView.setStateBar({width: 80}); }); -
1, 2행 RowState를 추가 상태로 바꾸기
$("#btnCreated").click(function () { dataProvider.setRowStates([0, 1], 'created', true); }); -
3행 RowState를 수정 상태로 바꾸기
$("#btnUpdated").click(function () { dataProvider.setRowState(2, 'updated', true); }); -
4행 RowState를 삭제 상태로 바꾸기
$("#btnDeleted").click(function () { dataProvider.setRowState(3, 'deleted', true); }); -
5행 RowState를 추가 후 삭제 상태로 바꾸기
$("#btnCreateAndDeleted").click(function () { dataProvider.setRowState(4, 'createAndDeleted', true); }); -
1행 RowState를 미변경 상태로 바꾸기
$("#btnNone").click(function () { dataProvider.setRowState(0, 'none', true); });
실행화면
-
버튼을 클릭하면 그리드에 인디케이터가 표시됩니다.
-
너비를 80픽셀로 설정하기.
-
1, 2행 RowState를 추가 상태로 바꾸기
-
3행 RowState를 수정 상태로 바꾸기
-
4행 RowState를 삭제 상태로 바꾸기
-
5행 RowState를 추가 후 삭제 상태로 바꾸기
-
1행 RowState를 미변경 상태로 바꾸기
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>
<script>
var gridView;
var dataProvider;
$(document).ready( function(){
RealGridJS.setTrace(false);
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//필드 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1"
},
{
fieldName: "field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4"
},
{
fieldName: "field5"
},
{
fieldName: "field6"
},
{
fieldName: "field7"
},
{
fieldName: "field8"
},
{
fieldName: "field9"
},
{
fieldName: "field10"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "국어"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
header : {
text: "민법"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
header : {
text: "한국사"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
header : {
text: "영어"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
header : {
text: "과학"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
header : {
text: "사회"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
["가수", "남자", "이승환", "5", "100", "100", "100", "100", "100", "100"],
["가수", "남자", "토이", "6", "100", "100", "100", "100", "100", "100"]
];
dataProvider.setRows(data);
gridView.setOptions({
indicator: {visible: false},
checkBar: {visible: false},
stateBar: {visible: true}
});
//StateBar 표시
$("#btnVisible").click(function () {
gridView.setStateBar({visible: true});
});
//너비를 80픽셀로 설정하기
$("#btnWidth").click(function () {
gridView.setStateBar({width: 80});
});
//1, 2행 RowState를 추가 상태로 바꾸기
$("#btnCreated").click(function () {
dataProvider.setRowStates([0, 1], 'created', true);
});
//3행 RowState를 수정 상태로 바꾸기
$("#btnUpdated").click(function () {
dataProvider.setRowState(2, 'updated', true);
});
//4행 RowState를 삭제 상태로 바꾸기
$("#btnDeleted").click(function () {
dataProvider.setRowState(3, 'deleted', true);
});
//5행 RowState를 추가 후 삭제 상태로 바꾸기
$("#btnCreateAndDeleted").click(function () {
dataProvider.setRowState(4, 'createAndDeleted', true);
});
//1행 RowState를 미변경 상태로 바꾸기
$("#btnNone").click(function () {
dataProvider.setRowState(0, 'none', true);
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnVisible">visible: true</button> 버튼을 클릭하면 그리드에 인디케이터가 표시됩니다. 2. <button type="button" class="btn btn-primary btn-xs" id="btnWidth">width: 80</button> 너비를 80픽셀로 설정하기. 3. <button type="button" class="btn btn-primary btn-xs" id="btnCreated">setRowStates([0, 1], 'created', true)</button> 1, 2행 RowState를 추가 상태로 바꾸기 4. <button type="button" class="btn btn-primary btn-xs" id="btnUpdated">setRowState(2, 'updated', true)</button> 3행 RowState를 수정 상태로 바꾸기 5. <button type="button" class="btn btn-primary btn-xs" id="btnDeleted">setRowState(3, 'deleted', true)</button> 4행 RowState를 삭제 상태로 바꾸기 6. <button type="button" class="btn btn-primary btn-xs" id="btnCreateAndDeleted">setRowState(4, 'createAndDeleted', true)</button> 5행 RowState를 추가 후 삭제 상태로 바꾸기 7. <button type="button" class="btn btn-primary btn-xs" id="btnNone">setRowState(0, 'none', true)</button> 1행 RowState를 미변경 상태로 바꾸기 <div id="realgrid" style="width: 100%; height: 250px;"></div>
데모 사이트
API 참조