Class: AXGrid

AXGrid

new AXGrid()

AXGrid

Version:
  • v4.6.5
Author:
  • tom@axisj.com
Example
var myGrid = new AXGrid();
myGrid.setConfig(classConfig:JSObject);

Extends

Methods

staticAXGrid.ajaxGetList(res)

setList 호출시 ajaxUrl에 의해 가져온 데이터를 그리드의 list로 적용 합니다.

Name Type Description
res Object

staticAXGrid.appendList(item, insertIndex)

  • 그리드에 신규 데이터를 삽입하기 위해 삽입용 에디터를 활성화 하여 줍니다.
Name Type Description
item Object

item dataset

insertIndex Number

삽입 대상 index

Example
var myGrid = new AXGrid();
var item = {};
myGrid.appendList(item);
myGrid.appendList(item, 3);

staticAXGrid.bigDataSync()

  • bigDataSyncApply를 호출 합니다.(grid에서만 동작, mobile,icon등의 모드에서는 동장 안함)

staticAXGrid.bigDataSyncApply(reload)

  • Grid의 리스트 내부 인덱스가 변경되거나 포커싱 대상 인덱스가 스크롤을 벗어나 있을경우 그리드를 재구성 합니다.
Name Type Description
reload Boolean

현재 그리드 스크롤된 컨텐츠를 다시 출력합니다.

staticAXGrid.cancelEditor()

  • 활성화된 에디터를 해제 합니다.
Example
var myGrid = new AXGrid();
myGrid.cancelEditor();

staticAXGrid.changeGridView(obj)

  • 그리드의 뷰모드를 체인지 합니다.
Name Type Description
obj JSONObject
Example
myGrid.changeGridView({
    viewMode:"grid"
});
myGrid.changeGridView({
    viewMode:"icon",
    view: {
        width:"200",
        // icon width
        height:"300",
        // icon height
        img: {
            left:"10",
            top:"10",
            width:"179",
            height:"180",
            style:"border:1px solid #ccc;"
        },
        label:{
            left:"10",
            top:"200",
            width:"180",
            height:"20"
        },
        description: {
            left:"10",
            top:"225",
            width:"180",
            height:"65",
            style:"color:#888;"
        },
        buttons: {
            left:"5",
            top:"5",
            width:"180",
            height:"20",
            style:"",
            items:[
                {
                    label:"but1",
                    style:"",
                    addClass:"AXButton Green",
                    onclick:function(){
                        fnObj.otherFunction(this);
                    }
                },
                {
                    label:"but2",
                    style:"",
                    addClass:"AXButton",
                    onclick:function(){
                        fnObj.otherFunction(this);
                    }
                }
            ]
        },
        format: function(){
            return {
                imgsrc : this.item.img,
                label : this.item.title,
                description : this.item.writer+", "+this.item.no+" / " + (this.item.desc || "")
            }
        }
    }
});
myGrid.changeGridView({
    viewMode:"mobile"
});

staticAXGrid.checkedColSeq(colSeq, checked, itemIndex)

colgroup내 해당 index의 checked 속성을 변경해 줍니다.해당 index의 아이템이 checkbox로 지정되어 있어야 합니다.

Name Type Description
colSeq Number

대상 체크박스(formatter:"checkbox" 로 선언된 항목의 순서)

checked Boolean

true면 check , false면 uncheck

itemIndex Number

대상 열(미 지정시 전체)

Example
var myGrid = new AXGrid();
myGrid.checkedColSeq(0, true); // 모든 체크박스 속성을 checked로
myGrid.checkedColSeq(0, true,0); // 첫번째 열의 체크박스속성을 checked로

staticAXGrid.clearSort()

  • 그리드의 소트관련 설정 데이터 및 소트표현 클래스를 삭제합니다.
Example
var myGrid = new AXGrid();
myGrid.clearSort();

staticAXGrid.click(itemIndex)

  • 인덱스에 해당하는 행을 클릭 한 효과를 발생 시킵니다.config 에 body항목의 onclick 지정함수가 있다면 호출 됩니다.
Name Type Description
itemIndex Number

선택될 그리드 아이템 인덱스

Example
var myGrid = new AXGrid();
myGrid.click(0);

staticAXGrid.clipBoardClear(){AXGrid}

staticAXGrid.colGroupListClick(){String}

colHeadToolClick 에서 호출된 ColGroupListBox의 아이템을 클릭했을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadCheckBoxClick()

Grid head checkbox를 클릭했을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadMouseOut()

Grid head가 마우스 포커스를 잃었을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadMouseOver()

Grid head에 마우스를 올렸을때 후처리를 합니다.(툴 박스 표시등)

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadNodeClick()

Grid head를 클릭 했을때의 처리를 합니다(체크박스처리,정렬등).

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadResizerEnd()

Grid head의 크기 조절 바 (|)를 마우스로 drag 상태가 해제 되었을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadResizerMouseDown()

Grid head의 크기 조절 바 (|)를 마우스로 down(누른상태) 했을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadResizerMouseMove()

Grid head의 크기 조절 바 (|)를 마우스로 drag(누른상태) 했을때 마우스 감도 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadResizerMouseUp()

Grid head의 크기 조절 바 (|)를 마우스로 drag 상태가 해제 되었을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadResizerMove()

Grid head의 크기 조절 바 (|)를 마우스로 drag(누른상태) 했을때의 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.colHeadToolClick(){String}

Grid head 우측의 도구 박스를 클릭 했을때의 처리를 합니다(ColGroupListBox 팝업).

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.contentScrollContentSync(pos, touch)

top, left에 맞게 그리드 내용을 이동 합니다.

Name Type Description
pos Object

top, left

touch String

"touch"

Example
var myGrid = new AXGrid();
myGrid.contentScrollContentSync({top: 0}, "touch");

staticAXGrid.contentScrollEnd()

그리드내의 스크롤이 마지막 항목까지 도달 하였을때의 처리를 합니다. config에서 설정한 onscrollend 지정 함수도 이때 발생됩니다.

staticAXGrid.contentScrollResize(resetLeft)

Grid의 화면에 맞게 스크롤을 생성 합니다.

Name Type Description
resetLeft Boolean

false 시 가로 스크롤은 초기화 하지 않습니다.

Example
var myGrid = new AXGrid();
myGrid.contentScrollResize(false);

staticAXGrid.contentScrollScrollEnd()

