IT
리얼그리드 두개 사용 및 각종 기능 초기화
달남
2019. 9. 26. 16:00
리얼그리드를 사용해보니 표시해주는 기본 기능외에 추가 기능 코딩시 여러가지 유의 사항이 있더군요
주석으로 설명이 달려 있습니다. 참고 하세요
<script type="text/javascript" src="/scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="/scripts/realgridjs.1.1.32.min.js"></script>
<script type="text/javascript" src="/scripts/realgridjs-api.1.1.32.js"></script>
<script type="text/javascript" src="/scripts/jszip.min.js"></script>
<script type="text/javascript" src="/scripts/realgridWrapper.js"></script>
<script type="text/javascript">
// 리얼그리드용 필수변수
var gridView;
var dataProvider;
var gridData;
var realGridWrapper;
// 필드 없이는 데이터 연결이 안됨
var fields = [
{ fieldName: "field1" } // 카테고리
,{ fieldName: "field2" } //공시항목1
,{ fieldName: "field3" } //
,{ fieldName: "field4" }
,{ fieldName: "field5" }
,{ fieldName: "field51" } // 출력구분배열
,{ fieldName: "field52" } // 출력구분개수
,{ fieldName: "field53" } // 출력구분코드
,{ fieldName: "field54" } // 출력구분ID
,{ fieldName: "field55" } // 출력라벨 필드
,{ fieldName: "field6" } // 1번 체크박스 값 1,0
,{ fieldName: "field61" } // 1번 체크박스 라벨
,{ fieldName: "field7" } // 2번 체크박스 값 1,0
,{ fieldName: "field71" } // 2번 체크박스 라벨
,{ fieldName: "field8" } // 3번 체크박스 값 1,0
,{ fieldName: "field81" } // 3번 체크박스 라벨
,{ fieldName: "field9" }
,{ fieldName: "field10" } // 년도개수
];
var columns = [
{ name: "col1",
fieldName: "field1",
header : { text: "<spring:message code="code.m10097" />" } //카테고리
,editable: false
,equalBlank: true
,width: 60
}
,{
type: "group",
name: "<spring:message code="code.m00125" />", //공시항목1
editable: false,
width: 420,
columns: [
{ name: "col2"
,fieldName: "field2"
,editable: false
,header : { text: "" } //공시항목1
,equalBlank: true
,width: 140
}
,{ name: "col3"
,fieldName: "field3"
,editable: false
,header : { text: "" } //공시항목2
,equalBlank: true
,width: 140
}
,{ name: "col4"
,fieldName: "field4"
,editable: false
,header : { text: "" } //공시항목3
,equalBlank: true
,width: 140
}
]
}
,{ name: "col5",
fieldName: "field5",
header : { text: "<spring:message code="code.m10098" />" } //출력구분
,styles: { "textAlignment": "center" ,"paddingLeft": "0"}
,lookupDisplay: true
,editable: true
,values: ["0", "1"]
,labels: ['<spring:message code="code.m30166" />', '<spring:message code="code.m30167" />']
,labelField: "field55"
,alwaysShowEditButton:true
,editor: {
type: "dropDown",
}
,width: 60
}
/* ,{ name: "col51",
fieldName: "field51",
header : { text: "출력구분배열" } //출력구분배열
,styles: { "textAlignment": "center" }
//,readOnly: "true"
//,width: 300
}
,{ name: "col52",
fieldName: "field52",
header : { text: "출력구분개수" } //출력구분개수
,styles: { "textAlignment": "center" }
//,readOnly: "true"
//,width: 300
}*/
// ,{ name: "col53",
// fieldName: "field53",
// header : { text: "출력구분값" } //출력구분값
// ,styles: { "textAlignment": "center" }
// //,readOnly: "true"
// //,width: 300
// }
// ,{ name: "col54",
// fieldName: "field54",
// header : { text: "출력구분이름" } //출력구분ID
// ,styles: { "textAlignment": "center" }
// //,readOnly: "true"
// //,width: 300
// }
,{
type: "group",
name: "<spring:message code="code.m30455" />", //년도
//orientation: "vertical",
width: 120,
columns: [
{
name: "col6",
fieldName: "field6",
type: "data",
width: "40",
editable: false,
labelField: "field61",
lookupDisplay:true,
renderer: {
type: "check",
editable: true,
startEditOnClick: true,
trueValues: "1",
falseValues: "0",
labelPosition: "right"
},
styles: {
paddingLeft: 8,
textAlignment: "center",
},
header: {
text: "Check Edit",
styles: {
fontBold: false
}
}
}
,{
name: "col7",
fieldName: "field7",
type: "data",
width: "40",
editable: false,
labelField: "field71",
lookupDisplay:true,
renderer: {
type: "check",
editable: true,
startEditOnClick: true,
trueValues: "1",
falseValues: "0",
labelPosition: "right"
},
styles: {
paddingLeft: 8,
textAlignment: "center",
},
header: {
text: "Check Edit",
styles: {
fontBold: true
}
}
}
,{
name: "col8",
fieldName: "field8",
type: "data",
width: "40",
editable: false,
labelField: "field81",
lookupDisplay:true,
renderer: {
type: "check",
editable: true,
startEditOnClick: true,
trueValues: "1",
falseValues: "0",
labelPosition: "right"
},
styles: {
paddingLeft: 8,
textAlignment: "center",
},
header: {
text: "Check Edit",
styles: {
fontBold: true
}
}
}
]
}
/* ,{ name: "col10",
fieldName: "field10",
header : { text: "년도개수" } //년도개수
,styles: { "textAlignment": "center" }
//,readOnly: "true"
,width: 40
} */
,{ name: "col9",
fieldName: "field9",
header : { text: " " } //추가
,styles: { "textAlignment": "center","paddingLeft": "0" }
,readOnly: "true"
,editable: false
,width: 40
}
];
// 리얼그리드용 필수변수
var gridView2;
var dataProvider2;
var gridData2;
var realGridWrapper2;
// 필드 없이는 데이터 연결이 안됨
var fields2 = [
{ fieldName: "field1" } //카테고리
,{ fieldName: "field2" } //공시항목1
,{ fieldName: "field3" } //공시항목2
,{ fieldName: "field4" } //공시항목2
,{ fieldName: "field5" } //출력구분
,{ fieldName: "field53" } // 출력구분코드
,{ fieldName: "field54" } // 출력구분년
,{ fieldName: "field6" }
,{ fieldName: "field7" } //삭제
];
var columns2 = [
{ name: "col1",
fieldName: "field1",
header : { text: "<spring:message code="code.m10097" />" } //카테고리
// ,styles: { "textAlignment": "center" }
,equalBlank: true // 같은값 셀 생략하기
,editable: false // 수정 금지
//,readOnly: "true"
,width: 60
}
,{
type: "group",
name: "<spring:message code="code.m00125" />", //공시항목1
//orientation: "vertical",
width: 420,
columns: [
{ name: "col2"
,fieldName: "field2"
,header : { text: "" } //공시항목1
// ,styles: { "textAlignment": "center" }
,equalBlank: true // 같은값 셀 생략하기
,editable: false // 수정 금지
//,readOnly: "true"
,width: 140
}
,{ name: "col3"
,fieldName: "field3"
,header : { text: "" } //공시항목2
// ,styles: { "textAlignment": "center" }
,equalBlank: true // 같은값 셀 생략하기
,editable: false // 수정 금지
//,readOnly: "true"
,width: 140
}
,{ name: "col4",
fieldName: "field4",
header : { text: "" } //공시항목3
// ,styles: { "textAlignment": "center" }
,equalBlank: true // 같은값 셀 생략하기
,editable: false // 수정 금지
//,readOnly: "true"
,width: 140
}
]
}
,{ name: "col5",
fieldName: "field5",
header : { text: "<spring:message code="code.m10098" />" } //출력구분
,styles: { "textAlignment": "center" ,"paddingLeft": "0"}
,lookupDisplay: true
,editable: false
,alwaysShowEditButton:false
,values: ["0", "1"]
,labels: ['<spring:message code="code.m30166" />', '<spring:message code="code.m30167" />']
,editor: {
type: "dropDown",
}
//,readOnly: "true"
,width: 60
}
,{ name: "col6",
fieldName: "field6",
header : { text: "<spring:message code="code.m30455" />" } //년도
,styles: { "textAlignment": "center","paddingLeft": "0" }
,editable: false
//,readOnly: "true"
,width: 40
}
,{ name: "col7",
fieldName: "field7",
header : { text: " " } //삭제
,styles: { "textAlignment": "center","paddingLeft": "0" }
,editable: false
//,readOnly: "true"
,width: 40
}
// ,{ name: "col8",
// fieldName: "field54",
// header : { text: " " } //출력구분년
// ,styles: { "textAlignment": "center","paddingLeft": "0" }
// //,visible: false
// //,readOnly: "true"
// ,width: 40
// }
// ,{ name: "col9",
// fieldName: "field53",
// header : { text: " " } //출력구분코드
// ,styles: { "textAlignment": "center","paddingLeft": "0" }
// //,visible: false
// //,readOnly: "true"
// ,width: 40
// }
];
// 공시항목 그리드1 설정
function setRealgrid(dataResultList){
realGridWrapper = new RealGridWrapper("realgrid", fields, columns, gridData);
gridView = realGridWrapper.getGridView();
dataProvider = realGridWrapper.getDataProvider();
dataProvider.setRows(dataResultList);
gridView.setCheckBar({visible: false}); // 체크박스 바 숨기기
//행 삽입과 행 추가, 행 삭제가 가능하도록 옵션 조정
gridView.setEditOptions({
// insertable: true,
// appendable: true,
deletable: true,
deleteRowsConfirm : false // false 지울때 확인 메세지 끄기
})
//데이터를 바로 삭제하지 않고 상태만 변경
dataProvider.setOptions({
softDeleting: false // false //바로 삭제
})
gridView.setFooter({
resizable: false,
visible: false,
});
gridView.setPanel({visible:false}); // 그룹핑 패널 숨기기
gridView.setStateBar({visible: false }); // 상태바 숨기기
//RealGridJS.setTrace(true);//그리드 내부에서 발생하는 각종 이벤트들의 log정보를 console창에 표시한다
grouping("<spring:message code="code.m00125" />",gridView); // 그룹핑한 헤더 숨기기
grouping("<spring:message code="code.m30455" />",gridView); // 그룹핑한 헤더 숨기기
gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
// 출력 구분이 2개인 경우에만 클릭 가능하게 함
// if(dataProvider.getValue(newRow,6) == "2"){
// grid.setColumnProperty("col5","editable",true)
// }else{
// grid.setColumnProperty("col5","editable",false)
// }
// 출력구분을 동적으로 보여주기 위한 설정
var col5_label_T = ['<spring:message code="code.m30166" />', '<spring:message code="code.m30167" />'] ;
var col5_label_F = [ '<spring:message code="code.m30166" />'];
var col5_values_T = ["0", "1"] ;
var col5_values_F = ["0"];
var column = gridView.columnByName("col5");
// 출력구분을 동적으로 보여줌
if(dataProvider.getValue(newRow,"field52") == "2"){
column.labels = col5_label_T;
column.values = col5_values_T;
console.log("col5_1");
}else{
column.labels = col5_label_F;
column.values = col5_values_F;
console.log("col5_2");
}
gridView.setColumn(column);
// 년도 수정을 불가 하기 위한 설정
var ren_T = {
type: "check",
editable: true,
startEditOnClick: true,
trueValues: "1",
falseValues: "0",
labelPosition: "right"
};
var ren_F = {
type: "check",
editable: false,
startEditOnClick: true,
trueValues: "1",
falseValues: "0",
labelPosition: "right"
};
// 첫번째 년도 클릭
if(dataProvider.getValue(newRow,"field10") > "0"){
grid.setColumnProperty("col6","renderer",ren_T);
}else{
grid.setColumnProperty("col6","renderer",ren_F);
}
// 두번째 년도 클릭
if(dataProvider.getValue(newRow,"field10") > "1"){
grid.setColumnProperty("col7","renderer",ren_T);
}else{
grid.setColumnProperty("col7","renderer",ren_F);
}
// 세번째 년도 클릭
if(dataProvider.getValue(newRow,"field10") > "2"){
grid.setColumnProperty("col8","renderer",ren_T);
}else{
grid.setColumnProperty("col8","renderer",ren_F);
}
// console.log("8:" + dataProvider.getValue(newRow,8));
};
// 추가 버튼 및 클릭 기능
gridView.onDataCellClicked = function (grid, index) {
// 추가 클릭
if( index.column == "col9"){
// gridView.commit(false);
var count = dataProvider.getValue(index.dataRow,"field10"); // "field10" 년도개수
if( count > 0 ){
switch(Number(count)){
case 1:
if( dataProvider.getValue(index.dataRow,"field6") == false ){
alert("<spring:message code="code.m10099" />"); // 추가할 년도를 선택해 주세요.
return;
}
break;
case 2:
if( dataProvider.getValue(index.dataRow,"field6") == false && dataProvider.getValue(index.dataRow,"field7") == false ){
alert("<spring:message code="code.m10099" />"); // 추가할 년도를 선택해 주세요.
return;
}
break;
case 3:
if( dataProvider.getValue(index.dataRow,"field6") == false && dataProvider.getValue(index.dataRow,"field7") == false && dataProvider.getValue(index.dataRow,"field8") == false){
alert("<spring:message code="code.m10099" />"); // 추가할 년도를 선택해 주세요.
return;
}
break;
}
}
for( var i =0; i < count ; i++){
var rowcount = gridView2.getItemCount();
if( rowcount >= 10){
// 최대 다운로드 개수는 10개입니다.
alert("<spring:message code="code.m10100" />"); // 최대 다운로드 개수는 10개입니다.
return;
}
// 체크여부 확인
var dataTF = "";
switch(i){
case 0:
dataTF = dataProvider.getValue(index.dataRow,"field6"); // 첫번째 년도 체크여부
break;
case 1:
dataTF = dataProvider.getValue(index.dataRow,"field7"); // 두번째 년도 체크여부
break;
case 2:
dataTF = dataProvider.getValue(index.dataRow,"field8"); // 세번째 년도 체크여부
break;
}
if( dataTF == false){
continue;
}
//년도 데이터 얻기
var year = "";
switch(i){
case 0:
year = dataProvider.getValue(index.dataRow,"field61"); // 년도1 라벨
break;
case 1:
year = dataProvider.getValue(index.dataRow,"field71"); // 년도2 라벨
break;
case 2:
year = dataProvider.getValue(index.dataRow,"field81"); // 년도3 라벨
break;
}
var field53 = dataProvider.getValue(index.dataRow,"field53"); // 출력년도
var field54 = dataProvider.getValue(index.dataRow,"field54") + "^^" + year; // 출력코드
// 동일한 코드가 있는지 비교한다.
var options = {
parentId: 0,
startIndex: 0,
fields: ['field53', 'field54'],
values: [field53, field54]
}
var dataRow = dataProvider2.searchDataRow(options);
if( dataRow != -1){
continue;
}
gridView2.beginAppendRow();
current = gridView2.getCurrent();
var row = current.itemIndex ;
var field = current.fieldIndex;
var value = "Cell (" + field + ", " + row + ")";
gridView2.setValue(row, 0, dataProvider.getValue(index.dataRow,0));
gridView2.setValue(row, 1, dataProvider.getValue(index.dataRow,1));
gridView2.setValue(row, 2, dataProvider.getValue(index.dataRow,2));
gridView2.setValue(row, 3, dataProvider.getValue(index.dataRow,3));
gridView2.setValue(row, 4, dataProvider.getValue(index.dataRow,4));
gridView2.setValue(row, "field6", year); // 년도1 라벨
gridView2.setValue(row, "field7", "[" +"<spring:message code="code.m20024" />" + "]"); //삭제
gridView2.commit(false);
// gridView2.setValue(row, "field53", dataProvider.getValue(index.dataRow,"field53") ); // 출력구분값
// gridView2.setValue(row, "field54", dataProvider.getValue(index.dataRow,"field54") + "^^" + year); // 출력구분값
dataProvider2.setValue(row, "field53", field53 ); // 출력구분값
dataProvider2.setValue(row, "field54", field54); // 출력구분값
}
}
//console.log(index);
};
// // 출력구분 값 변경시 적용
// gridView.onGetEditValue = function (grid, index, editResult) {
// console.log(editResult.text)
// gridView.setValue(index.itemIndex, "field55", editResult.text);
// gridView.commit(false);
// }
// 출력구분이 변경시 출력값 변경
gridView.onCellEdited = function (grid, itemIndex, dataRow, field) {
var v = grid.getValue(itemIndex, field);
console.log("grid.onCellEdited, edited value=" + v);
if( field == 4){
// 라벨 변경
if( v == "0"){
gridView.setValue(itemIndex, "field55", '<spring:message code="code.m30166" />')
}else{
gridView.setValue(itemIndex, "field55", '<spring:message code="code.m30167" />')
}
// 코드 변경
var v = grid.getValue(itemIndex, field);
var option = grid.getValue(itemIndex, 5);
var code = option.split(",");
var codevalue = code[Number(v)];
gridView.setValue(itemIndex, 7, codevalue);
}
gridView.commit(false);
};
}
// 그룹핑한 헤더 숨기기
function grouping(colName,gridView){
var group = colName ? gridView.columnByName(colName) : null;
if (group) {
var hide = !gridView.getColumnProperty(group, "hideChildHeaders");
gridView.setColumnProperty(group, "hideChildHeaders", hide);
}
}
// 선택항목 그리드2 설정
function setRealgrid2(dataResultList){
realGridWrapper2 = new RealGridWrapper("realgrid2", fields2, columns2, gridData2);
gridView2 = realGridWrapper2.getGridView();
dataProvider2 = realGridWrapper2.getDataProvider();
dataProvider2.setRows(dataResultList);
gridView2.setCheckBar({visible: false}); // 체크박스 바 숨기기
//행 삽입과 행 추가, 행 삭제가 가능하도록 옵션 조정
gridView2.setEditOptions({
insertable: true,
appendable: true,
deletable: true,
deleteRowsConfirm : false // false 지울때 확인 메세지 끄기
})
//데이터를 바로 삭제하지 않고 상태만 변경
dataProvider2.setOptions({
softDeleting: false // false //바로 삭제
})
gridView2.setFooter({ resizable: false,visible: false,}); // 풋터 숨기기
gridView2.setPanel({visible:false}); // 그룹핑 패널 숨기기
gridView2.setStateBar({visible: false }); // 상태바 숨기기
grouping("<spring:message code="code.m00125" />",gridView2); // 그룹핑한 헤더 숨기기
grouping("<spring:message code="code.m30455" />",gridView2); // 그룹핑한 헤더 숨기기
// 삭제 버튼 및 클릭 기능
gridView2.onDataCellClicked = function (grid, index) {
// 삭제 클릭
if( index.column == "col7"){
dataProvider2.removeRow(index.dataRow);
}
};
}
$(document).ready(function() {
});
</script>
아래는 광고입니다
#7등급중고차할부
#8등급중고차할부
#개인워크아웃중고차
#개인회생자동차할부
#개인회생자중고차
#개인회생중고차
#개인회생중고차구매
#개인회생중고차구입
#개인회생중고차대출
#무직자중고차할부
#신불자중고차
#신불자중고차할부
#신용불량자중고차
#신용회복중고차할부
#신용회복중중고차
#연체자중고차
#저신용중고차할부
#중고차개인회생
#파산면책중고차할부
#주부중고차
어떤 부분에서 도움이 필요하신가요? 더 궁금한 점이 있으시면 마이붕붕카오 언제든지 물어보세요.
신용 때문에 자동차를 구매를 못하시는 분들을 위해서
복잡한걸 한번에 해결해 드립니다
풀할부 대출 및 여유자금 까지 해드립니다
https://odreamcar.tistory.com/m/7
신용회복 고객님 전액할부 출고합니다
마이붕붕카 회사홈페이지 입니다. 아래 영상 보시고 지금 바로 김명선 대표에게 연락주세요 010-4619-6842 전화하기
odreamcar.tistory.com