jsTree grid plugin (jsGrid) 사용법

jsGrid

jsTree에 grid plugin 사용해보기로한다. 

사실 이것저것 기능을 넣었더니 화면이 잘 깨져서... 조금 안타까웠다 ㅜㅜ

 

 

기본 사용법 

plugin에 선언, gird에 내용을 입력한다.

$('#tree').jstree({
 'plugin' : ["grid"], //plugin에 grid 추가
 'grid':{
	'columns':[
 		{width: 600, header: "제목", value:"title"}, 	//값 = title
 		{width: 200, header: "내용", value:"content"},
 		{width: 200, header: "비고", type:"input", value: "note"} //input type인 column
    ],
 }
});

 

값은 다음과 같이 넣어준다.

 

// data 항목아래 컬럼들 값을 입력한다.
var gridData = {id:"1",parent:"#", data:{
title:"제목"
content:"내용"
note: "비고"} 
};
//tree에 값 바인딩
$("#tree").jstree(true).settings.core.data = gridData;

 

기본만쓰면 얼마나 좋을까 하지만 우리는.. 

커스텀을 해야한다..

 

칼럼 커스텀 (select, css)

	
    'columns':[
 		{width: 200, header: "내용", value:"content", wideValueClass:"valClass"},
    ],
    
    //데이터
    {id:,parent,..,
    data:{
    	content:"<select>
                    <option value = ''>선택</option>
                    <option value = '1'>1</option>
                    <option value = '2'>2</option>
                    <option value = '3'>3</option>
                 </select>",
        widValueClass:"yellow"    
        },..
     }
     
     //css
     .yellow{background:#fff59d}

 

대충 내가 만든 jsGrid는 이렇게 생겼다.

 

 

이거 말고도 이것저것 손대서 코드가 굉장히 어려워졌는데..

생략하기로 한다.

 

 

끝