스크롤바의 스크롤이 끝났을때의 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollScrollMove()

스크롤바가 스크롤 될때 내부 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollScrollReady()

스크롤에 대한 기본 속성/이벤트를 지정합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollScrollSync(pos)

top, left에 맞게 스크롤을 이동 합니다.

Name Type Description
pos Object

top, left.

Example
var myGrid = new AXGrid();
myGrid.contentScrollScrollSync({left: myGrid.scrollXHandle.position().left});

staticAXGrid.contentScrollScrollWheel()

그리드 몸통에서 일어나는 마우스 휠 이벤트 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollTipOver()

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollTipOverMove(handleTop)

  • Grid의 스크롤바를 움직일때 현레코드/전체레코드의 툴팁을 출력합니다.
Name Type Description
handleTop Number

툴팁 출력위치의 상단 offset

staticAXGrid.contentScrollTipOverOut()

  • Grid의 스크롤바에 대한 이동 이벤트가 끝났을때 툴팁을 해제합니다.
Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollTouchEnd()

그리드내의 터치(point)가 끝났을때의 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollTouchMove()

그리드내의 터치에 의한 화면 이동을 처리 합니다..

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.contentScrollTouchstart()

그리드 스크롤바에 대한 터치 이벤트를 처리 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.dataSync(){AXGrid}

  • 그리드 데이터를 조작후 그리드에 현재 위치된 아이템을 다시 생성합니다.
Example
myGrid.list[0].id = 12;
myGrid.dataSync();

staticAXGrid.editCell(r, c, itemIndex){AXGrid}

그리드 셀 인라인 에디트

Name Type Description
r Number

index of body.rows

c Number

index of colGroup

itemIndex Number

index of this.list

staticAXGrid.editCellClear(r, c, itemIndex){AXGrid|false}

셀 인라인 에디트 상태 해제

Name Type Description
r Number optional

index of config.body.rows

c Number optional

index of colGrop

itemIndex Number optional

index of data

Example
mygrid.editCellClear(); // 셀 에디트 상태 해제
mygrid.editCellClear(0, 1, 1); // 셀 에디트 해제 하려는 위치가 값을 현재 위치와 비교 하여 false가 리턴되면 현재 위치

staticAXGrid.fetchList(list){AXGrid}

grid의 리스트에 아이템을 추가 합니다.(배열)

Name Type Description
list Array

추가될 list item Array

Example
 var list = [
     {no:1, title:"AXGrid 첫번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:123000, amount:10},
     {no:2, title:"AXGrid 두번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12300, amount:7},
     {no:3, title:"AXGrid 세번째 줄 입니다.", writer:"장기영", regDate:"2013-01-18", desc:"myGrid.setList 의 첫번째 사용법 list json 직접 지정 법", price:12000, amount:5}
 ];
 myGrid.fetchList(list);

staticAXGrid.focusEditorForm(key)

  • 활성화된 에디터의 특정 key 값과 매칭되는 요소를 활성화 합니다.
Name Type Description
key String

colgroup 컬럼 key

Example
var myGrid = new AXGrid();
myGrid.focusEditorForm("regDate");

staticAXGrid.focusMove(direction)

  • direction 만큼 포커스를 이동 합니다.
Name Type Description
direction Number | String

정수/음수 또는 L/R

Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.getAddingClass(formatter, item, itemIndex, value, key, CH){String}

해당 컬럼에 추가클래스를 정의 합니다. 문자열 방식과 함수방식을 지원합니다.

Name Type Description
formatter String | function

config 의 colGroup이나 colHead에서 지정된 formatter

item Object

대상 인덱스의 리스트 1개 열

itemIndex Number

대상 인덱스

value String

표현 대상 값.

key Object

config 의 colGroup 내부 key 값

CH Object

대상 그리드의 [열][행]

staticAXGrid.getCheckedList(colSeq){Array}

Grid list 내의 checked 된 아이템을 반환합니다.해당 colSeq의 아이템이 checkbox|radio로 지정되어 있어야 합니다.

Name Type Description
colSeq Number

대상 체크박스(formatter:"checkbox" 로 선언된 항목의 순서)

Returns:
- 그리드 리스트의 체크된 인덱스 아이템
Example
var myGrid = new AXGrid();
myGrid.getCheckedList(0);

staticAXGrid.getCheckedListWithIndex(colSeq){Array}

Grid list 내의 checked 된 아이템,index를 반환합니다.해당 colSeq의 아이템이 checkbox로 지정되어 있어야 합니다.

Name Type Description
colSeq Number

대상 체크박스(formatter:"checkbox" 로 선언된 항목의 순서)

Returns:
item:JSObject}] -그리드 리스트의 체크된 인덱스 , 아이템
Example
var myGrid = new AXGrid();
myGrid.getCheckedListWithIndex(0);

staticAXGrid.getCheckedParams(colSeq, traditional){Array}

AXGrid의 checked 값을 jQuery.param 메서드에서 사용 가능한 배열로 반환합니다.

Name Type Description
colSeq Number

대상 체크박스(formatter:"checkbox" 로 선언된 항목의 순서)

traditional Boolean

[false] 반환 형태 지정

Returns:
[ { name: 'no', value: 1 }, { name: 'no', value: 2 } ], traditional[true]: [ { 'no': 1 }, { 'no': 2 } ]
Example
var myGrid = new AXGrid();
myGrid.getCheckedParams(0); // -> [ { name: 'no', value: 1 }, { name: 'no', value: 2 } ]
myGrid.getCheckedParams(0); // -> [ { 'no': 1 }, { 'no': 2 } ]

staticAXGrid.getColGroup(suffix){String}

ColGroup을 구성 합니다.

Name Type Description
suffix String

"CH" ColHead, "CB" ColBody, "EB" EditorBody, "FE" FixedEditorBody,"FB" FixedColBody,"FC" FixedColHead

Returns:
html
Example
var myGrid = new AXGrid();
myGrid.getColGroup("CB");

staticAXGrid.getColHeadTd(arg){String}

Grid head를 위한 html을 생성합니다.

