소계 및 합계 설정(total)
소계 및 합계를 설정하는 속성입니다.
상세설명
total
설정 : SBGridProperties.total = {
type : value1, position : value2, columns : value3, subtotalrow : value4,
grandtotalrow : value5, datasorting : value6, standardvaluechange : value7, totalformat : value8 };
value1(선택) : [String] 소계 및 합계 표시 여부 설정
'subgrand' (default) : 소계와 합계 모두 표시
'sub' : 소계만 표시
'grand' : 합계만 표시
value2(선택) : [String] 소계 및 합계 표시 위치 설정
'bottom' (default) : 하단
'top' : 상단
value3(필수) : [Object] 열별 유형 설정
standard : [Array] 기준이 되는 컬럼 인덱스 설정
sum : [Array] 합으로 계산하여 표시하려는 컬럼 인덱스 설정
avg : [Array] 평균으로 계산하여 표시하려는 컬럼 인덱스 설정
percent : [Array] 퍼센트로 계산하여 표시하려는 컬럼 인덱스 설정
count : [Array] 행 수로 계산하여 표시하려는 컬럼 인덱스 설정
datacount : [Object] 특정값을 기준으로 1씩 계산하여 표시하려는 컬럼 인덱스 설정
datacountFunc : [Function] 사용자정의로 특정 열을 계산하여 표시하려는 컬럼 인덱스 설정
※사용 시, datacount는 아래와 같은 형태로 사용하며, 기존 datacount는 적용되지 않습니다.
예시) datacount: {"cols" : [1, 2, 3]}
value4(필수) : [Object] 소계 영역에 타이틀 및 스타일 설정
기준 열 : [Object] 소계 영역의 기준이 되는 열의 인덱스
titlecol : [Number] 소계 타이틀을 표시할 열의 인덱스
titlevalue : [String] 소계 타이틀 값 (치환 기능 제공)
‘@’ - 해당 소계 영역에 기준 value 값을 표시
‘$’ - 해당 소계 영역에 상위 기준 value 값을 표시
style : [String] 소계 영역에 설정할 스타일
stylestartcol : [Number] 소계 영역에 설정한 스타일의 시작 열의 인덱스
value5(필수) : [Object] 합계 영역에 타이틀 및 스타일 설정
titlecol : [Number] 합계 타이틀을 표시할 열의 인덱스
titlevalue : [String] 합계 타이틀 값 (치환 기능 제공)
‘@’ - 해당 합계 영역에 기준 value 값을 표시
‘$’ - 해당 합계 영역에 상위 기준 value 값을 표시
style : [String] 합계 영역에 설정할 스타일
stylestartcol : [Number] 합계 영역에 설정한 스타일의 시작 열의 인덱스
value6(선택) : [Boolean] 데이터 정렬 여부 설정
true (default) : 데이터 정렬 적용
false : 데이터 정렬 미적용
value7(선택) : [Boolean] 합계 행의 기준 컬럼의 데이터를 기준 데이터로 변경할지 말지 여부 설정
true (default) : 기준 데이터 변경
false : 기준 데이터 변경 안함
value8(선택) : [Object] 소계 영역에 설정할 포멧
제약사항
total 기능 사용 시 행 추가/삭제 기능이 제한됩니다.
페이징 기능 사용 시 total 적용이 불가합니다.
트리 기능 사용 시 total 적용이 불가합니다.
예시
합계(sum)
평균(avg)
퍼센트(percent)
var datagrid;
var SBGridProperties = {};
function createGrid(){
SBGridProperties.parentid = 'SBGridArea';
SBGridProperties.id = 'datagrid';
SBGridProperties.jsonref = 'grid_data';
SBGridProperties.rowheader = 'seq';
SBGridProperties.explorerbar = 'sortmove';
SBGridProperties.selectmode = 'free';
SBGridProperties.mergecells = 'bycol';
SBGridProperties.total = {
type : 'subgrand',
position : 'bottom',
columns : {
standard : [ 1, 2 ],
sum : [4,5,6,7],
datacount: { "cols" : [8] },
datacountFunc: funcDatacount
},
subtotalrow : {
1 : {
titlecol : 2,
titlevalue : '@ 소계',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 2
},
2 : {
titlecol : 3,
titlevalue : '@ 소계',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 3
}
},
grandtotalrow : {
titlecol : 1,
titlevalue : '합계',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 1
},
datasorting : true,
totalformat : {
4 : "#,### 원",
5 : "#,### 원",
6 : "#,### 원",
7 : "#,### 원",
8 : "#,### 원"
}
};
SBGridProperties.columns = [
{caption : ['구분'], ref : "col0", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['분류'], ref : "col1", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['항목'], ref : "col2", width : '150px', style : 'text-align:center', type : 'input'},
{caption : ['1월'], ref : "col3", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['2월'], ref : "col4", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['3월'], ref : "col5", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['4월'], ref : "col6", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['5월'], ref : "col7", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false}
];
datagrid = _SBGrid.create(SBGridProperties);
$("#textValue").text("버튼을 클릭하여 열 유형이 변경된 것을 확인해보세요.");
};
function funcDatacount(col, val) {
if ( col=="col7" ) {
if ( val > 800 )
return true;
else
return false;
}
return false;
}
var datagrid;
var SBGridProperties = {};
function createGrid(){
SBGridProperties.parentid = 'SBGridArea';
SBGridProperties.id = 'datagrid';
SBGridProperties.jsonref = 'grid_data';
SBGridProperties.rowheader = 'seq';
SBGridProperties.explorerbar = 'sortmove';
SBGridProperties.selectmode = 'free';
SBGridProperties.mergecells = 'bycol';
SBGridProperties.total = {
type : 'subgrand',
position : 'bottom',
columns : {
standard : [1,2],
avg : [4,5,6,7],
datacount: { "cols" : [8] },
datacountFunc: funcDatacount
},
subtotalrow : {
1 : {
titlecol : 2,
titlevalue : '@ 평균',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 2
},
2 : {
titlecol : 3,
titlevalue : '@ 평균',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 3
}
},
grandtotalrow : {
titlecol : 1,
titlevalue : '전체 평균',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 1
},
datasorting : true,
totalformat : {
4 : "#,### 원",
5 : "#,### 원",
6 : "#,### 원",
7 : "#,### 원",
8 : "#,### 원"
}
};
SBGridProperties.columns = [
{caption : ['구분'], ref : "col0", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['분류'], ref : "col1", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['항목'], ref : "col2", width : '150px', style : 'text-align:center', type : 'input'},
{caption : ['1월'], ref : "col3", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['2월'], ref : "col4", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['3월'], ref : "col5", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['4월'], ref : "col6", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['5월'], ref : "col7", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false}
];
datagrid = _SBGrid.create(SBGridProperties);
$("#textValue").text("버튼을 클릭하여 열 유형이 변경된 것을 확인해보세요.");
};
function funcDatacount(col, val) {
if ( col=="col7" ) {
if ( val > 800 )
return true;
else
return false;
}
return false;
}
var datagrid;
var SBGridProperties = {};
function createGrid(){
SBGridProperties.parentid = 'SBGridArea';
SBGridProperties.id = 'datagrid';
SBGridProperties.jsonref = 'grid_data';
SBGridProperties.rowheader = 'seq';
SBGridProperties.explorerbar = 'sortmove';
SBGridProperties.selectmode = 'free';
SBGridProperties.mergecells = 'bycol';
SBGridProperties.total = {
type : 'subgrand',
position : 'bottom',
columns : {
standard : [1,2],
percent : [4,5,6,7],
datacount: { "cols" : [8] },
datacountFunc: funcDatacount
},
subtotalrow : {
1 : {
titlecol : 2,
titlevalue : '@ (%)',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 2
},
2 : {
titlecol : 3,
titlevalue : '@ (%)',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 3
}
},
grandtotalrow : {
titlecol : 1,
titlevalue : '전체 (%)',
style : 'background-color: rgb(146, 178, 197); font-weight: bold; color: rgb(255, 255, 255);',
stylestartcol : 1
},
datasorting : true,
totalformat : {
4 : "#,### 원",
5 : "#,### 원",
6 : "#,### 원",
7 : "#,### 원",
8 : "#,### 원"
}
};
SBGridProperties.columns = [
{caption : ['구분'], ref : "col0", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['분류'], ref : "col1", width : '100px', style : 'text-align:center', type : 'input'},
{caption : ['항목'], ref : "col2", width : '150px', style : 'text-align:center', type : 'input'},
{caption : ['1월'], ref : "col3", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['2월'], ref : "col4", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['3월'], ref : "col5", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['4월'], ref : "col6", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false},
{caption : ['5월'], ref : "col7", width : '100px', style : 'text-align:right', type : 'input', format : { type:'number' , rule:'#,##0.00' }, merge:false}
];
datagrid = _SBGrid.create(SBGridProperties);
$("#textValue").text("버튼을 클릭하여 열 유형이 변경된 것을 확인해보세요.");
};
function funcDatacount(col, val) {
if ( col=="col7" ) {
if ( val > 800 )
return true;
else
return false;
}
return false;
}