상태바
상태바(StateBar)는 데이터 행의 상태(RowState)를 표시하는 수직 Bar입니다.
행의 상태는 create, updated, createAndDeleted, deleted, none 5가지가 존재 합니다.
pivot, grid, 피벗, 필터, filter
pivot, export
pivot, style, callback, styleCallback
pivot, value, getCellValue
pivot, pivotFields, getPivotFields
상태바(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:"바탕체"}
}
});