Rich UI DataGrid 및 DataGridTooltip
Rich UI dataGrid 위젯은 테이블의 행 값 배열을 정의합니다. 이 주제에서는 위젯에 대한 일반적인 정보와 참조 세부사항을 제공합니다.
소개
- 열 표제 및 데이터 행을 정의하는 방법.
- behavior를 정의하는 방법(함수 배열을 사용하는 특성). 눈금이 렌더링될 때 주어진 동작에 대한 함수는 배열 요소 순서대로 실행됩니다.
- listener를 정의하는 방법(함수 배열을 사용하는 특성). 주어진 리스너에 대한 함수는 클릭과 같은 사용자 조치에 대한 응답 또는 일부 경우 선택란을 업데이트하는 행을 선택하거나 선택 취소하는 함수 호출에 대한 응답에서 배열 요소 순서대로 실행됩니다.
- 콜론으로 눈금을 정렬하도록 메커니즘을 사용자 정의하는 방법.
- 데이터 눈금의 행에서 사용자 ID에 액세스하십시오.
- 콜백 함수에 사진을 리턴하는 REST 서비스 호출에서 해당 ID를 사용하십시오.
- 핸들러에서 글로벌하게 정의된 이미지 위젯에 해당 사진을 임베드하십시오.
- 이 위젯을 사용자 ID와 동일한 행에 있는 데이터 눈금 열에 두십시오.
- 레코드 파트가 레코드 배열의 기초가 되도록 정의하십시오. 각 레코드에는 데이터 눈금의 단일 행에 표시할 값 세트가 있습니다.
다음은 레코드 파트입니다.
Record Stock type BasicRecord Symbol STRING; NumShares INT; Quote DECIMAL(5,2); SelectQuote Boolean; end필드 이름은 눈금 열의 선언에서 나중에 참조되므로 매우 중요합니다.
- 다음 예에서와 같이 데이터 레코드 배열을 선언하십시오.
stockList Stock[] = [ new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40 }, new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10 } ];주어진 데이터 레코드에서 필드 순서는 의미가 없습니다. 그러나 기본적으로 데이터 레코드의 순서는 데이터 눈금의 행 순서입니다.
- 이전 레코드 선언 뒤에 데이터 눈금을 선언하십시오.
다음은 데이터 눈금 예입니다.
myGrid DataGrid{...};일반적으로 선언에는 columns 및 data 특성이 포함됩니다.- columns 특성의 경우
DataGridColumn 유형의 레코드 배열을 지정하십시오. 다음은 현재 예에 대한 설정입니다.
columns = [ new DataGridColumn { name = "Symbol", displayName = "Company Symbol"}, new DataGridColumn { name = "Quote", displayName = "Price Per Share" }, new DataGridColumn { name = "NumShares", displayName = "Number of Shares" }, new DataGridColumn { name = "Total", displayName = "Value of Shares", formatters = [totalFormatter] } ]DataGridColumn 유형에 대한 처음 세 개의 선언 각각은 Stock 레코드 배열의 레코드 필드를 참조합니다. 네 번째 선언은 계산된 열을 식별하는데, 이는 해당 레코드 필드가 없는 열입니다. 이 경우 Total이라는 레코드 필드가 없습니다.
DataGridColumn 요소의 순서는 열이 표시되는 순서를 판별합니다.
- data 특성에 대해
Stock 유형의 레코드 배열을 지정하십시오. 다음은 설정 예입니다.
data = stockList as any[]배열의 각 요소는 데이터 눈금 행에 필요한 데이터 서브세트를 제공합니다.
대부분의 경우 Rich UI에서는 변수를 참조하기 전에 먼저 변수를 선언해야 합니다. 이 예에서는 데이터 눈금 앞에 stockList가 선언됩니다.
- columns 특성의 경우
DataGridColumn 유형의 레코드 배열을 지정하십시오.
function totalFormatter(class String inout, value String inout, rowData any in)
// display the total value of the shares after calculating the value
// from the content of two other columns in the same row
value = rowData.NumShares as INT * rowData.Quote as DECIMAL(5,2);
end
formatters 특성에서 참조되는 함수는 눈금이 렌더링되기 전에 행당 한번 호출됩니다. 전체 행의 컨텐츠는 세 번째 매개변수에 있으며, CSS 클래스를 제어하는 첫 번째 매개변수 또는 값을 제어하는 두 번째 매개변수를 설정하여 열 특정 셀을 업데이트할 수 있습니다.
on-construction 함수, 리스너 또는 다른 이벤트 핸들러(단추 클릭에 대한 응답에서 실행되는 핸들러)에서만 눈금을 다시 렌더링하십시오.
CSS display:none에 의해 숨겨진 상위 위젯에서는 데이터 눈금이 초기화를 지원하지 않습니다. 숨겨진 상위에 데이터 눈금을 추가하려면 상위 위젯이 표시된 후 DataGrid 렌더링 함수를 명백하게 호출해야 합니다.
- 첫 번째는 행 선택, 행 선택 취소 및 현재 선택 항목 검토를 위한 메커니즘입니다.
- 두 번째는 자동으로 제공된 선택란 세트 선택, 이 선택란 선택 취소 및 해당 선택란 상태 검토를 위한 메커니즘입니다.
- 네 개의 함수가 사용됩니다. setSelection, selectAll, deSelectAll 및 getSelection.
- DataGrid selectionMode 특성의 값은 행 선택이 올바른지, 올바르다면 몇 개의 행을 선택할 수 있는지를 지정합니다. 해당 특성은 사용자 또는 코드에 의한 행 선택에 영향을 미칩니다.
- 행 선택이 올바르면 사용자의 행 클릭에 대한 응답 또는 다음 함수 호출에 대한 응답에서 listener 함수가 실행됩니다. setSelection, selectAll 또는 deSelectAll.
- listener 함수는 DataGrid selectionListeners 특성에서 참조됩니다.
- 제공된 선택란과 관련하여 네 개의 함수가 사용됩니다. setChecked, checkAll, unCheckAll 및 getChecked.
- 선택란이 표시되는지 여부에 상관 없이 사용자 코드에서 선택란을 선택하고, 선택 취소하고, 처리할 수 있습니다. DataGrid showCheckBoxes 특성에 값을 지정하여 해당 선택란의 가시성을 변경할 수 있습니다.
- 사용자의 선택란 선택 또는 선택 취소에 대한 응답 또는 다음 함수 호출에 대한 응답에서 listener 함수가 실행됩니다. setChecked, checkAll 또는 unCheckAll.
- listener 함수는 DataGrid checkBoxListeners 특성에서 참조됩니다.
이미 설명한 대로 데이터 눈금은 열 정렬을 지원합니다. 정렬은 사용자가 열 헤더를 클릭할 때 발생하지만 DataGridColumn enableSorting 특성의 값이 true인 경우에만 수행됩니다. 기본적으로 enableSorting 특성은 true이고 정렬이 셀의 ASCII 문자열 값에 따라 열 컨텐츠를 정렬합니다. 또한 DataGridColumn ignoreCase 특성의 값은 기본 정렬에 영향을 줍니다. DataGridColumn comparatorFunction 특성을 설정하거나 특성이 참조할 함수를 작성하여 정렬 동작을 사용자 정의할 수 있습니다.
myGrid.data[3];
열 정렬에 추가로 사용자는 열을 끌어서 다른 위치에 놓을 수 있습니다. 이 기능은 항상 사용 가능합니다.
- showButtonBar(단추를 가로로 표시하는 단추 막대에 액세스한 경우). 또는
- showScrollBar(화면이동 막대에 액세스한 경우).
- DataGridBehaviors.egl
- DataGridFormatters.egl
- DataGridSelector.egl
- DataGridSorter.egl
- DataGridToolTip.egl
- DataGrid.egl
- DataGridColumn.egl
- DataGridLib.egl
DataGridColumn 필드
- alignment: 표시되는 열의 가로 맞추기에 영향을 주는 상수 정수입니다.
- DataGridLib.ALIGN_LEFT(기본값)
- 열 컨텐츠를 왼쪽으로 맞춥니다.
- DataGridLib.ALIGN_RIGHT
- 열 컨텐츠를 오른쪽으로 맞춥니다.
- DataGridLib.ALIGN_CENTER
- 열 컨텐츠를 가운데로 맞춥니다.
- columnComparator: 열 정렬 중에 comparator 함수를 참조합니다. comparator 함수는 반복적으로 호출되어 셀 컨텐츠를 정렬합니다.
다음은 사용자 정의 함수가 따라야 하는 위임 파트입니다.
Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end- data1
- 비교할 첫 번째 셀의 컨텐츠입니다.
- data2
- 두 번째 셀의 컨텐츠입니다.
함수는 다음 정수 값을 리턴합니다.- -1(첫 번째 셀의 컨텐츠가 두 번째 컨텐츠보다 적은 경우).
- 1(반대가 true인 경우)
- 0(두 셀의 컨텐츠가 같은 경우).
다음은 이전 예에서 회사 이름(Company3 - Company10)이 포함되도록 확장된 경우 사용될 수 있는 함수 예입니다.Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int) if ( (myFirst as string )[8:8] == "6") return(-1); else return(1); end endcolumnComparator 특성에서 CompareTo 함수를 참조하는 경우 사용자가 클릭하면 Company6이 열의 맨 위 또는 아래에 놓입니다.
- displayName: 열 제목으로 표시할 문자열입니다. displayName 필드가 지정되지 않으면, 열 제목은 name 필드의 값입니다.
- enableSorting: 사용자가 클릭으로 열을 정렬할 수 있는지를 나타내는 부울 값입니다. 기본값은 true입니다. 정렬은 ignoreCase 특성의 설정에 영향을 받지만 이는 columnComparator 특성을 지정하지 않은 경우에만 해당됩니다.
- formatters: 눈금이 렌더링되기 전에 배열 요소 정렬에서 실행되는 함수 배열입니다.
이러한 함수는 열의 모든 셀에 대해 한 번 실행됩니다.
다음은 각 함수가 따라야 하는 위임 파트입니다.
Delegate CellFormatter(class String inout, value String inout, rowData any in) end- class
- 열에 있는 셀의 CSS 클래스입니다.
- value
- 항상 STRING 유형인 셀 컨텐츠입니다. 컨텐츠가 선택란인 경우 값은 true 또는 false입니다.
- rowData
- 셀이 상주하는 행의 데이터입니다. 소개에서 제공된 예는 입력을 처리하는 방법을 보여줍니다.
formatters 필드의 함수는 DataGrid columns 특성에서 DataGridColumn 항목이 정의된 순서대로 호출됩니다. 다음 함수는 함수가 다음 DataGrid 특성에 지정되기 전에 실행되며, 런타임 순서대로 나열됩니다. headerBehaviors, behaviors 및 and editingBehaviors.
formatters 특성에서 사용할 수 있는 함수 세트가 제공됩니다. 세부사항은 com.ibm.egl.rui 프로젝트, com.ibm.egl.rui.widgets 패키지에서 DataGridFormatters.egl 파일을 참조하십시오.
- headerAlignment: 표시되는 헤더의 가로 맞추기에 영향을 주는 정수 값입니다.
값은 다음과 같습니다.
- DataGridLib.ALIGN_LEFT(기본값)
- 열 컨텐츠를 왼쪽으로 맞춥니다.
- DataGridLib.ALIGN_RIGHT
- 열 컨텐츠를 오른쪽으로 맞춥니다.
- DataGridLib.ALIGN_CENTER
- 열 컨텐츠를 가운데로 맞춥니다.
CSS 파일에서 다음 항목과 같은 항목을 포함시켜 모든 열 헤더를 설정할 수 있습니다. text-align 속성에 left, center, 또는 right를 지정합니다..EglRuiDataGridHeaderCell { text-align: center; } - ignoreCase: 기본 정렬 중에 열 컨텐츠의 대소문자를 무시할지 여부를 표시하는 부울 값입니다. 기본값은 false입니다. columnComparator 특성을 설정하지 않은 경우에만 이 특성 값이 효과를 가집니다.
- name: 기본 열 제목 및 열 값을 제공하는 레코드 필드의 이름이 포함된 문자열입니다.
- sortDirection: 사용자가 정렬을 위해 다음에 수행하도록 요청하는 사항을 나타내며 다음 상수 중 하나입니다.
- DataGridLib.SORT_UP(초기 기본값)
- 사용자가 클릭하면 열이 오름차순으로 정렬됩니다.
- DataGridLib.SORT_DOWN
- 사용자가 클릭하면 열이 내림차순으로 정렬됩니다.
- DataGridLib.SORT_NONE
- 사용자가 클릭해도 아무 효과가 없습니다.
comparator 함수의 sortDirection 필드에 액세스할 수 있습니다.
- width: 열 너비(픽셀)를 지정하는 정수입니다.
DataGrid 특성
allowEmptyRows: 눈금 헤더를 표시할지 여부를 나타내는 부울 값입니다.
true로 설정하면 DataGrid가 비어 있는 행을 렌더링합니다. 따라서 페이징을 사용하는 경우 총 행 수가 페이지 크기와 같습니다.
이 값이 false면 DataGird가 비어 있는 행을 렌더링하지 않습니다. 기본값은 true입니다.
- behaviors: 함수 참조의 배열입니다.
데이터 눈금이 렌더링될 때 각 눈금 셀에 대해 함수가 순차적으로 호출됩니다.
이 특성은 헤더 셀에 적용되지 않습니다. 다음은 각 함수가 따라야 하는 위임 파트입니다.
Delegate DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in, rowNumber INT in, column DataGridColumn in) end- grid
- 데이터 눈금입니다.
- cell
- 눈금 셀을 나타내는 위젯입니다. 위젯은 HTML DIV 태그를 기반으로 합니다.
- rowData
- 행 데이터를 나타내는 레코드입니다.
- rowNumber
- 1부터 눈금의 행 수까지의 행 번호입니다.
- column
- 열 설명을 나타내는 레코드입니다.
DataGrid 특성은 다음 순서대로 처리됩니다. headerBehaviors, behaviors 및 editingBehaviors.
- cellBorder: 셀 테두리의 너비(픽셀)를 지정하는 정수 값입니다. 셀 테두리는 열의 오른쪽에만 있으며 이 특성의 값은 각 행의 마지막 열에 영향을 주지 않습니다. 기본값은 1입니다.
- cellPadding: 두 위치(셀의 컨텐츠 위와 셀의 컨텐츠 왼쪽)에 추가되는 패딩의 너비(픽셀)를 지정하는 정수 값입니다. 기본값은 4입니다.
- checkBoxListeners: 함수 참조의 배열입니다.
사용자의 선택란 선택 또는 선택 취소에 대한 응답 또는 다음 함수 호출에 대한 응답에서 listener 함수가 실행됩니다.
setChecked, checkAll 또는
unCheckAll.다음은 각 listener 함수가 따라야 하는 위임 파트입니다.
Delegate CheckBoxListener(grid DataGrid in) end end- dataGrid
- 데이터 눈금입니다.
현재 주제의 첫 번째 예와 관련하여 사용자 선택에 대한 응답에서 스톡 기호를 표시하는 다음 리스너를 고려해 보십시오.function myListener(grid DataGrid in) columnRetrieve Stock[]; columnRetrieve = grid.getChecked() as Stock[]; numberOfRows int = columnRetrieve.getSize(); if (numberOfRows > 0) for (i int from 1 to numberOfRows) sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked."); end end end사용자 코드로부터의 선택란 설정에 대한 세부사항은 이후의 DataGrid checkAll 및 setChecked 함수에 대한 설명을 참조하십시오.
- checkBoxWidth: 시스템 제공 선택란의 너비(픽셀)를 지정하는 정수 값입니다. 기본값은 20입니다.
- columns: DataGridColumn 유형의 레코드 배열입니다.
- data: 레코드 배열입니다. 이 특성은 ANY[] 유형입니다.
- dataLoader: 함수 참조입니다. 이 함수는 이후에
데이터 로더라고 하며
런타임 시 반복적으로 호출되어 눈금에 표시할 값 서브세트를 제공합니다.
일반적으로 각 서브세트는 데이터의 페이지이며,
showButtonBar 특성을 true로 설정하여 사용자가 한 페이지에서 다음 페이지로 클릭할 수 있도록 합니다.
데이터 로더를 사용하여 사용자 요청에 대한 응답에서 한 번에 모든 데이터를 액세스하지 않고 데이터 서브세트를 액세스합니다.
다음은 각 함수가 따라야 하는 위임 파트입니다.
Delegate DataLoader(startRow int in, endRow int in, sortFieldName string in, sortDirection int in) returns(boolean) end- startRow
- 데이터를 요청하는 첫 번째 행 번호입니다.
- endRow
- 데이터를 요청하는 마지막 행 번호입니다.
- sortFieldName
- 사용자가 마지막으로 정렬한 열의 name 필드 값입니다. 열을 정렬하지 않은 경우 이 값은 눈금에서 가장 왼쪽에 있는 열의 이름입니다.
- sortDirection
- 사용자가 정렬을 위해 다음에 수행하도록 요청하는 사항을 나타내며 다음 상수 중 하나입니다.
- DataGridLib.SORT_UP(초기 기본값)
- 사용자가 클릭하면 열이 오름차순으로 정렬됩니다.
- DataGridLib.SORT_DOWN
- 사용자가 클릭하면 열이 내림차순으로 정렬됩니다.
- DataGridLib.SORT_NONE
- 사용자가 클릭해도 아무 효과가 없습니다.
특정한 행에 이미 데이터가 로드되어 있는지 여부를 나타내는 리턴 값입니다. 이 값을 false로 설정하면 사용자 로직이 데이터 배열을 업데이트함을 나타냅니다. 이 값을 true로 설정하면 데이터 로더가 불필요하게 실행되지 않도록 합니다. 예를 들어 사용자 코드가 다음과 같습니다.if (dataComplete) return(true); else // do the processing needed to add data to the specified rows end이 예에서는 서비스가 표시될 수 있는 모든 데이터를 제공한 후 dataComplete라는 변수를 true로 설정하고 있다고 가정합니다. if 문의 조건은 데이터 로더가 애플리케이션에서 후속 작업을 수행하지 못하게 합니다.
다음은 추가 세부사항입니다.- dataGrid 선언에서 dataLoader 특성을 설정한 경우 on-construction 함수 이전에 데이터 로더가 호출됩니다.
어떤 경우에서도 data 특성에 값을 지정하고 다른 지정을 수행하는 중일 때마다 데이터 로더가 호출됩니다.
Rich UI 핸들러 필드를 초기화하기 전에 데이터 로더가 해당 필드를 액세스하지 못하도록 하려면 dataGrid 선언에서 data 및 dataLoader 특성을 생략하십시오. on-construction 함수의 끝에 다음과 같은 두 명령문을 포함시키십시오.
myGrid.dataLoader = myDataLoader; myGrid.data = myDataList as ANY[]; - 데이터 서브세트의 로딩 프로세스는 데이터 로더 호출로 시작되며 데이터 배열에 값을 놓으면서 계속됩니다. 눈금 특정 render 함수를 호출하여 프로세스를 종료합니다. 예를 들어 서비스에서 데이터를 검색하도록 설정하는 콜백 함수입니다.
- 데이터 로더가 주어진 행 세트에 대한 데이터를 검색할 수 없는 경우 눈금 특정 cancelDataLoader 함수를 호출하십시오. 예를 들어 서비스 실패에 응답하도록 설정하는 예외 핸들러입니다.
- 프로세스 초기에 완전한 데이터 배열을 제공하는 경우(사용자가 단추 막대를 클릭할 때 해당 배열의 컨텐츠가 제공되는 경우에도 해당)에 단추 막대가 가장 잘 작동합니다. 요소 수를 미리 설정할 수 있지만 다음과 같이 프로세스를 이행할 수 있습니다. 데이터 배열에 단일 요소를 포함시키고 정적인 서비스를 처음 호출하는 동안 최종 요소 수를 검색합니다.
dataLoader 특성 사용에 대한 예는 "UI 프로그램과 데이터 눈금을 사용한 엔드투엔드 처리"를 참조하십시오.
- editorBehaviors: 함수 참조의 배열입니다.
데이터 눈금이 렌더링될 때 각 셀에 대해 함수가 순차적으로 호출됩니다.
이는 각 셀에 위젯을 놓기 위해서입니다.
다음은 각 함수가 따라야 하는 위임 파트입니다.
Delegate EditorBehavior(grid dataGrid in, cell Widget in, rowData any in, rowNumber INT in, column DataGridColumn in, value ANY in) returns (Widget) end- grid
- 데이터 눈금입니다.
- cell
- 눈금 셀을 나타내는 위젯입니다. 위젯은 HTML DIV 태그를 기반으로 합니다. 해당 컨텐츠는 formatters 특성 설정으로 인한 영향(있는 경우)을 포함합니다.
- rowData
- 행 데이터를 나타내는 레코드입니다.
- rowNumber
- 1부터 눈금의 행 수까지의 행 번호입니다.
- column
- 열 설명을 나타내는 레코드입니다.
- value
- 셀의 컨텐츠입니다. 이 컨텐츠는 DataGridColumn formatters 특성 설정으로 인한 영향(있는 경우)을 포함합니다.
리턴 값은 위젯 또는 널입니다.
DataGrid 특성은 다음 순서대로 처리됩니다. headerBehaviors, behaviors 및 editingBehaviors.
- fixFirstColumn: 화면이동 막대를 스크롤할 때 DataGrid의 첫 번째 열을 고정할 것인지 여부를 표시하는 부울 값입니다. 값이 true인 경우 첫 번째 열의 배경이 기본적으로 파란색입니다. DataGrid의 너비 또는 높이 특성이 실제 너비 또는 높이 특성보다 작은 경우 가로 또는 세로 화면이동 막대가 표시됩니다. 화면이동 막대를 스크롤할 때 첫 번째 열은 항상 고정되어 있습니다. 이 특성이 지정된 경우 세로 화면이동 막대는 DataGrid의 가장 바깥쪽에 표시됩니다.
- headerBehaviors: 함수 참조의 배열입니다. 데이터 눈금이 렌더링될 때마다 각 헤더 셀에 대해 함수가 순차적으로 호출됩니다. 각 함수는 behaviors 특성 항목에 설명되어 있는 위임 파트를 기반으로 합니다.
- pageSize: 표시할 행 수를 나타내는 정수입니다. 기본값은 10입니다. 자세한 세부사항은 showButtonBar 및 showScrollBar 특성에 대한 항목을 참조하십시오.
- rowHeight: 행의 최소 높이(픽셀)를 지정하는 정수 값입니다. 컨텐츠에 세로 공간이 더 필요하면 행 높이에 이 요구사항이 반영됩니다.
- selectionListeners: 함수 참조의 배열입니다.
행 선택이 올바르면 사용자의 행 클릭에 대한 응답 또는 다음 함수 호출에 대한 응답에서 selection listener가 실행됩니다.
setSelection, selectAll 또는
deSelectAll.다음은 각 selection listener가 따라야 하는 위임 파트입니다.
Delegate SelectionListener(grid DataGrid in) end end- dataGrid
- 데이터 눈금이 함수에 전달됩니다.
현재 주제의 첫 번째 예와 관련하여 사용자 선택에 대한 응답에서 스톡 기호를 표시하는 다음 리스너를 고려해 보십시오.function myListener(grid DataGrid in) columnRetrieve Stock[]; columnRetrieve = grid.getSelection() as Stock[]; numberOfRows int = columnRetrieve.getSize(); if (numberOfRows > 0) for (i int from 1 to numberOfRows) sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected."); end end end사용자 코드의 행 선택에 대한 세부사항은 이후의 DataGrid selectAll 및 setSelection 함수에 대한 설명을 참조하십시오.
- sortListeners: 함수 참조의 배열입니다.
사용자가 열을 정렬할 때 함수가 순차적으로 호출됩니다. DataGrid enableSort 특성 값이 true인 경우에만 가능한 것과 같이 함수는 정렬이 발생하는 경우에만 호출됩니다.
다음은 각 함수가 따라야 하는 위임 파트입니다.
Delegate SortListener(grid DataGrid in, sortColumn DataGridColumn in) end end- grid
- 정렬된 데이터 눈금입니다.
- sortColumn
- 정렬된 열입니다.
다음은 함수 예입니다.
function mySortListener(grid DataGrid in, sortColumn DataGridColumn in) syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. "); end - startRow: 단추 막대가 있을 때 첫 번째 페이지에 표시할 행을 나타내는 정수입니다. 기본값은 1입니다. 추가 세부사항은 showButtonBar에 대한 항목을 참조하십시오.
- selectionMode: 사용자 또는 코드에서 여러 행을 선택할 수 있는지를 나타내는 상수입니다.
또한 이 상수는 함수 setSelection 및 selectAll이 여러 행을 선택할 수 있는지를 지정합니다.
다음 값 중 하나입니다.
- DataGridLib.MULTIPLE_SELECTION(기본값)
- 사용자는 단일 열을 선택하거나 다음 두 방법을 사용하여 여러 행을 선택할 수 있습니다.
- 첫 번째 행을 클릭한 후 CTRL 키를 누른 상태에서 각 행을 클릭하십시오. 또는
- SHIFT 키를 누른 상태에서 연속된 행 세트의 마지막 행을 클릭하십시오.
선택된 행은 여러 눈금 페이지에 걸쳐 놓일 수 있습니다.
- DataGridLib.SINGLE_SELECTION
- 사용자가 단일 행을 선택할 수 있습니다. 두 번째 행을 선택하면 첫 번째 행이 선택 취소됩니다.
- DataGridLib.DISABLE_SELECTION
- 사용자가 행을 선택할 수 없습니다.
- showButtonBar: 페이지가 다음, 이전, 처음 또는 마지막에 있는지에 상관 없이 다른 페이지를 클릭할 수 있도록
눈금의 맨 아래에 단추 막대 탐색줄를 포함시킬지 여부를 지정하는 부울 값입니다.
showButtonBar 특성 값이 true이면 다음 특성도 관련이 있습니다.
- pageSize: 한 번에 표시할 행 수를 지정합니다.
- startRow: 다른 사용자에게 표시되어야 하는 행을 알려줍니다. 예를 들어 20개의 행이 있고 pageSize = 4, startRow = 6이면 두 번째 위치에 행 6이 있는 두 번째 페이지가 표시됩니다.
showButtonBar 특성은 다음 경우에만 효과가 있습니다.- pageSize 특성 값은 눈금에 사용 가능한 행 수보다 큽니다. 또한
- showScrollBar 특성 값은 false입니다.
볼 수 있는 것보다 사용 가능한 행이 많은 경우 showButtonBar 특성을 false로 설정하고 showScrollBar 특성을 true로 설정하면 사용자가 보이지 않는 행에 액세스할 수 없습니다.
- showCheckBoxes: 시스템 제공 선택란이 표시 가능한지 여부를 나타내는 부울 값입니다.
기본값은 false입니다. 선택란이 표시 가능한 경우 각 행의 왼쪽에 표시됩니다.
런타임 시 showCheckBoxes 특성을 false로 설정해도 사용자의 선택란 선택사항이 유지됩니다. 또한 선택란이 표시 가능한지 여부에 상관 없이 사용자 코드는 항상 다음과 같이 수행될 수 있습니다.
- setChecked 또는 checkAll 함수를 호출하여 숨겨진 일부 또는 모든 선택란을 선택하십시오.
- getChecked 함수를 사용하여 각 행의 선택란에 대한 상태를 검토하십시오.
- showHeader: 눈금 헤더를 표시할지 여부를 나타내는 부울 값입니다. 기본값은 true입니다.
- showScrollBar: 사용자가 다른 행을 탐색할 수 있도록 행을 화면이동 막대와 함께 표시할지 여부를 나타내는 부울 값입니다. 기본값은 false입니다. 이 특성의 값이 true이면 pageSize 특성은 한 번에 표시할 행 수를 지정하고 showButtonBar 특성은 아무 효과가 없습니다.
- manageEditorBehaviors: editorBehavior 위임에 의해 리턴되는 편집기 동작 위젯의 라이프사이클이 눈금에서 관리되는지 여부를 나타내는 부울 값입니다. 기본값은 true입니다.
- refreshBehaviors: 함수 참조의 배열입니다. 데이터 눈금이 렌더링될 때마다 함수가 순차적으로 호출됩니다.
DataGrid 함수
- cancelDataLoader: 데이터 로더에서 필요한 데이터가 사용 불가능한지를 표시하기 위해 예외 핸들러에서 주로 사용됩니다. cancelDataLoader 함수는 이후에 데이터 로드가 호출되는 것을 막지 않지만 다음 두 가지 효과를 가집니다. 이 함수는 대기 중인 데이터 로더의 특성인 애니메이션을 종료하고 마지막으로 제공된 데이터가 있는 눈금을 다시 렌더링합니다.
- checkAll: 모든 시스템 제공 선택란을 선택합니다. 선택란이 숨겨진 상태에서도 이를 선택할 수 있습니다.
- deSelectAll: 현재 선택된 모든 행을 선택 취소합니다. 이 함수는 시스템 제공 선택란에 독립적인 행 선택 메커니즘의 일부입니다.
- getChecked: 시스템 제공 선택란이 선택된 행에서 데이터를 검색합니다.
다음은 함수 시그니처입니다.
function getChecked() returns (any[])현재 주제의 첫 번째 예와 관련하여 스톡 기호를 표시하는 다음 이벤트 핸들러를 고려해 보십시오.function myResponse (e event in) columnRetrieve Stock[]; columnRetrieve = grid.getChecked() as Stock[]; numberOfRows int = columnRetrieve.getSize(); if (numberOfRows > 0) for (i int from 1 to numberOfRows) sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked."); end end endgetChecked 함수는 DataGrid data 특성에 의해 참조되는 레코드를 검색합니다. 그러나 데이터가 리턴되는 순서는 사용자 정렬에 의해 영향을 받는 현재 표시에 따라 다릅니다.
- getCurrentPageIndex: 현재 페이지 번호를 가져옵니다.
다음은 함수 시그니처입니다.
function getCurrentPageIndex() returns (int) - getPageCount: 사용 가능한 페이지의 수를 가져옵니다. 다음은 함수 시그니처입니다.
function getPageCount() returns (int) - getSelection: 현재 선택된 행에서 데이터를 검색합니다.
다음은 함수 시그니처입니다.
function getSelection() returns (any[])현재 주제의 첫 번째 예와 관련하여 사용자가 단추를 클릭하는 데 대한 응답에서 스톡 기호를 표시하는 다음 이벤트 핸들러를 고려해 보십시오.function myResponse (e event in) columnRetrieve Stock[]; columnRetrieve = grid.getSelection() as Stock[]; numberOfRows int = columnRetrieve.getSize(); if (numberOfRows > 0) for (i int from 1 to numberOfRows) sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected."); end grid.deSelectAll(); else sysLib.writeStdOut("Select one or more rows."); end endgetSelection 함수는 DataGrid data 특성에 의해 참조되는 레코드를 검색합니다. 그러나 데이터가 리턴되는 순서는 사용자 정렬에 의해 영향을 받는 현재 표시에 따라 다릅니다.
- goToPage: 지정된 페이지를 표시합니다.
1보다 작거나 같은 페이지 번호를 지정하면 첫 번째 페이지가 표시됩니다.
마지막 페이지보다 크거나 같은 페이지 번호를 지정하면 마지막 페이지가 표시됩니다.
다음은 함수 시그니처입니다.
function goToPage(pageNumber int in) - selectAll: 데이터 눈금에 있는 모든 행을 선택합니다.
- setChecked: 시스템 제공 선택란을 하나 이상 선택합니다.
선택란이 숨겨진 상태에서도 이를 선택할 수 있습니다. 다음은 함수 시그니처입니다.
function setChecked(selection any[] in)setChecked 함수를 호출할 때 데이터 배열에서 요소를 지정하십시오. 예를 들어 다음은 두 가지 방법으로 setChecked 함수를 호출하는 on-construction 함수입니다.function start() grid.setChecked([grid.data[2], grid.data[3]]); // alternative coding myAny ANY[] = [grid.data[2], grid.data[3]]; grid.setChecked(myAny); end - setSelection: 데이터 눈금에서 하나 이상의 행을 선택합니다. 대부분의 경우 눈금을 렌더링하기 전에 미리 설정하기 위해서 선택합니다.
다음은 함수 시그니처입니다.
function setSelection(selection any[] in)setSelection 함수를 호출할 때 데이터 배열에서 요소를 지정하십시오. 예를 들어 다음은 두 가지 방법으로 setSelection 함수를 호출하는 on-construction 함수입니다.function start() grid.setSelection([grid.data[3], grid.data[2]]); // alternative coding myAny ANY[] = [grid.data[3], grid.data[2]]; grid.setSelection(myAny); end행 선택 기능은 DataGrid selectionMode 특성의 설정에 따라 다릅니다. 예를 들어 selectionMode 특성에서 하나만 허용하는데 사용자 코드에서 두 개의 행을 선택한 경우 setSelection 함수에 제출된 첫 번째 항목만 선택됩니다.
- unCheckAll: 모든 시스템 제공 선택란을 선택 취소합니다. 선택란이 숨겨진 상태에서도 이를 선택 취소할 수 있습니다.
DataGrid 도구 팁
- 데이터 눈금 위에 커서를 올려놓을 때마다 도구 팁이 표시되도록 하려면(셀, 행 또는 열에 따라 다르지 않음) 데이터 눈금 전체를 도구 팁에 지정하십시오. 세부사항은 "Rich UI 도구 팁"을 참조하십시오. 도구 팁을 글로벌 위젯으로 선언하고 일부 함수(예: on-construction 함수나 behaviors 또는 headerBehaviors 특성에서 식별된 함수)에서 이를 사용 설정(활성화)하십시오.
- 도구 팁에서 헤더 외부의 주어진 셀, 행 또는 열에 대해 다른 도구 팁 정보를 지정하도록 하려면 도구 팁과 비슷하지만 항상 눈금 도구 팁 제공자 함수를 지정해야 하는 데이터 눈금 도구 팁을 지정할 수 있습니다. 해당 함수는 사용자에게 표시할 컨텐츠를 제공하는 상자를 리턴합니다. 하나의 도구 팁만 지정할 수 있습니다.
- 다음 예에서와 같이 눈금 도구 팁 핸들러를 글로벌하게 선언하십시오. 이는 눈금 도구 팁 제공자(호출할 함수) 및 지연(풍선 시작과 제공자 호출 사이의 시간(밀리초))을 참조합니다.
gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };해당 선언에는 다음 import 문이 포함되어야 합니다.import egl.rui.widgets.DataGridToolTip; - behaviors 특성에 대한 배열을 지정할 때 눈금 도구 팁 핸들러에 있는 함수를 참조합니다. 이 예에서 해당 함수는 gridToolTip.setToolTips입니다.
- DataGridToolTip provider 특성에 지정된 이름으로 눈금 도구 팁 제공자 함수를 작성하십시오(이 예에서는
tooltipText 함수임). 눈금 도구 팁 제공자 함수에는 다음 위임 파트에 아웃라인된 매개변수와 리턴 값 특성이 있습니다.
Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in, td Widget in) returns(Box) end- row
- 함수에 제공된 행입니다. 이 입력 인수를 사용하여 특정 값을 액세스할 수 있습니다.
예를 들어 데이터가 다음과 같은 경우를 고려해 보십시오.
stocks Stock[] = [ new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false} ];제공자 함수 내에서 다음과 같은 코드를 작성하여 커서를 올려 놓아 풍선 도움말이 표시될 행을 판별할 수 있습니다.if (rowData.Quote as int == 200) // place content in a box (the tooltip) and return the tooltip end - fieldName
- 함수에 제공된 열의 이름입니다.
- td
- 눈금 셀을 나타내는 내부 위젯입니다.
- 데이터 눈금 도구 팁을 사용하지 않습니다. 이를 선언하는 즉시 사용으로 설정됩니다.
- "Rich UI 메모리 관리"에 설명된 문제를 알고 있어야 합니다.
예
다음은 작업공간에서 시도할 수 있는 예입니다.
package client;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.DataGrid;
import com.ibm.egl.rui.widgets.DataGridColumn;
import com.ibm.egl.rui.widgets.DataGridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import egl.ui.rui.RUIHandler;
Record Stock
Symbol STRING;
Quote DECIMAL(5,2);
NumShares INT;
end
handler MyDataGrid1 type RUIhandler { initialUI = [ grid ],
onConstructionFunction = start }
stockList Stock[] = [
new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 },
new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 },
new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ];
grid DataGrid {
data = stockList as any[],
behaviors = [myDataGridToolTip.setToolTips],
pageSize = 15,
columns = [
new DataGridColumn { name = "Symbol", displayName = "Symbol Display"},
new DataGridColumn { name = "Quote", displayName = "Quote Display"},
new DataGridColumn { name = "NumShares", displayName = "NumShares Display" }]};
myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
tooltipBox Box{columns=1, width=475};
function start()
end
function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box)
tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
tooltipBox.children = [ tooltipArea ];
tooltipArea.text =
"In function tooltipText (a tooltip provider):" +
"\n fieldName is the column name ('"+fieldName+"')." +
"\nYou can access cell content:" +
"\n td.innerText is '"+td.innerText+"'. \nThanks to EGL dynamic access" +
"\n rowData[fieldName] is also '"+rowData[fieldName] + "'.";
return (tooltipBox);
end
end