1. template 이용, 컬럼의 combo 데이터 바인딩, formula가 안먹힌다.
<sc-grid id="gridPanel"
class="flex"
editable="false"
use-state="false"
use-selection="false"
data-provider="{{resultList}}"
show-number-line="false"
on-header-click="onHeaderClick">
<cc-grid-toolbar>
<sc-button text="엑셀다운로드" on-click="onExcelDownload" disabled="{{disable}}" auth-exl_yn=y></sc-button>
</cc-grid-toolbar>
<sc-grid-columns>
</sc-grid-columns>
<!-- Paging -->
<sc-grid-paging id="gridPaging"
url="findWarehousingAmtList.do"
body="{{searchParam}}"
page-size-items="100, 200, 300, 400, 500, 1000"
default-page-index="4"
on-error="onPageLoadError">
</sc-grid-paging>
</sc-grid>
<sc-grid-columns id="defaultColumns">
<sc-data-column data-field="rownum_" header-text="" width="60" text-align="center"
data-type="number"></sc-data-column>
<sc-combobox-column data-field="comp_cd" header-text="법인" width="120" text-align="center"
items="{{codes.operOrgCd}}" display-field="org_nm" value-field="org_cd"></sc-combobox-column>
<sc-combobox-column data-field="plt_cd" header-text="PLANT" width="160" text-align="center"
items="{{codes.CO08}}" display-field="label" value-field="data"></sc-combobox-column>
<sc-data-column data-field="vd_cd" header-text="협력사" width="80" text-align="center"></sc-data-column>
<sc-data-column data-field="vd_nm" header-text="협력사명" width="220" text-align="left"></sc-data-column>
<sc-data-column data-field="part_no" header-text="품번" width="120" text-align="center"></sc-data-column>
<sc-data-column data-field="part_nm" header-text="품명" width="220" text-align="left"></sc-data-column>
<sc-combobox-column data-field="inc_cd" header-text="입고구분" width="80" text-align="center"
items="{{codes.AP11}}" display-field="label" value-field="data"
visible="[[formula('isIncVisible')]]"></sc-combobox-column>
<sc-data-column data-field="total" header-text="합계" width="80" text-align="right"
data-type="number" format-type="number"></sc-data-column>
</sc-grid-columns>
... onHeaderClick: function(event)
{
var me = this;
var detail = event.detail;
var dataField = detail.dataField;
var headerText = detail.headerText;
var grid = me.$.gridPanel;
var _year = headerText.substr(0, 4);
var _columns = grid.getColumns();
for (var i = 0; i < _columns.length; i++)
{
if (_columns[i].isGroupColumn)
{
var _grpColumn = _columns[i];
if (_grpColumn.id == "yyyy_" + _year)
{
_grpColumn.getEffectiveChildren().forEach(function(column, index, array)
{
if (index > 0)
//column.width = _grpColumn.width == 80 ? 60 : 0;
column.visible = !column.visible;
});
_grpColumn.width = _grpColumn.width == 80 ? 800 : 80;
}
}
}
},
makeColumn : function()
{
var me = this;
var _year_fr = me.searchParam.year_fr;
var _year_to = me.searchParam.year_to;
var defaultColumns = me.querySelector("#defaultColumns");
var columns = defaultColumns.getChildren();
for (var _year = _year_fr; _year <= _year_to; _year++)
{
var grpCol = me.querySelector("#yyyy_" + _year);
if (UT.isEmpty(grpCol))
{
grpCol = document.createElement("sc-group-column");
grpCol.id = "yyyy_" + _year;
grpCol.dataField = "yyyy_" + _year;
grpCol.headerText = _year + me.translate("년도");
grpCol.width = 80;
grpCol.headerStyle = {fontWeight:"bold", fontColor:"#0e006f"};
for (var _mm = 0; _mm <= 12; _mm++)
{
var col = document.createElement("sc-data-column");
col.dataField = "" + _year + ("0" + _mm).substr(-2);
col.headerText = _mm == 0 ? me.translate("소계") : _mm + me.translate("월");
col.width = _mm == 0 ? 80 : 60;
col.visible = _mm == 0 ? true : false;
col.textAlign = "right";
col.dataType = "number";
col.formatType = "number";
grpCol.appendChild(col);
}
columns.push(grpCol);
}
}
me.$.gridPanel.setColumns(columns);
}
2. template 없이하기
<sc-grid id="gridPanel"
class="flex"
editable="false"
use-state="false"
use-selection="false"
data-provider="{{resultList}}"
show-number-line="false"
on-header-click="onHeaderClick">
<cc-grid-toolbar>
<sc-button text="엑셀다운로드" on-click="onExcelDownload" disabled="{{disable}}" auth-exl_yn=y></sc-button>
</cc-grid-toolbar>
<sc-grid-columns>
<sc-data-column data-field="rownum_" header-text="" width="60" text-align="center"
data-type="number"></sc-data-column>
<sc-combobox-column data-field="comp_cd" header-text="법인" width="120" text-align="center"
items="{{codes.operOrgCd}}" display-field="org_nm" value-field="org_cd"></sc-combobox-column>
<sc-combobox-column data-field="plt_cd" header-text="PLANT" width="160" text-align="center"
items="{{codes.CO08}}" display-field="label" value-field="data"></sc-combobox-column>
<sc-data-column data-field="vd_cd" header-text="협력사" width="80" text-align="center"></sc-data-column>
<sc-data-column data-field="vd_nm" header-text="협력사명" width="220" text-align="left"></sc-data-column>
<sc-data-column data-field="part_no" header-text="품번" width="120" text-align="center"></sc-data-column>
<sc-data-column data-field="part_nm" header-text="품명" width="220" text-align="left"></sc-data-column>
<sc-combobox-column data-field="inc_cd" header-text="입고구분" width="80" text-align="center"
items="{{codes.AP11}}" display-field="label" value-field="data"
visible="[[formula('isIncVisible')]]"></sc-combobox-column>
<sc-data-column data-field="total" header-text="합계" width="80" text-align="right"
data-type="number" format-type="number"></sc-data-column>
</sc-grid-columns>
<!-- Paging -->
<sc-grid-paging id="gridPaging"
url="findWarehousingQtyList.do"
body="{{searchParam}}"
page-size-items="100, 200, 300, 400, 500, 1000"
default-page-index="4"
on-error="onPageLoadError">
</sc-grid-paging>
</sc-grid>
... onHeaderClick: function(event)
{
var me = this;
var detail = event.detail;
var dataField = detail.dataField;
var headerText = detail.headerText;
var grid = me.$.gridPanel;
var _year = headerText.substr(0, 4);
var _columns = grid.getColumns();
for (var i = 0; i < _columns.length; i++)
{
if (_columns[i].isGroupColumn)
{
var _grpColumn = _columns[i];
if (_grpColumn.id == "yyyy_" + _year)
{
_grpColumn.getEffectiveChildren().forEach(function(column, index, array)
{
if (index > 0)
//column.width = _grpColumn.width == 80 ? 60 : 0;
column.visible = !column.visible;
});
_grpColumn.width = _grpColumn.width == 80 ? 800 : 80;
}
}
}
},
makeColumn : function()
{
var me = this;
var _year_fr = me.searchParam.year_fr;
var _year_to = me.searchParam.year_to;
// 기존 년도 node 삭제
var grpCols = [].slice.call(me.querySelectorAll("[id^='yyyy_']"));
for (var i = 0; i < grpCols.length; i++)
{
grpCols[i].parentNode.removeChild(grpCols[i]);
}
// 새로운 년도 node 추가
grpCols = [];
for (var _year = _year_fr; _year <= _year_to; _year++)
{
grpCol = document.createElement("sc-group-column");
grpCol.id = "yyyy_" + _year;
grpCol.dataField = "yyyy_" + _year;
grpCol.headerText = _year + me.translate("년도");
grpCol.width = 80;
grpCol.headerStyle = {fontWeight:"bold", fontColor:"#0e006f"};
for (var _mm = 0; _mm <= 12; _mm++)
{
var col = document.createElement("sc-data-column");
col.dataField = "" + _year + ("0" + _mm).substr(-2);
col.headerText = _mm == 0 ? me.translate("소계") : _mm + me.translate("월");
col.width = _mm == 0 ? 80 : 60;
col.visible = _mm == 0 ? true : false;
col.textAlign = "right";
col.dataType = "number";
col.formatType = "number";
if (_mm == 0)
{
col.itemStyleFunction = "onItemStyle";
}
grpCol.appendChild(col);
}
grpCols.push(grpCol);
}
var columns = [].slice.call(me.$.gridPanel.getColumns());
me.$.gridPanel.setColumns(columns.concat(grpCols));
}
3. Group Column클릭시 하위Column visible처리 1
<sc-grid id="gridPanel"
data-provider="{{resultList}}"
class="flex"
editable="false"
show-tooltip="true"
use-state="false"
use-selection="true"
locked-column-count="3"
selection-able-function="onSelectionAble"
row-style-function="onRowStyle"
on-header-click="onHeaderClick"
on-item-click="onItemClick">
<sc-grid-columns>
...
<sc-group-column header-text="공종"
hide-child-headers="false" width="200">
<sc-group-column header-text="계약"
hide-child-headers="false" width="200">
<sc-data-column header-text="코드"
data-field="cntr_dspl_cd" width="70" text-align="center"></sc-data-column>
<sc-data-column header-text="명"
data-field="cntr_dspl_nm" width="130" text-align="left"
show-default-content-tooltip="true"></sc-data-column>
</sc-group-column>
<sc-group-column header-text="해외"
hide-child-headers="false" width="200" visible="false">
<sc-data-column header-text="코드"
data-field="ovss_dspl_cd" width="70" text-align="center"></sc-data-column>
<sc-data-column header-text="명"
data-field="ovss_dspl_nm" width="130" text-align="left"
show-default-content-tooltip="true"></sc-data-column>
</sc-group-column>
<sc-group-column header-text="등록"
hide-child-headers="false" width="200" visible="false">
<sc-data-column header-text="코드"
data-field="reg_dspl_cd" width="70" text-align="center"></sc-data-column>
<sc-data-column header-text="명"
data-field="reg_dspl_nm" width="130" text-align="left"
show-default-content-tooltip="true"></sc-data-column>
</sc-group-column>
</sc-group-column>
...
</sc-grid-columns>
</sc-grid>
onHeaderClick : function(event)
{
var me = this;
var dataField = event.detail.dataField;
var headerText = event.detail.headerText;
var grid = event.currentTarget;
switch (headerText)
{
case "공종" :
var _col = grid.getColumnElByName(event.detail.columnName);
if (_col.isGroupColumn)
{
_col.getEffectiveChildren().forEach(function(column, index, array)
{
if (index > 0)
column.visible = !column.visible;
});
_col.width = _col.width == 200 ? 600 : 200;
}
break;
}
},
4. Group Column클릭시 하위Column visible처리 2
onHeaderClick : function(event)
{
var me = this;
var dataField = event.detail.dataField;
var columnName = event.detail.columnName;
var headerText = event.detail.headerText;
var grid = event.currentTarget;
switch (columnName)
{
case "grp_org" :
var grpCol = grid.getColumnElByName(columnName);
if (UT.isNotEmpty(grpCol) && grpCol.isGroupColumn)
{
var _grpColWidth = 0;
[].slice.call(grpCol.children).forEach(function(column, index, array)
{
if (UT.hasInArray(["plt_cd"], column.dataField))
{
column.visible = !column.visible;
}
_grpColWidth += column.visible ? column.width : 0;
});
grpCol.width = _grpColWidth;
}
break;
