[JS] 조건에 따라 컬럼 보이게/안보이게
소분류 컬럼(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);
}
}
}
});