1. Tabulator Grid 객체 생성
cfgItemSheet = new Tabulator("#sheet-containerItem", {
height:"750px", // virtualDom 사용위해 필수
layout:"fitColumns",
headerSort:false,
selectable: 1,
dataTree:true,
dataTreeStartExpanded:true,
rowClick:function(e, row){
//selected Row 없어지는 것 방지
var selectedData = cfgItemSheet.getSelectedData();
if(selectedData == "") row.toggleSelect();
},
ajaxConfig: "POST",
ajaxContentType:"json",
ajaxResponse:function(url, params, response) {
if (response.Message === "OK") {
$('#message').css("color", "#FFFFFF");
$('#message').html("* 조회 완료 : 총 " + response.Data.length + "건");
return bindListToTree(response.Data);
} else {
$('#message').css("color", "#FF3A00");
$('#message').html("* " + response.Message);
return [];
}
},
columns:[
{
title:"항목관리",
columns:[
{
title:"번호",
field:"sSeq",
width:80,
minWidth:60,
hozAlign:"left"
},
{
title:"상태",
field:"sStatus",
width:80,
minWidth:60,
hozAlign:"center",
download:false,
formatter: "lookup",
formatterParams: {
"D":"삭제", "I":"입력", "U":"수정", undefined:""
}
},
{
title: "항목명",
field: "itemNm",
hozAlign:"center",
editor:"input",
cellEdited:function(cell) {
var rowData = cell.getRow().getData();
if (rowData.sStatus != "I")
cellEditedCallback(cell, "U", 0);
},
validator : ["maxLength:100"]
},
{
title: "항목ID",
field: "itemId",
download: true,
hozAlign:"center",
visible : false
},
{
title: "상위항목ID",
field: "itemTop",
hozAlign:"center",
download: true,
visible : false
},
{
title: "레벨",
field: "itemLvl",
hozAlign:"center",
download: true,
visible : false
},
{
title: "정렬순서",
field: "sortOrder",
hozAlign:"center",
editor:"input",
cellEdited:function(cell) {
var rowData = cell.getRow().getData();
if (rowData.sStatus != "I")
cellEditedCallback(cell, "U", 0);
},
validator : ["integer", "maxLength:10"]
},
{
title: "사용여부",
field: "useYn",
hozAlign:"center",
editor:"select",
formatter: "lookup",
formatterParams: {"Y":"사용", "N":"미사용"},
editorParams:{
values:{"Y":"사용", "N":"미사용"}
},
cellEdited:function(cell) {
var rowData = cell.getRow().getData();
if (rowData.sStatus != "I")
cellEditedCallback(cell, "U", 0);
}
}
]
}
]
});
2. 노드 추가 관련 스크립트
//최상위 항목 등록
function addActionHandlerUp(ev) {
var newSSeq = searchTreeDataLength(cfgItemSheet) + 1;
cfgItemSheet.addRow({ "sStatus":"I", "sDelCheck":0, "sSeq":newSSeq, "itemLvl":"0", "itemId":"", "itemTop":vGrpId, "useYn":"Y"}, true);
//selected Row 체크
var rows = cfgItemSheet.getRows();
rows[0].toggleSelect();
}
//하위 항목 등록
function addActionHandlerDown(ev) {
var sheetData = cfgItemSheet.getData();
var selectedData = cfgItemSheet.getSelectedData()[0];
if(selectedData.sStatus == "I"){
$('#message').html("* 상위레벨을 먼저 저장해야 합니다.");
}
else if(parseInt(selectedData.itemLvl, 10) >= 2){
$('#message').html("* 3레벨까지만 생성이 가능합니다.");
}
else{
//Tree Data Row 추가
sheetData = addSelectedTreeDataRow(cfgItemSheet);
//Tree Data 세팅 및 세팅 후 selected Row 처리
cfgItemSheet.setData(sheetData).then(function(){
if(cfgItemSheet.getDataCount() > 0){
//신규 생성 Tree Data Row Selected
selectedTreeNewRow(cfgItemSheet);
}
});
}
}
3. 저장시 관련 스크립트
function saveActionHandler(ev) {
ev.preventDefault();
// 입력/수정/삭제 할 행
let rows = searchTreeData(cfgItemSheet, "sStatus", ["D", "I", "U"]);
//변경된 Row의 데이터를 JSON 형태로 받음.
//var jsonString = cfgItemSheet.GetSaveJson();
if(rows.length < 1) {
$('#message').html("* 저장할 데이터가 없습니다!");
return;
}
// 신호장치명, 장치코드, 정렬순서 공백 체크
let itemNmRows = searchTreeData(cfgItemSheet, "itemNm", [undefined, ""]);
if (itemNmRows.length > 0) {
alert("항목명을 확인해주십시오!");
return;
}
let sortOrderRows = searchTreeData(cfgItemSheet, "sortOrder", [undefined, ""]);
if (sortOrderRows.length > 0) {
alert("정렬순서를 확인해주십시오!");
return;
}
if(confirm("변경하신 항목관리 정보를 저장하시겠습니까?")) {
let obj = {
schGrpId : vGrpId,
data: rows
};
cfgItemSheet.setData("/cfgItemAction.do", obj, "POST").then(function(){
if(cfgItemSheet.getDataCount() > 0){
var rows = cfgItemSheet.getRows();
rows[0].toggleSelect();
}
});
}
}
4. Tree 관련 스크립트
//list데이터 구조를 Tree데이터 구조로 변환하여 리턴
function bindListToTree(listData){
var treeData = new Array();
var itemLvl1Cnt = 0;
var itemLvl2Cnt = 0;
if(listData != null && listData.length > 0){
for(var i = 0 ; i < listData.length ; i++){
var map = listData[i];
//1레벨 세팅
if(map.itemLvl == 0) {
treeData[itemLvl1Cnt++] = map;
itemLvl2Cnt = 0;
}
//2레벨 세팅
else if(map.itemLvl == 1) {
var lvl1Map = treeData[itemLvl1Cnt - 1];
var lvl1SubList = lvl1Map._children;
if(lvl1SubList == undefined) {
lvl1SubList = new Array();
}
lvl1SubList[lvl1SubList.length] = map;
lvl1Map._children = lvl1SubList;
treeData[itemLvl1Cnt - 1] = lvl1Map;
itemLvl2Cnt++;
}
//3레벨 세팅
else if(map.itemLvl == 2) {
var lvl1Map = treeData[itemLvl1Cnt - 1];
var lvl1SubList = lvl1Map._children;
var lvl2Map = lvl1SubList[itemLvl2Cnt - 1];
var lvl2SubList = lvl2Map._children;
if(lvl2SubList == undefined) {
lvl2SubList = new Array();
}
lvl2SubList[lvl2SubList.length] = map;
lvl2Map._children = lvl2SubList;
lvl1SubList[itemLvl2Cnt - 1] = lvl2Map;
lvl1Map._children = lvl1SubList;
treeData[itemLvl1Cnt - 1] = lvl1Map;
}
}
}
return treeData;
}
//Tree데이터 구조를 list데이터 구조로 변환하여 리턴
function bindTreeToList(treeData){
var listData = new Array();
var listCnt = 0;
if(treeData != null && treeData.length > 0){
for(var i = 0 ; i < treeData.length ; i++){
var lvl1Map = treeData[i];
listData[listCnt++] = lvl1Map;
//1레벨 하위항목
if(lvl1Map._children != undefined) {
for(var j = 0 ; j < lvl1Map._children.length ; j++){
var lvl2Map = lvl1Map._children[j];
listData[listCnt++] = lvl2Map;
//2레벨 하위항목
if(lvl2Map._children != undefined) {
for(var k = 0 ; k < lvl2Map._children.length ; k++){
var lvl3Map = lvl2Map._children[k];
listData[listCnt++] = lvl3Map;
}
}
}
}
}
}
return listData;
}
//Tree데이터에서 조건에 맞는 데이터를 찾아 list데이터 구조로 변환하여 리턴
function searchTreeData(vSheet, vField, vParamArr){
var treeData = vSheet.getData();
var listData = bindTreeToList(treeData);
var searchData = new Array();
var searchCnt = 0;
if(listData != null && listData.length > 0){
for(var i = 0 ; i < listData.length ; i++){
var map = listData[i];
for(var j = 0 ; j < vParamArr.length ; j++){
if(map[vField] == vParamArr[j]){
searchData[searchCnt++] = map;
}
}
}
}
return searchData;
}
//Tree데이터의 총 length를 리턴
function searchTreeDataLength(vSheet){
var treeData = vSheet.getData();
var listData = bindTreeToList(treeData);
return listData.length;
}
//선택된 Tree Data Row 추가
function addSelectedTreeDataRow(vSheet){
var sheetData = vSheet.getData();
var selectedData = vSheet.getSelectedData()[0];
var itemLvl = parseInt(selectedData.itemLvl, 10) + 1;
var itemTop = selectedData.itemTop;
//Tree Data Row 추가
for(var i = 0 ; i < sheetData.length ; i++){
var lvl1Map = sheetData[i];
var newSSeq = searchTreeDataLength(vSheet) + 1;
//1레벨 항목 확인
if(lvl1Map.itemId == selectedData.itemId){
var newItemTop = "";
var newItemLvl = 0;
if(lvl1Map._children != undefined){
newItemTop = lvl1Map.itemId;
newItemLvl = parseInt(lvl1Map.itemLvl, 10) + 1;
}
else{
lvl1Map._children = new Array();
newItemTop = lvl1Map.itemId;
newItemLvl = parseInt(lvl1Map.itemLvl, 10) + 1;
}
lvl1Map._children[lvl1Map._children.length] = {"sStatus":"I", "sDelCheck":0, "sSeq":newSSeq, "itemLvl":newItemLvl, "itemId":"", "itemTop":newItemTop, "useYn":"Y"};
}
else if(lvl1Map._children != undefined) {
for(var j = 0 ; j < lvl1Map._children.length ; j++){
var lvl2Map = lvl1Map._children[j];
//2레벨 항목 확인
if(lvl2Map.itemId == selectedData.itemId){
var newItemTop = "";
var newItemLvl = 0;
if(lvl2Map._children != undefined){
newItemTop = lvl2Map.itemId;
newItemLvl = parseInt(lvl2Map.itemLvl, 10) + 1;
}
else{
lvl2Map._children = new Array();
newItemTop = lvl2Map.itemId;
newItemLvl = parseInt(lvl2Map.itemLvl, 10) + 1;
}
lvl2Map._children[lvl2Map._children.length] = {"sStatus":"I", "sDelCheck":0, "sSeq":newSSeq, "itemLvl":newItemLvl, "itemId":"", "itemTop":newItemTop, "useYn":"Y"};
}
}
}
}
return sheetData;
}
//신규 생성 Tree Data Row Selected
function selectedTreeNewRow(vSheet){
var treeDataLength = searchTreeDataLength(vSheet);
var rows = vSheet.getRows();
for(var i = 0 ; i < rows.length ; i++){
var row1 = rows[i];
//1레벨 selected
if(parseInt(row1.getData().sSeq, 10) == treeDataLength){
row1.select();
}
else if(row1.getTreeChildren().length != undefined){
for(var j = 0 ; j < row1.getTreeChildren().length ; j++){
var row2 = row1.getTreeChildren()[j];
//2레벨 selected
if(parseInt(row2.getData().sSeq, 10) == treeDataLength){
row2.select();
}
else if(row2.getTreeChildren().length != undefined){
for(var k = 0 ; k < row2.getTreeChildren().length ; k++){
var row3 = row2.getTreeChildren()[k];
//3레벨 selected
if(parseInt(row3.getData().sSeq, 10) == treeDataLength){
row3.select();
}
}
}
}
}
}
}