Tabulator Tree에 체크박스 추가(Tree node 및 header)

* Tabulator Tree 세팅은 아래의 이전 글 참조

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

1.Tabulator 생성시 columns에 아래 체크박스 컬럼 추가

            {

                title:"매핑여부",

                field:"mappingGubun",

                width:80,

                hozAlign:"center",

                download:false,

                vertAlign:"middle",

                editor:"tickCross",

                formatter:"tickCross",

                formatterParams: {

                    allowTruthy:true,

                    tickElement:"<input type='checkbox' checked>",

                    crossElement:"<input type='checkbox'>"

                },

                cellEdited:function(cell) { 

                    if (cell.getValue())

                        checkedTreeNode(menuMngSheet, cell, 1); //해당 체크 박스 및 하위 체크박스 체크

                    else

                        checkedTreeNode(menuMngSheet, cell, 0); //해당 체크 박스 및 하위 체크박스 체크해제

                },

                headerFilter:"tickCross",

                headerFilterEmptyCheck:function(value){

                    fnHeaderCheck(value); //체크박스 전체 체크

                    return true;

                }

            },

2. Tabulator Tree 체크박스 관련 함수 추가(3레벨 메뉴까지 있는 Tree를 기준으로 하였음. 상황에 맞게 수정)

//Tree 체크박스 체크시 하위 노드 체크기능

function checkedTreeNode(vSheet, cell, vCheckValue){

    var rows = vSheet.getRows();

    

    var row = cell.getRow();

    var sSeq = row.getData()["sSeq"];

    

    var isChecked = false;

    var isCheckedLvl = -1;

    var isPass = false;

    if(rows != null && rows.length > 0){

        //1레벨 확인

        for(var i = 0 ; i < rows.length ; i++){

            var lvl1Row = rows[i];

            var lvl1Children = rows[i].getTreeChildren();

            

            if(lvl1Row.getData()["sSeq"] == sSeq && !isPass){

                isChecked = true;

                isCheckedLvl = lvl1Row.getData()["menuLvl"];

                if(lvl1Row.getCell("mappingGubun")){

                    cellEditedCallback(lvl1Row.getCell("mappingGubun"), "U", vCheckValue);

                }

            }

            if(lvl1Children != undefined){

                //2레벨 확인

                for(var j = 0 ; j < lvl1Children.length ; j++){

                    var lvl2Row = lvl1Children[j];

                    var lvl2Children = lvl2Row.getTreeChildren();

                    

                    if((lvl2Row.getData()["sSeq"] == sSeq || (isChecked && isCheckedLvl != lvl2Row.getData()["menuLvl"])) && !isPass){

                        isChecked = true;

                        isCheckedLvl = isCheckedLvl == -1 ? lvl2Row.getData()["menuLvl"] : isCheckedLvl;

                        if(lvl2Row.getCell("mappingGubun")){

                            cellEditedCallback(lvl2Row.getCell("mappingGubun"), "U", vCheckValue);

                        }

                    }

                    if(lvl2Children != undefined){

                        //3레벨 확인

                        for(var k = 0 ; k < lvl2Children.length ; k++){

                            var lvl3Row = lvl2Children[k];

                            

                            if((lvl3Row.getData()["sSeq"] == sSeq || (isChecked && isCheckedLvl != lvl3Row.getData()["menuLvl"])) && !isPass){

                                isChecked = true;

                                isCheckedLvl = isCheckedLvl == -1 ? lvl3Row.getData()["menuLvl"] : isCheckedLvl;

                                if(lvl3Row.getCell("mappingGubun")){

                                    cellEditedCallback(lvl3Row.getCell("mappingGubun"), "U", vCheckValue);

                                }

                            }

                            if(isChecked && isCheckedLvl == lvl3Row.getData()["menuLvl"]) isPass = true;

                        }

                    }

                    if(isChecked && isCheckedLvl == lvl2Row.getData()["menuLvl"]) isPass = true;

                }

            }

            if(isChecked && isCheckedLvl == lvl1Row.getData()["menuLvl"]) isPass = true;

        }

    }

}

//Tree 전체 체크박스 체크시 하위 노드 체크기능

function checkedAllTreeNode(vSheet, vCheckValue){

    var treeData = vSheet.getData();

    

    if(treeData != null && treeData.length > 0){

        for(var i = 0 ; i < treeData.length ; i++){

            var menuLvl1Map = treeData[i];

            menuLvl1Map.mappingGubun = vCheckValue;

            menuLvl1Map.sStatus = "U";

            

            //1레벨 하위항목

            if(menuLvl1Map._children != undefined) {

                for(var j = 0 ; j < menuLvl1Map._children.length ; j++){

                    var menuLvl2Map = menuLvl1Map._children[j];

                    menuLvl2Map.mappingGubun = vCheckValue;

                    menuLvl2Map.sStatus = "U";

                    

                    //2레벨 하위항목

                    if(menuLvl2Map._children != undefined) {

                        for(var k = 0 ; k < menuLvl2Map._children.length ; k++){

                            var menuLvl3Map = menuLvl2Map._children[k];

                            menuLvl3Map.mappingGubun = vCheckValue;

                            menuLvl3Map.sStatus = "U";

                        }

                    }

                }

            }

        }    

    }

    vSheet.setData(treeData);

}