Name Type Description
arg Object
Example
// arg
{
    valign: " valign=\"bottom\"",    - td valign option string
    rowspan: " rowspan=\"2\"",  - rowspan option string
    colspan: " colspan=\"2\"",  - colspan option string
    bottomClass: "",  - border-bottom 관련 후처리
    r: 0, - colhead row index
    CHidx: 0, -colhead cell index
    align: "right", - align option string
    colSeq: 0, - config 에서 지정된 colGroup 내 순서
    formatter: "checkbox", - html 표시중 checkbox 등 특정 요소 렌더링
    formatterLabel: "" - checkbox 등 특정 요소를 감쌀 label 태그 내부 출력 내용,
    sort: "desc", -정렬옵션
    tdHtml: "blah", - config colGroup 의 label 로 지정된 string
    ghost: false,  - true 시 비어있는 dummy cell 이 생성됨.
    displayLabel: false - Label이 지정된 경우 출력 여부. 기본적으로 사용시 false 로 셋팅됨. colgroup 에서 따로 지정하지 않기 때문에,,
}

staticAXGrid.getColSeqToHead(r, c){Number}

대상의 colHead 내부 seq 가져옵니다.

Name Type Description
r Number

Row

c Number

Column

Example
var myGrid = new AXGrid();
var colSeq = myGrid.getColSeqToHead(colHeadR, colHeadC);

staticAXGrid.getDataSetFormatterValue(formatter, dataSet, value, key, CH){String}

  • dataSet의 값을 지정된 formatter에 맞게 가공합니다.
Name Type Description
formatter String

formatter - config 에서 지정된 표현 형식

dataSet Object

setDataSet 메소드에 전달된 데이터 객체

value String

dataSet 객체 가 지니고 있는 값

key String

config colgroup의 key

CH String

config colgroup의 컬럼 객체

staticAXGrid.getEditorBody(dataSet, isfix){String}

  • 에디터를 생성 합니다.
Name Type Description
dataSet Object

데이터 객체

isfix String

fix option . (AXGrid.hasFixed == true) "fix"

staticAXGrid.getEditorFormatterValue(formatter, dataSet, value, key, CH, idAttr){Object|String}

  • Editor의 데이터를 formatter에 맞게 가공하여 반환 합니다.
Name Type Description
formatter String

config editor 에서 지정된 표현 형식

dataSet Object

데이터 객체

value String

dataSet 객체 가 지니고 있는 값

key String

config colgroup의 key

CH String

config colgroup의 컬럼 객체

idAttr String

Editor 타겟 구분 값

staticAXGrid.getEditorFormValue(form, dataSet, value, key, CH, idAttr){String}

  • Editor의 데이터를 config editor rows form에 정의된 형식에 맞게 반환 합니다.
Name Type Description
form Object

config editor rows form에서 지정된 객체

dataSet Object

데이터 객체

value String

dataSet 객체 가 지니고 있는 값

key String

config colgroup의 key

CH String

config colgroup의 컬럼 객체

idAttr String

Editor 타겟 구분 값

staticAXGrid.getExcelColHeadTd(arg){String}

  • 그리드 내용을 엑셀 포맷(html)으로 변환시 컬럼 해더를 생성 합니다.
Name Type Description
arg Object
Example
var arg = {
    valign,  - valign 옵션
    rowspan, - rowspan 옵션
    colspan, - colspan 옵션
    align,   - align 옵션
    colSeq,  - config colgroup 내부 순서
    formatter, - config colgroup에서 지정된 formatter
    sort,  - 정렬 옵션
    tdHtml, - config colgroup 지정된 label
    displayLabel - Label이 지정된 경우 출력 여부. 기본적으로 사용시 false 로 셋팅됨. colgroup 에서 따로 지정하지 않기 때문에,,
}

staticAXGrid.getExcelFootDataSet(dataSet, isfix){String}

  • 그리드 내용을 엑셀 포맷(html)으로 변환시 footer 데이터가 존재시 처리 합니다.
Name Type Description
dataSet Object

setDataSet 메소드에 전달된 데이터 객체

isfix String

"fix","n" 고정 형태

staticAXGrid.getExcelFormat(format, filter){String|Object}

  • format에 맞춰 그리드의 내용을 엑셀 포맷으로 변환 합니다.
Name Type Description
format String

"html","json" 변환 옵션

filter function optional

"html" 인 경우 filter 옵션으로 표현하고 싶은 열을 선택할 수 있습니다.

