본문 바로가기
Javascript

SlickGrid 정렬 관련 구현

by Dokon Jang 2022. 6. 29.
반응형

SlickGrid로 정렬 기능을 추가하고, 프그램으로 정렬을 하던지 또는 정렬을 초기화 하는 방법에 대해서 알아보겠습니다.
 

아래의 코드는 SlickGrid 생성 및 정렬 로직입니다.
// 그리드 옵션
 var options = {
	editable: true,
	enableAddRow: false,
	enableCellNavigation: true,
	autoHeight: false,
	enableColumnReorder: false
};
 
 // 그리드 컬럼
 var columns = [
		       {
		            id: "COL_ID_01",
		            field: "COL_ID_01",
		            width:80,
		            cssClass: "text_center",
		            formatter: verCellMergedFormatter,
		            sortable: true,
		            name: "컬럼1" 
		        },
		        {
		        	id: "COL_ID_02",
		        	field: "COL_ID_02",
		        	width:50,
		        	cssClass: "text_center",
		        	formatter: verCellMergedFormatter,
		        	sortable: true,
		        	name: "컬럼2" 
		        },
		        {
		        	id: "COL_ID_03",
		        	field: "COL_ID_03",
		        	width:60,
		        	cssClass: "text_center",
		        	formatter: verCellMergedFormatter,
		        	sortable: true,
		        	name: "컬럼3" 
		        },
		        {
		        	id: "COL_ID_04",
		        	field: "COL_ID_04",
		        	width:70,
		        	cssClass: "text_center",
		        	formatter: verCellMergedFormatter,
		        	sortable: true,
		        	name: "컬럼4" 
		        }
];

// 그리드 DataView 생성
var dataView = new Slick.Data.DataView();

// 그리드 생성
var grid = new Slick.Grid("#gridContainer", dataView, columns, options);

// 그리드 헤드 클릭 시 정렬
grid.onSort.subscribe(function (e, args) {
		
	var data = dataView.getFilteredItems();

	data.sort(function (dataRow1, dataRow2) {
		var field = args.sortCol.field;
		var sign = args.sortAsc ? 1 : -1;
		var value1 = dataRow1[field];
		var value2 = dataRow2[field];

		if(value1 == undefined) value1 = "";
		if(value2 == undefined) value2 = "";

		var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
		return result;
	});

	grid.invalidate();
	grid.render();
});

 

그리드의 헤더를 클릭하지 않고 코딩으로 정렬하는 방법입니다.
grid.setSortColumn("COL_ID_01", true); //  컬럼 ID가 "COL_ID_01"에 대해서 오림차순(ASC) 정렬
grid.setSortColumn("COL_ID_01", false); //  컬럼 ID가 "COL_ID_01"에 대해서 내림차순(DESC) 정렬

 

그리드의 정렬을 해제하는 방법입니다.
grid.setSortColumns([]);

 

그리드의 정렬된 정보를 얻는 방법입니다.
var sortColumns = grid.getSortColumns();

댓글0