그리드 확장

트리 그리드(Tree2)

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

Step 1: 트리의 필수 옵션 설정

columns에 설정한 key 값의 트리 UI 를 level1의 위치에 표현하는 true/false 옵션입니다.

① type : 'tree' 트리 모양으로 사용하기 위한 필수 설정 옵션
② mode : 'parentchild' 해당 트리를 부모와 자식 노드로 보여주기 위한 필수적인 옵션으로 문자열 값인 parentchild로만 사용 가능
③ key : 'code' 트리 모양으로 보여줄 그리드 생성 컬럼의 key 값
④ parentkey : 'parent' 해당 트리의 데이터를 부모 노드로 표시할 필수적인 key 값

qcell.setTree({ 
	type: 'tree',
	mode : 'parentchild',
	columns: [
		  {
		     key: 'code',
		     parentkey : 'parent',
		     ...
		  },
	
	...
})

Step 2: 트리의 movefirst 옵션 설정

movefirst: 트리를 생성할 때, 트리 key 컬럼을 가장 앞쪽에 배치하여 표시할지 여부를 true 또는 false 값으로 설정하는 옵션입니다.

qcell.setTree({ 
	type: 'tree',
	movefirst : false
	...
})

Step 3: 트리의 treeUIColumn 옵션 설정

treeUIColumn: 지정된 컬럼을 기준으로 트리 형태를 보여주는 옵션입니다.

qcell.setTree({ 
	type: 'tree',
	mode : 'parentchild',
	treeUIColumn : 'name', 
	columns: [
		  {
		     key: 'code',
		     expand: true,
		     parentkey : 'parent',
		     ...
		  },
	
	...
})

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

{code:"B0001", level:1, name:"비공공공일", newYn:"Y", "phone":"01011112222"},
{code:"B0011", parent:"B0001", level:2, name:"비공공일일",newYn:"Y", "phone":"01011112222"},

그리드 json 데이터에 아래와 같이 설정해 줍니다.

부모 노드는 트리 생성 컬럼의 key 값과 해당 노드의 level을 설정합니다.
자식 노드는 트리 생성 컬럼의 key 값, 부모의 parentkey로 설정한 부모 노드의 key 값, 그리고 해당 노드의 level을 설정합니다.

'setTree의 데이터 설정'

var arrData = 
[
	{code:"B0001", level:1, name:"비공공공일", newYn:"Y", "phone":"01011112222"},
	{code:"B0011", parent:"B0001", level:2, name:"비공공일일",newYn:"Y", "phone":"01011112222"},
	{code:"B0111", parent:"B0011", level:3, name:"비공일일일",newYn:"Y", "phone":"01011112222"},
	{code:"B1111", parent:"B0111", level:4, name:"비일일일일",newYn:"Y", "phone":"01011112222"},
	{code:"B1112", parent:"B0111", level:4, name:"비일일일이",newYn:"Y", "phone":"01011112222"},
	{code:"B1113", parent:"B0111", level:4, name:"비일일일삼",newYn:"Y", "phone":"01011112222"},
	{code:"B1115", parent:"B0111", level:4, name:"비일일일오",newYn:"Y", "phone":"01011112222"},
	{code:"B0002", level:1,name:"비공공공이", newYn:"N"},
	{code:"B0003", level:1,name:"비공공공삼", newYn:"N"},
	{code:"B0004", level:1,name:"비공공공사", newYn:"N"},
	{code:"B0041", parent:"B0004", level:2, name:"비공공사일", newYn:"Y"},
	{code:"B0411", parent:"B0041", level:3, name:"비공사일일", newYn:"Y"},
	{code:"B0005", level:1,name:"비공공공오", newYn:"Y"},     
	{code:"B0051", parent:"B0005", level:2, name:"비공공오일", newYn:"N"},
	{code:"B0052", parent:"B0005", level:2, name:"비공공오이", newYn:"N"},
	{code:"B0006", level:1, name:"비공공공육", newYn:"Y"}
];

Step 5: 트리의 펼침 여부 설정

expand: true: 초기 로딩 시 트리의 펼침 여부를 설정하는 옵션입니다.

qcell.setTree({ 
	type: 'tree',
	mode : 'parentchild',
	treeUIColumn : 'name', 
	columns: [
		  {
		     key: 'code',
		     expand: true,
		     parentkey : 'parent',
		     ...
		  },
	
	...
})

Step 6: 트리의 CRUD 기능

트리에서 노드 추가하기

insertTreeNode지정한 부모 노드 아래 또는 새로운 레벨에 노드를 추가합니다.

qcell.insertTreeNode(['B0011'],{code:'B0112',newYn:"N", parent:'B0011',level:3,name:'비공일일이'});
부모 노드인 "B0011"에 "B0112" key 값으로 level:3 위치에 노드를 추가한다.

qcell.insertTreeNode([''],{code:'B0007',level:1,name:'비공공공칠'},);
[''] 빈 값으로 설정하고 parent가 없기 때문에 level 1위치에 추가



트리에서 노드 지우기

removeTreeNode지정한 트리 컬럼 key 값의 노드를 트리에서 삭제합니다

Ex) qcell.removeTreeNode(['B1111']);



트리에서 노드 수정하기

updateTreeNode: 지정한 트리 컬럼 key 값의 노드를 수정합니다.

Ex) qcell.updateTreeNode(['B1111'],{name:'차일드 입니다.'});

트리의 노드 위치를 변경하기

moveTreeNode: 지정한 노드의 키 값과 노드의 순서를 기준으로 하여 트리 내에서 노드의 위치를 조정합니다.

Ex) qcell.moveTreeNode(['B0112'],0);

---