Example
var txt = myGrid.getExcelFormat("html");
var txt = myGrid.getExcelFormat("html", function(){
 // colGroup item => this
 return this.key != 'no'; // key가 no가 아님 컬럼만 출력
);
var json = myGrid.getExcelFormat("json");

staticAXGrid.getExcelHeadDataSet(dataSet, isfix){String}

  • 그리드 내용을 엑셀 포맷(html)으로 변환시 header 데이터가 존재시 처리 합니다.
Name Type Description
dataSet Object

setDataSet 메소드에 전달된 데이터 객체

isfix String

"fix","n" 고정 형태

staticAXGrid.getExcelItem(itemIndex, item){String}

  • 그리드 내용을 엑셀 포맷(html)으로 변환시 리스트 데이터를 변환 합니다.
Name Type Description
itemIndex Number

그리드 리스트중 대상 index

item Object

그리드 리스트중 index 데이타

staticAXGrid.getExcelItemMarker(itemIndex, item, isfix){String}

  • 그리드 내용을 엑셀 포맷(html)으로 변환시 maker 데이터가 존재시 처리 합니다.
Name Type Description
itemIndex Number

그리드 리스트중 대상 index

item Object

그리드 리스트중 index 데이타

isfix String

isfix {String} - fix option .

staticAXGrid.getFootDataSet(dataSet, isfix){String}

  • 그리드의 footer 생성 합니다.
Name Type Description
dataSet Object

setDataSet 메소드에 전달된 데이터 객체

isfix String

"fix","n" 고정 형태

staticAXGrid.getFormatterValue(formatter, item, itemIndex, value, key, CH, CHidx){String}

지정된 표현 형식으로 데이터를 HTML String 으로 변환 시킵니다.

Name Type Description
formatter String | function

config 의 colGroup이나 colHead에서 지정된 formatter

item Object

대상 인덱스의 리스트 1개 열

itemIndex Number

대상 인덱스

value String

표현 대상 값.

key Object

config 의 colGroup 내부 key 값

CH Object

대상 그리드의 [열][행]

CHidx Number

대상 그리드의 [열][행] 중 행의 index

staticAXGrid.getHeadDataSet(dataSet, isfix){String}

  • 그리드의 header를 생성 합니다.
Name Type Description
dataSet Object

setDataSet 메소드에 전달된 데이터 객체

isfix String

"fix","n" 고정 형태

staticAXGrid.getHeadMousePosition(){Object}

Grid head에서 event를 일으킨 마우스의 위치를 캡쳐 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.getIconItem(itemIndex, item, viewIconObj, cssObj){String}

config 의 viewMode가 icon 일때의 리스트를 구성 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 1개 열

viewIconObj Object

Config 에서 설정된 view 속성.

cssObj Object
Example
cssObj = {
    box: "width: ,height:",   - 기타 사용자 지정 스타일 추가 가능
    img:  "left:, top: , width:, height:", - 기타 사용자 지정 스타일 추가 가능
    label: "left:, top: , width:, height:", - 기타 사용자 지정 스타일 추가 가능
    description: "left:, top: , width:, height:", - 기타 사용자 지정 스타일 추가 가능
    buttons: "left:, top: , width:, height:", - 기타 사용자 지정 스타일 추가 가능
};

staticAXGrid.getItem(itemIndex, item, isfix, hasTr){String}

대상의 데이터를 그리드에 출력되는 html 형태로 변환 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 1개 열

isfix String

고정 높이 사용시 "fix"

hasTr String

tr 표시 여부

staticAXGrid.getItemMarker(itemIndex, item, isfix){String}

body(list) 구성시 marker row 가 존재할경우 처리 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 1개 열

isfix String

고정 높이 사용시 "fix"

staticAXGrid.getList(filter, clone){Array}

그리드의 데이터를 조건에 따라 반환하며 clone 옵션을 사용해서 복사된 값을 받을 수 있다.

Name Type Description
filter String | function | Boolean

[undefined] - String: "C,U,D" 추가,수정,삭제. Function: true/false를 반환하는 함수를 사용한다. Boolean: filter 조건을 생략하고 바로 clone 옵션을 사용할 수 있다.

clone Boolean

[false] true: referance 데이터를 반환 받는다. false: clone 데이터를 반환받는다.

Example
var myGrid = new AXGrid();
myGrid.getList(); // 전체 데이터(referance) 배열 반환
myGrid.getList(true); // 전체 데이터(clone) 배열 반환
myGrid.getList("C,U"); // 추가,수정된 데이터(referance) 배열 반환
myGrid.getList("C,U", true); // 추가,수정된 데이터(clone) 배열 반환
function fnFilter(idx, item) { return (idx % 2) === 0; }
myGrid.getList(fnFilter); // 함수에서 true를 반환한 데이터(referance) 배열 반환
myGrid.getList(fnFilter, true); // 함수에서 true를 반환한 데이터(clone) 배열 반환

staticAXGrid.getMarkerDisplay(itemIndex, item){Boolean}

config 내의 marker row 를 출력할지 여부를 판단하는 사용자 함수를 호출 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 1개 열

staticAXGrid.getMobileItem(itemIndex, item, mobileView){String}

config 의 viewMode가 mobile 일때의 리스트를 구성 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 1개 열

mobileView Object

Config 에서 설정된 view 속성.

staticAXGrid.getMousePositionToContentScroll(contentScrollID){Object}

스크롤이 발생된 마우스 위치를 반환합니다.

Name Type Description
Event

Grid body내부에서 감지되는 이벤트

contentScrollID String

Event가 일어난 스크롤 객체 ID

staticAXGrid.getSelectedItem(){Object}

  • 선택된 행의 index, item 을 가져 옵니다.선택된 행이 없으면 에러 객체를 전달 합니다.
Returns:
, exception no item selected {error,description}
Example
var myGrid = new AXGrid();
myGrid.getSelectedItem();

staticAXGrid.getSortParam(ty){String|Object}

  • 정렬옵션을 반환 합니다.
Name Type Description
ty String

출력옵션 "one" 으로 요청시 String 형태로, 미 지정시 Object 형태로 반환

Example
var myGrid = new AXGrid();
myGrid.getSortParam();

// return value
{
sortKey:"" , -  정렬 기준 key
sortWay:""   -  정렬 방법 "asc" or "desc"
}

staticAXGrid.getTooltipValue(formatter, item, itemIndex, value, key, CH){String}

지정된 표현 형식으로 데이터를 HTML String으로 변환 시킵니다.

Name Type Description
formatter String | function

config 의 colGroup이나 colHead에서 지정된 formatter

item Object

대상 인덱스의 리스트 1개 열

itemIndex Number

대상 인덱스

value String

표현 대상 값.

key Object

config 의 colGroup 내부 key 값

CH Object

대상 그리드의 [열][행]

staticAXGrid.getTouchPositionToContentScroll(){Object}

터치 이벤트가 일어난 위치를 반환 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.goPageMove(pageAdd)

  • pageAdd 만큼 페이지를 이동합니다.
Name Type Description
pageAdd Number

이동할 페이지 증/감(-) 수

Example
var myGrid = new AXGrid();
myGrid.goPageMove(-1);

staticAXGrid.gridBodyClick()

Grid 리스트(body)에 대한 click 이벤트 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.gridBodyClickAct()

Grid 리스트(body)내부 요소에 대한 클릭 후 처리를 합니다(checkbox,radio).

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.gridBodyDBLClick()

Grid 리스트(body)에 대한 doubleclick 이벤트 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.gridBodyOut()

Grid 리스트(body)에 대한 mouseout 이벤트 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.gridBodyOver()

Grid 리스트(body)에 대한 mouseover 이벤트 처리를 합니다.

Type Description
Event

Grid body내부에서 감지되는 이벤트

staticAXGrid.listLoadingDisplay()

그리드의 데이터 처리중 표시를 표현 합니다.

staticAXGrid.mergeCells(tgDom, typ)

  • config 내의 옵션에 따라 셀 병합을 실행 합니다.
Name Type Description
tgDom Object

그리드 몸통 객체

typ String

표현 형식 ("n" normal, "f" fixed)

staticAXGrid.onContextmenu(){AXContextMenu}

setConfig에서 설정된 contextMenu에 대한 처리를 합니다.

Type Description
Event

Grid 내부에서 감지되는 이벤트

Example

// 마우스 오른쪽 버튼 클릭시 메뉴를 호출 합니다.(추가,삭제,수정)

var myGrid = new AXGrid();
myGrid.setConfig({
    targetID : "AXGridTarget",
    theme : "AXGrid",
    mediaQuery: {
        mx:{min:0, max:600}, dx:{min:600}
    },
    colGroup : [
        {key:"no", label:"번호", width:"40", align:"center", formatter:"money"}
    ],
        contextMenu: {
            theme:"AXContextMenu", // 선택항목
            width:"150", // 선택항목
            menu:[
                {
                    userType:1, label:"추가하기", className:"plus", onclick:function(){
                        myGrid.appendList(null);
                    }
                }
            ]
        }
});

staticAXGrid.onKeydown()

Grid 내부에서 감지되는 이벤트에 대한 처리를 합니다.(방향키로 포커스 이동등..)

Type Description
Event

Grid 내부에서 감지되는 이벤트

staticAXGrid.onPageChange(e)

  • 페이지 이동시 호출 됩니다.
Name Type Description
e Event

change 이벤트

staticAXGrid.openMobileConfig(event)

  • 모바일 툴바가 클릭되었을 때 툴바 박스 호출 이벤트 함수
Name Type Description
event event

staticAXGrid.printFoot()

  • grid의 footer를 구성합니다 . (getDataSet)
Example
var myGrid = new AXGrid();
myGrid.setDataSet({price:123000, amount:10});
myGrid.printFoot();

staticAXGrid.printHead()

  • grid의 header를 구성합니다 . (getDataSet)
Example
var myGrid = new AXGrid();
myGrid.setDataSet({price:123000, amount:10});
myGrid.printHead();

staticAXGrid.printList(args){String}

grid list 의 전체 출력을 처리 합니다.

Name Type Description
args Object

출력 옵션 {sort:true}

staticAXGrid.pushList(pushItem, insertIndex){AXGrid}

그리드에 데이터를 삽입합니다. push to Grid.list

Name Type Description
pushItem Object | Array
insertIndex Number optional

삽입위치 인덱스 Index of Insert Position

Example
 myGrid.pushList([item Array]);
 myGrid.pushList([item Array], 1);
 myGrid.pushList([item]);

staticAXGrid.redrawDataSet()

  • setDataSet애 의해 dataSet 객체가 변경된 경우 header나 footer를 다시 렌더링 합니다.
Example
var myGrid = new AXGrid();
myGrid.setDataSet({price:123000, amount:10});
myGrid.redrawDataSet();

staticAXGrid.redrawGrid(changeGridView)

그리드의 모든 요소를 재 정렬 해 줍니다.

Name Type Description
changeGridView string
Example
var myGrid = new AXGrid();
myGrid.redrawGrid();

staticAXGrid.reloadList()

그리드리스트를 새로 고침 합니다.(ajax를 통할 경우 다시 가져 옵니다).

Example
myGrid.setList({
    ajaxUrl:"loadGrid.php",
    ajaxPars:"param1=1¶m2=2"
 });
myGrid.reloadList();

staticAXGrid.removeList(removeList){AXGrid}

removeList의 전달된 키값 과 일치하는 대상을 삭제 합니다.이때 고유한 값이 아닌 항목을 전달 할 때에는 에러가 발생 할 수 있습니다.

Name Type Description
removeList Array

키값 배열

Example
var checkedList = myGrid.getCheckedList(0);// colSeq
var removeList = [];
$.each(checkedList, function(){
    removeList.push({no:this.no});
});
myGrid.removeList(removeList);

staticAXGrid.removeListIndex(removeList){AXGrid}

removeList의 index에 해당하는 항목을 제거 합니다..

Name Type Description
removeList Array

index 배열 (key value "index" 가 있어야 함)

Example
 var removeList = [{index:0},{index:1},{index:2}];
 myGrid.removeListIndex(removeList);

staticAXGrid.reorderColgroup(rColgroupreorderColGroup)

Name Type Description
rColgroupreorderColGroup Array

staticAXGrid.restoreList(removeList){AXGrid}

restoreList 전달된 키값 과 일치하는 대상의 삭제 표시를 제거 합니다.이때 고유한 값이 아닌 항목을 전달 할 때에는 에러가 발생 할 수 있습니다.(passive)

Name Type Description
removeList Array

키값 배열

Example
 var myGrid = new AXGrid();
 myGrid.setConfig({passiveMode:true});
 var checkedList = myGrid.getCheckedList(0);// colSeq
 var removeList = [];
 $.each(checkedList, function(){
    removeList.push({no:this.no});
 });
 myGrid.restoreList(removeList);

staticAXGrid.saveEditor()

  • 에디터의 내용을 저장하고 리스트에 반영 합니다.
Example
var myGrid = new AXGrid();
myGrid.saveEditor();

staticAXGrid.saveEditorRequest(res)

  • config editor 항목에 request가 설정 되었을경우 서버 연동 처리를 합니다 response설정으로 예외 처리를 합니다.
Name Type Description
res Object

editorFormItem

staticAXGrid.scrollTop(itemIndex)

  • itemIndex에 스크롤을 이동시킵니다.
Name Type Description
itemIndex Number

스크롤될 아이템 인덱스

Example
var myGrid = new AXGrid();
myGrid.scrollTop(0);

staticAXGrid.selectClear(){AXGrid}

staticAXGrid.setBody(list, rewrite)

그리드의 몸통을 렌더링 합니다.

Name Type Description
list Object

Grid list Object

rewrite Boolean

true or false

staticAXGrid.setColHead(){String}

Grid head를 디바이스(보기설정)에 맞춰 렌더링 합니다.(grid,icon,mobile)

staticAXGrid.setConfig(config)

선언된 클래스를 사용하기 위해 속성을 정의합니다.

Name Type Description
config Object

gridConfig

Example
myGrid.setConfig({
    targetID    : "AXGridTarget", // {String} -- 그리드 div ID
    theme       : "AXGrid",       // {String} [AXGrid] -- CSS Class 이름
    fixedColSeq : 0,              // {Number} -- 컬럼고정 기능을 사용합니다. 고정할 마지막 컬럼의 인덱스 값입니다. 예제) http://dev.axisj.com/samples/AXGrid/fixedColSeq.html
    fitToWidth  : true,           // {Boolean} [false] -- 컬럼 가로 길이를 그리드의 가로 길이에 맞춥니다.
    colHeadAlign: "center",       // {String} 헤드의 기본 정렬. "left"|"center"|"right" 값을 사용할 수 있습니다. colHeadAlign 을 지정하면 colGroup 에서 정의한 정렬이 무시되고 colHeadAlign : false 이거나 없으면 colGroup 에서 정의한 속성이 적용됩니다.
    mergeCells  : [3,4]           // {Boolean|Array} -- 전체셀병합,병합안함,지정된 인덱스열만 병합 예제) http://dev.axisj.com/samples/AXGrid/mergeCells.html
    height      : "auto",         // {Number|String} -- 그리드의 높이를 지정합니다. 숫자를 사용하면 픽셀 단위로, "auto" 값을 사용하면 그리드의 높이가 내용에 맞춰서 늘어납니다. 예제) http://dev.axisj.com/samples/AXGrid/autoHeight.html
    sort        : true,           // {Boolean} -- true: 그리드의 헤더를 클릭해서 정렬 할 수 있습니다. false: 정렬 기능을 비활성화 합니다.  이 설정은 colGroup의 sort 보다 우선적으로 적용됩니다.
    remoteSort  : true,           // {Boolean} [false] -- 서버에서 정렬을 처리(서버에서 별도 처리 필요)합니다. 헤더 클릭시 'sortBy=cost desc' 형식의 정렬 정보가 ajax 요청에 포함됩니다.
    colHeadTool : true,           // {Boolean} -- 컬럼 display 여부를 설정 합니다. 이 설정은 colGroup의 colHeadTool 보다 우선적으로 적용됩니다.
    viewMode    : "grid"          // {String} -- 그리드가 보여지는 형태("grid"|"icon"|"mobile")를 지정합니다. viewMode는 mediaQuery에 의해서 자동으로 결정되기도 합니다. 예제) http://localhost/axisj/samples/AXGrid/viewMode.html
    reserveKeys : { // reserveKeys는 AXISJ에서 지정한 키를 다른 키로 지정하는 하는 경우 사용합니다. reserveKeys를 사용하면 데이터를 수정없이 바로 사용할 수 있습니다.
        parent_hash  : "phash", // {String} 부모해시 키의 이름을 지정합니다.
        child_hash   : "hash",  // {String} 자식해시 키의 이름을 지정합니다.
        sub_list     : "list",  // {String} 자식 리스트 키의 이름을 지정합니다.
        hidden       : "_hidden"// {String} hidden 키의 이름을 지정합니다.
    },
    colGroup : [ // 데이터 리스트의 컬럼을 정의합니다.
        {
            key      : "no",        // {String} -- 데이터와 맵핑할 키 입니다. key 명칭은 reservedKey
            label    : "번호",      // {String} -- 사용자에게 보여줄 컬럼명입니다.
            width    : 50,          // {Number|String} -- 컬럼의 가로길이를 설정합니다. 픽셀단위의 숫자나 "*" 문자를 사용할 수 있습니다. "*"을 사용하는 경우 그리드의 가로 길이에 따라 컬럼의 결이가 가변적으로 변합니다.
            align    : "right",     // {String} ["left"] -- 컬럼 내용의 정렬을 설정합니다. "left"|"center"|"right" 값을 사용할 수 있습니다.
            sort     : "asc",       // {String|Boolean} [""] -- 컬럼의 정렬을 지정합니다. "asc"|"desc"|false 값을 사용할 수 있습니다. false 값을 사용하면 컬럼의 정렬을 비활성화 합니다.
            colHeadTool : true      // {Boolean} -- 컬럼 display 여부를 설정 합니다.
            formatter: "money",     // {String|Function} -- 컬럼의 값을 표현하는 방식을 지정합니다. "money", "dec", "html", "checkbox", "radio", function은 아래 formatter 함수를 참고하세요.
            tooltip  : "money",     // {String|Function} -- 툴팁의 값을 표현하는 방식을 지정합니다. 툴팁을 지정하면 td div.bodyNode에 title 속성으로 값이 표현됩니다. 위 formatter와 동일한 변수를 사용합니다.
            disabled : function(){},// {Boolean|Function} -- formatter가 checkbox, radio인 경우 input의 disabled 값을 지정합니다. disabled(true|flase)를 반환하는 함수를 작성합니다. 아래 disabled 함수를 참고하세요.
            checked  : function(){} // {Boolean|Function} -- formatter가 checkbox, radio인 경우 input의 checked 값을 지정합니다. checked(true|flase)를 반환하는 함수를 작성합니다. 아래 checked 함수를 참고하세요.
        }
    ],
    colHead: { // 예제) http://dev.axisj.com/samples/AXGrid/colhead.html
        rows: [ // 컬럼 헤더를 병합할 수 있습니다. 사용법은 colGroup과 동일하며 key 대신 colSeq를 사용할 수 있습니다.
            [
                {colSeq:0, rowspan:2},
                {colSeq:null, colspan:3, label:"표현식", align:"center"},
                {colSeq:4, rowspan:2, formatter: function(){} },
                {colSeq:5, rowspan:2},
                {colSeq:6, rowspan:2},
                {colSeq:7, rowspan:2},
                {colSeq:8, rowspan:2},
                {colSeq:9, rowspan:2}
            ],
            [
                {colSeq:1},
                {colSeq:2},
                {colSeq:3}
            ]
        ],
        onclick: function(){} // {Function} -- 그리드의 컬럼 헤드를 클릭시 발생하는 이벤트 입니다. 아래 onclick 함수를 참고하세요.
    },
    body: {
        marker: { // 그리드의 목록의 중간에 소계같은 원하는 데이터를 표현할 수 있습니다. 예제) http://dev.axisj.com/samples/AXGrid/marker.html
            display: function(){}, // {Function} -- marker 표시여부(true|flase)를 반환하는 함수를 작성합니다. 아래 display 함수를 참고하세요.
            rows: [] // marker를 표시할 형태를 정의 합니다. colHead의 rows와 동일한 형식을 사용합니다.
        },
        onclick       : function(){}, // 데이터 행의 click 이벤트를 정의합니다. 이벤트 변수 및 this 프로퍼티는 아래 onclick 함수를 참고하세요.
        ondblclick    : function(){}, // 데이터 행의 ondblclick 이벤트를 정의합니다. 이벤트 변수 및 this 프로퍼티는 아래 ondblclick 함수를 참고하세요.
        oncheck       : function(){}, // 데이터 행의 oncheck 이벤트를 정의합니다. 이벤트 변수 및 this 프로퍼티는 아래 oncheck 함수를 참고하세요.
        addClass      : function(){}, // 데이터 행의 사용자 정의 class를 할당할 수 있습니다.. 이벤트 변수 및 this 프로퍼티는 아래 addClass 함수를 참고하세요.
        onchangeScroll: function(){}, // 스크롤 변경 이벤트 입니다. 이벤트 변수 및 this 프로퍼티는 아래 onchangeScroll 함수를 참고하세요.
        onscrollend   : function(){}  // 그리드내의 스크롤이 마지막 항목까지 도달 하였을때 발생하는 이벤트를 설정할 수 있습니다. 이벤트 변수 및 this 프로퍼티는 아래 onscrollend 함수를 참고하세요.
    },
    foot: { // 그리드 마지막에 표시하는 행입니다. 예제) http://dev.axisj.com/samples/AXGrid/headfoot.html
        rows: [] // foot을 표시할 형태를 정의 합니다. colHead의 rows와 동일한 형식을 사용합니다.
    },
    page:{
        paging  : true, // {Boolean} -- 페이징 사용여부를 설정합니다.
        pageNo  : 1,    // {Number} -- 현재 페이지 번호를 설정합니다.
        pageSize: 100,  // {Number} -- 한 페이지장 표시할 데이터 수를 설정합니다.
        onchange: function(pageNo){} // {Funtion} -- 페이지 변경 이벤트입니다.
    },
    editor: { // 예제) http://localhost/axisj/samples/AXGrid/passive.html
        rows: [
            [
                {
                    colSeq:0,
                    align:"center",
                    valign:"middle",
                    formatter: function(){},
                    form: {
                        type    : "readonly",  // {String} -- "hidden"|"text"|"readonly"|"textarea"|"select"|"radio"|"checkbox"
                        value   : "itemValue", // {String|Function} -- "itemValue"|"itemText": 해당 아이템의 값을 사용합니다. function을 사용해야 하는 경우 아래 formValue 함수를 참고하세요.
                        onClick : formOnClick, // {Function} -- 아래 formOnClick 함수를 참고하세요.
                        onBlur  : formOnBlur,  // {Function} -- 아래 formOnBlur  함수를 참고하세요.
                        onFocus : formOnFocus  // {Function} -- 아래 formOnFocus 함수를 참고하세요.
                        validate: function(formID, value){ // {Function} 입력된 값을 확인합니다.
                            //this.formID
                            //this.value
                            //this.checkedValues
                            //this.form

                            return true | false;
                        }
                    },
                    AXBind:{
                        type  : "selector", // {String} -- form.type == "text"인 경우 "number"|"money"|"selector"|"slider"|"twinSlider"|"date"|"twinDate"|"dateTime"|"switch"를 사용할 수 있습니다. form.type == "select"인 경우 "select"를 사용할 수 있습니다.
                        config: {} // {Object} -- API(http://jdoc.axisj.com/jQueryExtends.html)에서 bind + type으로 검색하세요.
                    }
                }
            ]
        ],
        request: {
            ajaxUrl :"saveGrid.php",
            ajaxPars:"param1=1¶m2=2"
        },
        response: function(){ // ajax 응답에 대해 예외 처리 필요시 response 구현
            // response에서 처리 할 수 있는 객체 들
            //console.log({res:this.res, index:this.index, insertIndex:this.insertIndex, list:this.list, page:this.page});
            if(this.error){
                console.log(this);
                return;
            }
        },
        onkeyup: function(event, element){
            //this.list
            //this.item
            //this.element
        }
    },
    contextMenu: {} // API와 예제를 참고하세요. API) http://jdoc.axisj.com/AXContextMenu.html 예제) http://dev.axisj.com/samples/AXCore/AXContextMenu.html
});

function formatter(itemIndex, item) {
    //this.index
    //this.list
    //this.item
    //this.page
    //this.key
    //this.value
}

function disabled | checked() {
    //index: itemIndex,
    //list: this.list,
    //item: item,
    //page: this.page,
    //key: key,
    //value: value
}

function display() {
    //this.index
    //this.list
    //this.item
    //this.page

    return true | false;
}

function onclick | ondblclick() {
    //this.index
    //this.r
    //this.c
    //this.list
    //this.colHead
    //this.page
}

function addClass() {
    //this.index
    //this.item
    //this.list
    //this.page

    return "red"|"green"|"blue"|"yellow"|"white"|"gray"; // 별도의 색상별 CSS를 추가로 정의해서 사용할 수 있습니다.
}

function oncheck() {
    //this.index
    //this.checked
    //this.r
    //this.c
    //this.list
    //this.page
}

function onchangeScroll(virtualScroll) {}

function onscrollend() {
    //this.list
    //this.page
}

function formOnClick | formOnBlur | formOnFocus() {
    //this.key
    //this.position
    //this.value
}

function formValue(key, value) {
    //this.key
    //this.value
    //this.list
    //this.page
}

staticAXGrid.setData(gridData)

그리드 데이터를 페이지까지 포함하여 정의해 줍니다. (ajax를 사용하지 않는 방법)
Name Type Description
gridData JSObject

object of grid

Example
var gridData = {
    list: _obj.document_list,
    page:{
        pageNo: _obj.page_navigation.cur_page,
        pageSize: 20,
        pageCount: _obj.page_navigation.page_count,
        listCount: _obj.page_navigation.total_count,
        onchange: function(pageNo){
            dialog.push(Object.toJSON(this));
            console.log(this, pageNo);
        }
    }
};
myGrid.setData(gridData);

staticAXGrid.setDataSet(obj)

  • head, foot 속성을 정의한 경우 head, foot 에 값을 표시합니다. 비어있는 객체를 전달할 경우 formatter 연결된 함수에 의해 값이 계산됩니다.
Name Type Description
obj Object

({key:value})

Example
 var myGrid = new AXGrid();
 myGrid.setDataSet({price:123000, amount:10});
 myGrid.setDataSet({});

staticAXGrid.setEditCellValue(val){AXGrid}

현재 활성화된 인라인 에디트 input에 값을 지정합니다.

Name Type Description
val String
Example
mygrid.setEditCellValue("123");

staticAXGrid.setEditor(item, itemIndex, insertIndex)

  • 해당하는 인덱스에 에디터를 활성화 합니다.config 내에 editor 관련 항목이 없다면 작동하지 않습니다.
Name Type Description
item Array

삽입될 아이템 데이터

itemIndex Number

에디터가 가져올 아이템 인덱스

insertIndex Number

에디터가 삽입될 위치 인덱스

Example
 var myGrid = new AXGrid();
 myGrid.setEditor({}, 1);
 myGrid.setEditor(null, null, 1);

staticAXGrid.setEditorForm(obj)

  • 활성화된 에디터에 특정 값을 전달 합니다.
Name Type Description
obj Object

삽입될 아이템 데이터

Example
var obj = {
    key : , colgroup 컬럼 key
    position :, 적용될 대상의 배열 순서 [0,0]
    value : , 넘겨줄 값 {String}
}

var myGrid = new AXGrid();
     myGrid.setEditorForm({
    key:"title",
    position:[0,2],
    value:"가나다라"
});

staticAXGrid.setFocus(itemIndex)

  • itemIndex에 해당하는 열을 선택 합니다..
Name Type Description
itemIndex Number

선택될 아이템 인덱스

Example
var myGrid = new AXGrid();
myGrid.setFocus(0);

staticAXGrid.setHeight(height){jQueryObject}

그리드의 높이를 설정합니다. viewMode가 "mobile"인 경우는 작동하지 않습니다.

Name Type Description
height Number

grid outerHeight

Example
var myGrid = new AXGrid();
myGrid.setHeight(600);

staticAXGrid.setList(obj, sortDisable, rewrite, exts)

그리드에 데이터를 선언하거나 AJAX url 속성을 정의합니다.

Name Type Description
obj JSObject
sortDisable
rewrite
exts
Example
// Array
myGrid.setList({Array});

// AJAX url 속성
myGrid.setList({
 //method :
 //contentType :
 //responseType :
 //dataType :
 //headers :
 //debug :
 //ajaxUrl :
 //ajaxPars :
 //onLoad :
 //onError :
 ajaxUrl:"loadGrid.php",
 ajaxPars:"param1=1¶m2=2", // {String|Object}
 onLoad:function(){

 }
});

staticAXGrid.setMobileTool(){String}

  • 출력 대상이 모바일일 경우 모바일용 page indicator를 생성합니다.

staticAXGrid.setPaging(){String}

  • 그리드 하단 page indicator를 생성합니다.

staticAXGrid.setStatus(listLength){String}

  • 그리드 리스트 아이템 갯수(length)를 표시 합니다.
Name Type Description
listLength Number

그리드 리스트 아이템 갯수(length)

Example
var myGrid = new AXGrid();
myGrid.setStatus(myGrid.list.length);

staticAXGrid.sortList(nsort, myColHead, list){Object}

그리드의 리스트를 정렬 합니다.

Name Type Description
nsort String

"desc","asc"

myColHead Object

cfg.colHead.rows[colHeadR][colHeadC] 대상이 될 Grid head node

list Object

Grid list Object

Returns:
list
Example
var myGrid = new AXGrid();
// Array
myGrid.setList({Array});
...
myGrid.sortList("desc",myGrid.cfg.colHead.rows[0][0],myGrid.list);

staticAXGrid.unbindAXbind()

  • 에디터내부 요소에 부여된 특성을 해제 합니다.
Example
var myGrid = new AXGrid();
myGrid.unbindAXbind();

staticAXGrid.updateItem(rowsIndex, colsIndex, itemIndex, value){AXGrid}

리스트데이터의 특정 아이템값을 변경합니다.

Name Type Description
rowsIndex Number

바디의 한아이템의 줄 대게 0 body안에 rows를 구성하는 경우에 사용

colsIndex Number

컬럼 위치

itemIndex Number

아이템의 인덱스 index of item

value String | Number

변경하려는 값

Example
myGrid.updateItem(0, 2, 1, "AXISJ");

staticAXGrid.updateList(itemIndex, item){AXGrid}

body(list) 구성시 marker row 가 존재할경우 처리 합니다.

Name Type Description
itemIndex Number

대상 인덱스

item Object

대상 인덱스의 리스트 아이템.

Example
 var item = {
    a: "a",
    b: "b",
    c: "c",
    d: "d",
    e: 14350
 };
     myGrid.updateList(0,item);

staticAXGrid.validateCheck(filter)

그리드 추가 , 수정시 validation 체크 메소드

Name Type Description
filter String

[undefined] - String: "C,U,D" 추가,수정,삭제

Example

colGroup : [{
        "key": "date",
        "label": "date",
        "width": 95,
        "sort": false,
        "align": "center",
        "editor": {
            "type": "calendar",
            "config": {
                "valueFormat": "yyyymmdd",
                "separator": "-"
            },
            "updateWith": ["_CUD"],
            "maxLength": 8
        },
    }, {
        "key": "string",
        "label": "string",
        "width": 95,
        "sort": false,
        "align": "center",
        "editor": {
            "updateEdit": true,  // 필드 없데이트시  default true, false 수정안됨.
            "createEdit": true,  // 필드 신규추가시  default true, false 추가시 입력안됨.
            "notEmpty": true, // 필수 입력 여부 default false, true or string  빈 항목일 경우 보여줄 메시지 .
            "type": "text",
            "updateWith": ["_CUD"],
            "maxLength": 40
        }
    }, {
        "key": "number",
        "label": "number",
        "width": 95,
        "sort": false,
        "align": "right",
        "formatter": "money",
        "editor": {
            "type": "money",
            "updateWith": ["_CUD"],
            "maxLength": 12,
            "range": { // 숫자일 경우 숫자자릿수와 소수점 자릿수 지정
                "val": "9,3"
                ,msg : '' // 자릿수를 초과 했을대 보여줄 메시지.
            }
        },
    }]
var myGrid = new AXGrid();
AXGrid.validateCheck('C'); // 추가시 validation check
AXGrid.validateCheck('U'); // 수정시 validation check
  • 그리드의 formatter 입니다. 사용자 정의 formatter를 추가할 수 있습니다.
Example
Object.extend(AXGrid.prototype.formatter, {
    link: function(formatter, item, itemIndex, value, key, CH, CHidx){
        return '<a href="https://www.axisj.com">www.axisj.com</a>';
    }
});

inlineEditor()

  • 그리드의 inline editor 입니다. 사용자 정의 editor를 추가할 수 있습니다.
Example
Object.extend(AXGrid.prototype.inlineEditor, {
    switch: {
        init: function(inline_editor, AXBindConfig, CG, r, c, ii){
            inline_editor.find("input").bindSwitch(AXBindConfig);
        },
        getValue: function(value) {
            // this: {item:item, index:itemIndex, CG:CG, r:r, c:c}
            return value;
        }
    }
});