Tabulator Tree 데이터 세팅 및 노드 추가 처리 스크립트

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

}

}

}

}

}

}

}