JS,HTML,CSS

[JS] 조건에 따라 컬럼 보이게/안보이게

유반짝 2022. 11. 9. 11:25

소분류 컬럼(sclsfNm)만 보이게 안보이게 하는 법(feat.ppmboot)

1.JS페이지 스타트할때 함수를 만들고

========================================================================================

fnObj.pageStart = function () {
    var _this = this; 
    
    param = parent.ppmboot.modal.getData();        
    inspcDylgCd = param.inspcDylgCd;
    
    if (inspcDylgCd == "컬럼안보이게하는 조건") {
       sclsfNmHidden = false;
    }else{
      sclsfNmHidden = true;
    }
    _this.gridView.initView();

 

2. gridView 를 그릴때 hidden 속성을 주면된다

========================================================================================

fnObj.gridView = ppmboot.viewExtend(ppmboot.gridView, {

    initView: function () {
        var _this = this;
        this.target = ppmboot.gridBuilder({
            showLineNumber: true,
            sortable: true,
            multiSort: false,
            showRowSelector: false,
            multipleSelect: true,
            lineNumberColumnWidth: 40,
            rowSelectorColumnWidth: 26,
            target: $('[data-ax5grid="grid-view-01"]'),
            columns: [
{key: "lclsfNm", label: "대분류", width: 100, align: "center"},
{key: "mclsfNm", label: "중분류", width: 120, align: "center"},
{key: "sclsfNm", label: "소분류", width: 120, align: "center", hidden: sclsfNmHidden},
            

// 예/아니오 체크박스일때 한줄로 나란히 나오게 하는 법

{label: "예/아니오" , columns:[
             {key: "inspcRst", label: "예",width: 45, sortable: false, align: "center", editor: {type: "checkbox", config: {height: 17, trueValue: "Y", falseValue: "N"}}},
                    {key: "inspcRst", label: "아니오",width: 45, sortable: false, align: "center", editor: {type: "checkbox", config: {height: 17, trueValue: "N", falseValue: "Y"}}}
             ], styleClass: function(){return (param.mode=='add' || param.mode=='mod')?"grid-cell-blue":false;}
             }
            ],
            body: {
             mergeCells: ["lclsfNm", "mclsfNm","sclsfNm"],
             onClick: function (index) {
                 if(index.column.key == "inspcRst"){
                 this.self.setValue(index.dindex,index.column.key,this.item.inspcRst);
                 }
                }
            }
        });