그리드 확장

트리 그리드(Tree)

QCELL은 트리 그리드 형태의 기능을 제공합니다.

Step 1: 트리의 level 컬럼 key 설정

{width: '13%', type:'static', title: ['메뉴 레벨','메뉴 레벨'], key: 'level', datatype:"number"}

트리의 level을 설정하는 level 옵션에 사용할 컬럼의 키를 지정해 줍니다.

qcell.setTree({ 
	level :  'level', // 레벨 정보가 들어가 있는 컬럼
	...
})

Step 2: 트리의 depth 컬럼 key 설정

{width : '20%', title : ['메뉴명','메뉴명'], styleclassname: {"data": "align-left"}, key : 'lev1'}

트리 기준으로 사용할 컬럼의 key 값 데이터에 1이라는 숫자를 필수적으로 사용합니다.
이는 setTree를 통해 컬럼의 key 값의 depth 순서를 설정하도록 기능이 구현되어 있기 때문입니다.

Ex) lev1, test1, sample1...

qcell.setTree({ 
		columns: [
		{
			key: 'lev1',   //1 depth
			expand: false  //초기 로딩 시 펼침여부
		},
		{
			key: 'lev2',  //2 depth
			expand: false,
		},
		{
			key: 'lev3',  //3 depth
			expand: false,
		},... })

이후 setTree의 columns key 값은 트리 기준으로 사용할 컬럼의 key 값 데이터에 1, 2, 3...등 숫자를 붙여 설정해 주시길 바랍니다.

Ex) lev1, lev2, lev3, lev4...

'setTree'

qcell.setTree({ 
	  sort : 'none', //정렬 : 'asc' or 'desc', 'none'
	  level :  'level', // 레벨 정보가 들어가 있는 컬럼
		columns: [
		{
			key: 'lev1',,   //1 depth
			expand: false  //초기 로딩 시 펼침여부
		},
		{
			key: 'lev2',,  //2 depth
			expand: false,
		},
		{
			key: 'lev3',,  //3 depth
			expand: false,
		},
		{
			key: 'lev4',,  
			expand: false,
		},...
			]
	
	});

'setTree의 데이터 설정'

사용할 데이터를 설정한 depth(lev1, lev2, lev3...)에 넣고 level을 1, 2, 3... 사용할 순서를 number 또는 string인 숫자값으로 표시하여 설정해 주시길 바랍니다.

var menu_data = [
		{
			"code": "MN000000",
			"lev1": '관리기능',
			"lev2": '',
			"lev3": '',
			"lev4": '',
			"lev5": '',
			"lev6": '',
			"useYn": "Y",
			"level": 1,
			"initYn": "Y",
			"searchYn": "Y",
			"newYn": "Y",
			"saveYn": "Y",
			"delYn": "Y",
			"seq": 1,
			
		
		},
		
			{
			"code": "MN000001",
			"lev1": '관리기능',
			"lev2": '시스템관리',
			"lev3": '',
			"lev4": '',
			"lev5": '',
			"lev6": '',
			"useYn": "Y",
			"level": 2,
			"initYn": "Y",
			"searchYn": "Y",
			"newYn": "Y",
			"saveYn": "Y",
			"delYn": "Y",
			"seq": 1,
			
		},
			{
			"code": "MN000024",
			"lev1": '관리기능',
			"lev2": '시스템관리',
			"lev3": '공통코드 조회',
			"lev4": '',
			"lev5": '',
			"lev6": '',
			"useYn": "Y",
			"level": 3,
			"initYn": "Y",
			"searchYn": "Y",
			"newYn": "Y",
			"saveYn": "Y",
			"delYn": "Y",
			"seq": 1,
			
		},...
	]

Step 3: 트리의 CRUD 기능

트리에서 노드 추가하기

qcell.insertTreeNode (["관리기능","시스템관리","제공기관 관리",""],
{
...
}, "first"); // 맨 뒤에 넣는 옵션 설정 값은 "last"=> 기본 설정 값은 last


트리에서 노드 지우기

qcell.removeTreeNode (["관리기능","시스템관리","제공기관 관리","test1"]);


트리에서 노드 수정하기

qcell.updateTreeNode (["관리기능", "시스템관리", "공통코드 조회"],
{
...
});

---