상태바
상태바(StateBar)는 데이터 행의 상태(RowState)를 표시하는 수직 Bar입니다.
행의 상태는 create
, updated
, createAndDeleted
, deleted
, none
5가지가 존재 합니다.
상태바(StateBar)는 데이터 행의 상태(RowState)를 표시하는 수직 Bar입니다.
행의 상태는 create
, updated
, createAndDeleted
, deleted
, none
5가지가 존재 합니다.
상태바의 설정을 변경하는 것은 setStateBar()를 사용 합니다.
현재 설정된 상태를 확인하는 것은 getStateBar()을 사용 합니다.
visible
: 상태바 영역의 화면 표시여부를 지정합니다.1
2
3
gridView.setStateBar({
visible: false
});
1
2
3
gridView.setStateBar({
visible: true
});
행 상태(RowState)는 사용자의 키 입력에 의해서 변경되지만 개발자가 임의로 설정할 수 있습니다.
아래 버튼은 현재 선택된 행의 상태를 변경합니다.
1
2
3
var curr = gridView.getCurrent();
var rowState = $(":input:radio[name='rowState']:checked").val()
dataProvider.setRowState(curr.dataRow, rowState)
(Only JS Support)
기본적으로 각 행의 상태는 아이콘으로 표시 됩니다. 그라나 필요에 따라 text로 보여주기를 원할때도 있습니다. 이런 경우 stateBar.mark 속성에 text를 지정하고 stateTexts 속성에 각 상태별 문자를 지정하면 됩니다.
1
2
3
4
5
6
7
8
9
gridView.setStateBar({
mark: "text",
stateTexts: {
created: "C",
updated: "U",
deleted: "D",
createAndDeleted: "X"
}
});
1
2
3
gridView.setStateBar({
mark: "default"
});
(Only JS Support)
상태 바의 헤드와 풋 영역에 글자나 이미지를 표시할 수 있습니다.
headText
: head 영역에 표시할 text를 지정한다.footText
: foot 영역에 표시할 text를 지정한다.headImageUrl
: head 영역에 표시할 이미지의 Url을 지정한다.footImageUrl
: foot 영역에 표시할 이미지의 Url을 지정한다.1
2
3
4
5
6
gridView.setStateBar({
headText: "H",
footText: "F",
headImageUrl: null,
footImageUrl: null
});
1
2
3
4
5
6
gridView.setStateBar({
headText: null,
footText: null,
headImageUrl: "/resource/image/common/dot_arrow2_top.gif",
footImageUrl: "/resource/image/common/dot_arrow2_bottom.gif"
});
1
2
3
4
5
6
7
8
9
gridView.setStateBar({
mark:"text",
styles:{font:"나눔고딕코딩"},
stateStyles:{
"updated":{"background":"#FF00FF00", font:"나눔고딕코딩"},
"created":{"background":"#44FF22FF", figureBackground:"#88888888", font:"굴림체"},
"deleted":{"background":"#44000000", foreground:"#FF88FF88", font:"바탕체"}
}
});