AXGrid Structure
setConfig
setConfig
AXGrid 초기화
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| targetID | Y | 그리드가 삽입될 HTML tag ID | string | |
| theme | 클래스이름 | string | ||
| fixedColSeq | 틀고정 컬럼 seq | number | ||
| xscroll | 그리드 가로스크롤 여부 | boolean | ||
| height | 그리드 높이 | number | string | 500px | "auto" | |
| fitToWidth | 초기 화면 사이즈에 그리드 채우기 | boolean | ||
| colHeadAlign | colHead 기본 정렬 값 | string | "left"|"center"|"right" | |
| passiveMode | 아이템 추가/수정/삭제 수동처리 모드 | boolean |
true|false 추가(C) 수정(U) 삭제(D) 처리를 서버에 저장처리하지 않고 사용자가 원하는 시점에 일괄 처리할 수 있는 모드 입니다. 신규 추가된 아이템은 _CUD 속성값이 C, 수정 U, 삭제 D 를 가지게 됩니다. |
|
| passiveRemoveHide | 수동처리 모드 상태에서 아이템 삭제 처리옵션 | boolean | true|false 삭제 요청시 삭제된 아이템을 리스트에 표시 할지 여부 리스트에 표시 되지 않는 아이템은 삭제되고 .removedList 속성으로 접근할 수 있습니다. |
|
| colGroup | Y | 그리드 컬럼정의 | json object |
[
{key:""no"", label:""번호"", width:""50"", align:""right""},
{key:""price"", label:""가격"", width:""100"", align:""right"", formatter:""money""},
{key:""cost"", label:""금액"", width:""100"", align:""right"", formatter:function(){
return (this.item.price.number() * this.item.amount.number()).money();
}}
]
|
| colHead | 그리드 컬럼 타이틀 정의 | json object |
rows:
[
[
{colSeq:0, rowspan:2},
{colSeq:null, colspan:2, label:""표현식"", align:""center""},
{colSeq:3, rowspan:2},
{colSeq:4, rowspan:2},
],
[ {colSeq:1}, {colSeq:2} ]
],
onclick: function(){
toast.push(Object.toJSON( { index:this.index, r:this.r, c:this.c, colHead:this.colHead, page:this.page } ) );
}
| |
| body | 그리드 바디 내용표현 및 이벤트 정의 | json object | rows, marker 는 body 안에 정의됩니다. | |
| rows | 그리드 바디컬럼값을 정의하는부분 | json object |
rows: [
[
{colSeq:0, rowspan:2, align:""center""},
{colSeq:null, colspan:3, formatter:function(){
var mul = (this.index * this.item.no);
itemSum += this.item.no;
return ""index * no = "" + mul + "", no 누적합은 = "" + itemSum;
}, align:""center"", addClass:""""},
{colSeq:4, rowspan:2, valign:""bottom"", align:""left""},
{colSeq:5, rowspan:2, valign:""middle""},
{colSeq:6, rowspan:2, valign:""middle""},
{colSeq:7, rowspan:2, valign:""middle""}
],
[
{colSeq:1},
{colSeq:2},
{colSeq:3}
]
]
| |
| marker | 그리드 부분합을 표현하는 부분. 그리드바디 중간에(display에 지정된 위치) 표현됩니다. | json object |
marker: {
display: function(){
return (this.index == 9 || this.index == 19); // return true 이면 marker 삽입처리
},
rows: [
[
{colSeq:null, colspan:4, formatter:function(){ return ""소계""; }, align:""center""},
{colSeq:4, formatter:function(){
var sum = 0;
for(var a=this.index-9; a < this.index+1;a++){ sum += this.list[a].price; }
return sum.money();
}},
{colSeq:5, formatter:function(){
var sum = 0;
for(var a=this.index-9;a < this.index+1;a++){ sum += this.list[a].amount; }
return sum.money();
}},
{colSeq:6, formatter:function(){
var sum = 0;
for(var a=this.index-9; a < this.index+1;a++){ sum += this.list[a].price * this.list[a].amount; }
return sum.money();
}},
{colSeq:7, formatter:function(){ return """"; }}
]
]
}
| |
| head | 그리드 소계를 표현하는 부분. 그리드 상단에 표현됩니다. | json object |
head : {
rows: [
[
{colSeq:null, colspan:4, formatter:function(){ return ""계""; }, align:""center""},
{colSeq:4},
{colSeq:5},
{colSeq:6},
{colSeq:7}
]
]
}
| |
| foot | 그리드 소계를 표현하는 부분. 그리드 하단에 표현됩니다. | json object |
foot : {
rows: [
[
{colSeq:null, colspan:4, formatter:function(){ return ""계""; }, align:""center""},
{colSeq:4, formatter:function(){
var sum = 0;
$.each(this.list, function(){
sum += this.price;
});
return sum.money();
}},
{colSeq:5, formatter:function(){
var sum = 0;
$.each(this.list, function(){
sum += this.amount;
});
return sum.money();
}},
{colSeq:6, formatter:function(){
var sum = 0;
$.each(this.list, function(){
sum += (this.price * this.amount);
});
return sum.money();
}},
{colSeq:7}
]
]
}
| |
| page | Y | 페이징관련 내용 정의 | json object |
page:{
paging:true,
pageNo:1,
pageSize:100
}
|
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| key | Y | 컬럼에 매치될 키값 | string | |
| label | Y | 컬럼이름 | string | |
| width | 컬럼이름 | string | ||
| align | 정렬 | string | right | left | center | |
| formatter | 컬럼표현 형식 | string | function |
money : 화폐표현 형식. 3자리마다 콤마표시. Ex) 10,000,000 dec : AXJ 의 decode함수 호출 checkbox : checkbox 형태로 변환 (displayLabel : true) 를 추가하면 헤드에 체크 박스 대신 라벨이 표시됩니다. function : 사용자 정의 함수 |
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| row | 그리드 컬럼을 정의 | json object | colspan, rowspan속성을 HTML TABLE TAG 와 같은구조로 작성 | |
| colSeq | Y | 컬럼순서 | number | |
| rowspan | 세로줄 병합 수 | number | ||
| colspan | 가로줄 병합 수 | number | ||
| label | Y | 컬럼이름 | number | |
| align | 정렬 | string | right | left | center | |
| onclick | 사용자 지정함수 연결 | |||
| function | 클릭시 동작할 함수를 작성해서 onclick event에 연결 | function |
money : 화폐표현 형식. 3자리마다 콤마표시. Ex) 10,000,000 dec : AXJ 의 decode함수 호출 checkbox : checkbox 형태로 변환 function : 사용자 정의 함수 |
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| rows | 그리드 컬럼을 정의 | json object | colspan, rowspan속성을 HTML TABLE TAG 와 같은구조로 작성 | |
| colSeq | Y | 컬럼순서 | number | |
| rowspan | 세로줄 병합 수 | number | ||
| colspan | 가로줄 병합 수 | number | ||
| formatter | 컬럼표현 형식 | string | function | colHead 와 동일 | |
| align | 정렬 | string | right | left | center | |
| marker | 부분합표현 | json object | ||
| display | Y | 사용자 함수가 return true 일때 표현 | function |
display: function(){
return (this.index == 9 || this.index == 19); // return true 이면 marker 삽입처리
}
|
| rows | Y | 마커 표현정의 | json object | colspan, rowspan속성을 HTML TABLE TAG 와 같은구조로 작성 |
| colSeq | Y | 컬럼순서 | number | |
| rowspan | 세로줄 병합 수 | number | ||
| colspan | 가로줄 병합 수 | number | ||
| formatter | 컬럼표현 형식 | string | function | colHead 와 동일 | |
| align | 정렬 | string | right | left | center | |
| ondblclick | 사용자 정의함수 연결 | 클릭이벤트 연결 | ||
| function | 클릭시 동작할 함수를 작성해서 ondblclick event에 연결 | function | 사용자정의함수 | |
| onclick | 사용자 정의함수 연결 | 더블클릭 이벤트 연결 | ||
| function | 클릭시 동작할 함수를 작성해서 onclick event에 연결 | function | 사용자정의함수 |
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| row | 그리드 컬럼을 정의 | string | colspan, rowspan속성을 HTML TABLE TAG 와 같은구조로 작성 | |
| colSeq | Y | 컬럼순서 | string | |
| rowspan | 세로줄 병합 수 | number | ||
| colspan | 가로줄 병합 수 | number | ||
| formatter | 컬럼표현 형식 | string | function | colHead 와 동일 | |
| align | 정렬 | string | right | left | center |
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| row | 그리드 컬럼을 정의 | string | colspan, rowspan속성을 HTML TABLE TAG 와 같은구조로 작성 | |
| colSeq | Y | 컬럼순서 | string | |
| rowspan | 세로줄 병합 수 | number | ||
| colspan | 가로줄 병합 수 | number | ||
| formatter | 컬럼표현 형식 | string | function | colHead 와 동일 | |
| align | 정렬 | string | right | left | center |
| 속성명 | 필수 | 설명 | 자료형 | 사용예 |
|---|---|---|---|---|
| paging | Y | 페이징 기능 사용유무 | boolean | |
| pageNo | 현재페이지번호 | number | ||
| pageSize | 한페이지당 아이템 갯수 | number | ||
| status | 페이징 우측에 나오는 문구 | number | 기본값 : null | |
| formatter | 사용자 지정함수 연결 | function |
method
setList(Array | JSON Object)
선언된 AXGrid 오브젝트에 리스트를 지정해주는 메소드. 인자로 Array 또는 AJAX 호출을 위한 Object 를 넘겨줄 수 있다. (return null;)
setList([{a:1},{a:2}]); //Array setList({ajaxUrl:"loadGrid.asp", ajaxPars:"param1=1¶m2=2", onLoad:function(){} }); // AJAX 호출 Object
| ajaxUrl | ajax호출 URL 주소값 |
|---|---|
| ajaxPars | ajax호출 URL 전달할 파라미터 |
| onLoad |
ajax 호출이 완료되었을때 이벤트 함수 this 인자로 서버에서 리턴된 JSON Object를 접근할 수있습니다.
setList({
ajaxUrl:"loadGrid.asp",
ajaxPars:"param1=1¶m2=2",
onLoad:function(){
alert(this.list);
trace(this); // 서버에서 리턴된 오브젝트를 콘솔창에 출력해 줍니다.
}
});
|
setDataSet(JSON Object)
head 와 foot 요소에 값을 전달하고 표현합니다.
setList를 통해 전달된 값과 head와 foot에서 표현할 데이터는 같다고 볼 수 없습니다. 페이징이 고려된 상황을 보았을때 그렇습니다.
하여 head, body 에 표현하고자 하는 값을 setDataSet 메소드를 이용 하여 정의 할 수 있습니다. (return null;)
setDataSet({price:123000, amount:10}); setList를 통해 전달된 값과 head와 foot에서 표현할 데이터는 같다고 볼 수 없습니다. 페이징이 고려된 상황을 보았을때 그렇습니다.
하여 head, body 에 표현하고자 하는 값을 setDataSet 메소드를 이용 하여 정의 할 수 있습니다. (return null;)
reloadList()
그리드를 새로고침 하여 줍니다. 데이터를 AJAX로 호출한 경우에만 작동하고 스크롤값을 0으로 초기화 되니 주의 하세요.
(return null;)
.setEditor(itemObject, itemIndex of List)
특정 데이터위치에 에디터를 활성화 시켜 수정이 가능한 형태로 준비하여 줍니다. (return null;)
setConfig 선언절 안에 editor 속성이 없는 경우에는 작동하지 않습니다.
setConfig 선언절 안에 editor 속성이 없는 경우에는 작동하지 않습니다.
body : {
onclick: function(){ // setConfig body > onclick 함수 안에서 에디터를 구현한 방식
myGrid.setEditor(this.item, this.index);
}
},
.setEditorForm(JSON object)
활성화 된 에디터의 특정 폼 요소에 값을 변경 합니다. (return null;)
myGrid.setEditorForm({
key:"writer",
position:[0,3], // editor rows 적용할 대상의 배열 포지션 (다르면 적용되지 않습니다.)
value:"String"
});
.appendList(itemObject[, insertIndex])
그리드에 신규 데이터를 삽입하기위해 삽입용 에디터를 활성화 하여 줍니다. (return null;)
var item = {};
myGrid.appendList(item);
myGrid.appendList(item, 3); //데이터를 삽입하고자 하는 index값을 지정합니다.
.removeList(Array)
삭제하려는 대상과 비교 될수 있는 Array 오브젝트를 전달하여 대상을 삭제 합니다. 비교되는 Array 오브젝트의 키값이 모두 일치하는 아이템을 삭제 됩니다.
(return null;)
var checkedList = myGrid.getCheckedList(0);// colSeq
if(checkedList.length == 0){
alert("선택된 목록이 없습니다. 삭제하시려는 목록을 체크하세요");
return;
}
if(!confirm("정말 삭제 하시겠습니까?")) return;
/// something do for server
var removeList = [];
$.each(checkedList, function(){
removeList.push({no:this.no});
});
myGrid.removeList(removeList); // 전달한 개체와 비교하여 일치하는 대상을 제거 합니다. 이때 고유한 값이 아닌 항목을 전달 할 때에는 에러가 발생 할 수 있습니다.
.getCheckedList(Number)
colGroup의 배열순번으로 해당 col의 checked 된 아이템을 반환하여 줍니다.
(return Array)
.checkedColSeq(Number, true)
colGroup의 배열순번에 해당 col의 checked 속성을 변경해 줍니다.
(return null)
.getSelectedItem()
선택된 아이템개체를 반환 합니다.
(return {index:Number, item:JSON Object})
.getCheckedListWithIndex(Number)
colGroup의 배열순번으로 해당 col의 checked 된 아이템을 index와 함께 반환하여 줍니다.
(return [{index:Number, item:JSON Object}])
.removeListIndex(Array)
Index 배열로 해당 아이템 인덱스의 아이템을 제거 합니다.
(return null)