SlickGrid 정렬 관련 구현

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();