AX5UI - GRID 2 (설정 상세)

그리드 설정에 대한 상세한 내용을 알아 보겠습니다.

1. 헤더 그룹

그리드의 colums 설정값으로 헤더 그룹을 만들 수 있습니다. 아래 예는 기본 정보 그룹에 내에 주행거리, 금액을 가지는 예입니다.

 

- 헤더와 데이터행 모두 기본 정보를 가지게 되므로 멀티 라인이 됩니다.

 

columns: [
    {key: "date", label: "날짜", formatter: "date", align: "center"},
    {key: "type", label: "구분", align: "left"},
    {key: "repair", label: "정비내역", align: "center"},
    {key: "amount", label: "<strong>주유량</strong>", align: "center"},
    {
        key: "basic", label: "기본정보", align: "center", columns: [
            {key: "mileage", label: "주행거리(km)", align: "center"},
            {key: "price", label: "금액(원)", formatter: "money", align: "center"}
        ]
    },
    {key: "note", label: "비고", align: "center"}
]

 

그룹 컬럼이 key 를 가지면 헤더와 데이터 모두 다중라인이 되고, 키를 가지지 않으면 헤더만 다중라인으로 표현 됩니다.

- 기본정보 헤더 그룹이 key 를 가지지 않으므로 헤더만 다중라인이 됩니다.

 

{
  label: "기본정보", align: "center", columns: [
    {key: "mileage", label: "주행거리(km)", align: "center"},
    {key: "price", label: "금액(원)", formatter: "money", align: "center"}
 ]
},

 

 

 

2. Frozen Column & Row

엑셀에서의 틀고정과 같은 기능입니다. 스크롤시 컬럼과 열에 대한 고정위치를 지정할 수 있습니다. 인덱스는 1부터 시작 합니다. frozonColumnIndex:3 은 3열 이후 부터만 스크롤 됩니다. frozonRowIndex: 2 는 2행 이후 부터만 스크롭니다.

 

/* 그리드 설정 지정 */
firstGrid.setConfig({
    target: $('[data-ax5grid="first-grid"]'),
    frozenColumnIndex: 3,
    frozenRowIndex: 2,

 

 

그룹된 헤더에 내에 열에 틀고정을 하게 되면 그룹핑된 헤더가 나누어지게 됩니다.

 

3. 헤더값과 데이터 값의 셀내 정렬 방식

columns 설정내에서 각 컬럼별로 align: "center" 를 사용해서 개개의 컬럼 단위로 헤더값을 정렬해 보았습니다. 이 정렬값을 데이터도 동일하게 영향을 주었습니다. 이제 헤더 정보의 정렬과 데이터의 정렬을 별로로 하능 방법 입니다. columns 설정 밖의 그리드 전체 설정 부분에 다음 정보를 입력하면 헤더 전체를 "center" 로 정렬합니다. 이렇게 해두고 columns 내에서 align: "left" 등으로 두면 데이터 내용만 left 로 정렬이 됩니다. 이 방법으로 헤더와 데이터의 정렬을 다르게 줄 수 있습니다.

 

header: {
    align: "center"
},

4. Sort 컬럼(행의 순서를 정렬)

헤더를 클릭하면 그 헤더 열의 그리드내 데이터 값에 따라 그리드 행이 정렬되는 기능입니다. sortable: true 를  그리드 설정 부분에 선언하면 모든 컬럼에 정렬기능이 들어 갑니다. 필요한 컬럼에만 정렬 기능을 사용하기 위해서는 columns  데이터내에 sortable: true 를 사용합니다.

 

target: $('[data-ax5grid="first-grid"]'),
sortable: true, //  모든 컬럼에 정렬 기능 
columns: [
    {key: "date", label: "날짜", sortable:true, formatter: "date", align: "center"}, // 이 컬럼에만 정렬 기능

 

 

 

4. 헤더와 데이터 행의 높이를 지정

header 설정 정보 내에 columnHeight 값을 주어 헤더 행의 높이를 지정할 수 있습니다. body 설정정보를 추가하고 columnHeight 를 지정함으로써 데이터 행의 높이를 지정할 수 있습니다. 또한 body 설정 정보내에 align 을 지정하여 데이터의 셀내에서의 정렬 방식을 지정할 수 있습니다.

 

header: {
    align: "center",
    columnHeight: 40
},
body: {
    align: "center",
    columnHeight: 40
}

 

※ 행 높이를 늘리면 행 선택 체크박스의 높이 까지 늘어나서 모양이 좀 안 좋습니다. 체크박스 크기는 그대로 두고 행 높이만 늘리는 방법이 있을지 알아봐야 겠습니다.

 

5. Grid Height

그리드의 높이를 동적으로 변경할 수 있습니다. 아래의 예는 그리드를 그릴 <div> 의 외부에 id="grid-parent" 인
<div> 로 둘러싸고, 그리드의 높이를 변경할 때 외부  <div>높이를 "auto" 로 두고 변경합니다.

그리드 높이를 100%로 할때는 외부 그리드의 높이를 500으로 고정하고 그 안에서 100% 만 되는 것 같습니다.
그리드의 너비는 100% 로 주면 브라우저의 크기를 변경하면 자동으로 사이즈가 변경되는데, 높이는 안되는것 같습니다.

 

	$('[data-set-height]').click(function () {
		var height = this.getAttribute("data-set-height");
		if (height == "100%") {
			$("#grid-parent").css({height: 500});
		} else {
			$("#grid-parent").css({height: "auto"});
		}
		firstGrid.setHeight(height);
	});
});
</script>
</head>

<div style="position: relative;height:400px;outline:solid 1px red;" id="grid-parent">
<div data-ax5grid="first-grid" data-ax5grid-config="{}" style="width:100%; height:300px;"></div>
</div>
<div style="padding: 10px;">
	<button class="btn btn-default" data-set-height="300">setHeight(300px)</button>
	<button class="btn btn-default" data-set-height="400">setHeight(400px)</button>
	<button class="btn btn-default" data-set-height="800">setHeight(800px)</button>
	<button class="btn btn-default" data-set-height="100%">setHeight(100%)</button>
</div>

 

 

※ 참고

$('[data-set-height]') 는 "data-set-height" 속성을가지는 모든 엘리먼트를 선택합니다.

$('[data-set-height]').click(function () {}); 은 선택된 엘리먼트에 클릭 이벤트 핸들러를 붙입니다.

※ 전체소스

grid_column.zip

다운로드