API

ax5grid

Kind: global class
Author: tom@axisj.com

ax5grid.setConfig(_config) ⇒ ax5grid

/** Preferences of grid UI

Kind: static method of ax5grid

Param Type Default Description
_config Object 클래스 속성값
_config.target Element
[_config.frozenColumnIndex] Number 0
[_config.frozenRowIndex] Number 0
[_config.showLineNumber] Boolean false
[_config.showRowSelector] Boolean false
[_config.multipleSelect] Boolean true
[_config.columnMinWidth] Number 100
[_config.lineNumberColumnWidth] Number 30
[_config.rowSelectorColumnWidth] Number 25
[_config.sortable] Boolean false
[_config.multiSort] Boolean false
[_config.remoteSort] function false
[_config.virtualScrollY] Boolean true 세로축 가상스크롤 처리여부
[_config.virtualScrollX] Boolean true 가로축 가상스크롤 처리여부
[_config.header] Object
[_config.header.selector] Object true 헤더 checkbox 표시여부
[_config.header.align] String
[_config.header.columnHeight] Number 25
[_config.header.columnPadding] Number 3
[_config.header.columnBorderWidth] Number 1
[_config.body] Object
[_config.body.onClick] function
[_config.body.onDBLClick] function
[_config.body.onDataChanged] function
[_config.body.mergeCells] String | Array false -
[_config.body.align] String
[_config.body.columnHeight] Number 25
[_config.body.columnPadding] Number 3
[_config.body.columnBorderWidth] Number 1
[_config.body.grouping] Object
[_config.body.grouping.by] Array list grouping keys
[_config.body.grouping.columns] Array list grouping columns
[_config.body.trStyleClass] String | function
[_config.page] Object
[_config.page.height] Number 25
[_config.page.display] Boolean true grid page display
[_config.page.statusDisplay] Boolean true grid status display
[_config.page.navigationItemCount] Number 5
[_config.scroller] Object
[_config.scroller.size] Number 15
[_config.scroller.barMinSize] Number 15
[_config.scroller.trackPadding] Number 4
[_config.columnKeys] Object
[_config.columnKeys.selected] String "_SELECTED"
_config.columns Array.<Object>
_config.columns[].key String
_config.columns[].label String
_config.columns[].width Number
_config.columns[].styleClass String | function
_config.columns[].headerStyleClass String | function
_config.columns[].enableFilter Boolean
_config.columns[].sortable Boolean
_config.columns[].align String
_config.columns[].formatter String | function
_config.columns[].editor Object
_config.columns[].editor.type String text,number,money,date
_config.columns[].editor.config Object
_config.columns[].editor.updateWith Array
_config.columns[].editor.disabled function disable editor
[_config.columns[].multiLine] Boolean false
[_config.tree] Object
[_config.tree.use] Boolean false Whether tree-type data is used
[_config.tree.hashDigit] Number 8
[_config.tree.indentWidth] Number 10
[_config.tree.arrowWidth] Number 15
[_config.tree.iconWidth] Number 18
[_config.tree.icons] Object
[_config.tree.icons.openedArrow] String '▾'
[_config.tree.icons.collapsedArrow] String '▸'
[_config.tree.icons.groupIcon] String '⊚'
[_config.tree.icons.collapsedGroupIcon] String '⊚'
[_config.tree.icons.itemIcon] String '⊙'
[_config.tree.columnKeys] Object
[_config.tree.columnKeys.parentKey] String "pid"
[_config.tree.columnKeys.selfKey] String "id"
[_config.tree.columnKeys.collapse] String "collapse"
[_config.tree.columnKeys.hidden] String "hidden"
[_config.tree.columnKeys.parentHash] String "hp"
[_config.tree.columnKeys.selfHash] String "hs"
[_config.tree.columnKeys.children] String "children"
[_config.tree.columnKeys.depth] String "depth"

Example

var firstGrid = new ax5.ui.grid();

ax5.ui.grid.formatter["myType"] = function () {
    return "myType" + (this.value || "");
};
ax5.ui.grid.formatter["capital"] = function(){
    return (''+this.value).toUpperCase();
};

ax5.ui.grid.collector["myType"] = function () {
    return "myType" + (this.value || "");
};

var sampleData = [
    {a: "A", b: "A01", price: 1000, amount: 12, cost: 12000, saleDt: "2016-08-29", customer: "장기영", saleType: "A"},
    {companyJson: {"대표자명":"abcd"}, a: "A", b: "B01", price: 1100, amount: 11, cost: 12100, saleDt: "2016-08-28", customer: "장서우", saleType: "B"},
    {companyJson: {"대표자명":"abcd"}, a: "A", b: "C01", price: 1200, amount: 10, cost: 12000, saleDt: "2016-08-27", customer: "이영희", saleType: "A"},
    {companyJson: {"대표자명":"위세라"}, a: "A", b: "A01", price: 1300, amount: 8, cost: 10400, saleDt: "2016-08-25", customer: "황인서", saleType: "C"},
    {companyJson: {"대표자명":"abcd"}, a: "A", b: "B01", price: 1400, amount: 5, cost: 7000, saleDt: "2016-08-29", customer: "황세진", saleType: "D"},
    {companyJson: {"대표자명":"abcd"}, a: "A", b: "A01", price: 1500, amount: 2, cost: 3000, saleDt: "2016-08-26", customer: "이서연", saleType: "A"}
];

var gridView = {
    initView: function () {
        firstGrid.setConfig({
            target: $('[data-ax5grid="first-grid"]'),
            columns: [
                {
                    key: "companyJson['대표자명']",
                    label: "필드A",
                    width: 80,
                    styleClass: function () {
                        return "ABC";
                    },
                    enableFilter: true,
                    align: "center",
                    editor: {type:"text"}
                },
                {key: "b", label: "필드B", align: "center"},
                {
                    key: undefined, label: "필드C", columns: [
                        {key: "price", label: "단가", formatter: "money", align: "right"},
                        {key: "amount", label: "수량", formatter: "money", align: "right"},
                        {key: "cost", label: "금액", align: "right", formatter: "money"}
                    ]
                },
                {key: "saleDt", label: "판매일자", align: "center"},
                {key: "customer", label: "고객명"},
                {key: "saleType", label: "판매타입"}
            ]
        });
        return this;
    },
    setData: function (_pageNo) {
        firstGrid.setData(sampleData);
        return this;
    }
};

// onClick, onDBLClick, onDataChanged
firstGrid.setConfig({
     target: $('[data-ax5grid="first-grid"]'),
     columns: [...],
     body: {
         onClick: function(){
             console.log(this);
         },
         onDBLClick: function(){
             console.log(this);
             // If the column does not have an editor attribute, an event is raised.
         },
         onDataChanged: function(){
             console.log(this);
             // If change Data
         }
     }
});

ax5grid.align() ⇒ ax5grid

align grid size

Kind: static method of ax5grid

ax5grid.repaint() ⇒ ax5grid

Kind: static method of ax5grid

ax5grid.keyDown(_keyName, _data) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_keyName String
_data Event | Object

ax5grid.copySelect() ⇒ Boolean

Kind: static method of ax5grid
Returns: Boolean - copysuccess

ax5grid.setData(_data) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_data Array

Example

ax5Grid.setData({
 list: [],
 page: {
     currentPage: 0,
     pageSize: 50,
     totalElements: 500,
     totalPages: 100
 }
});

// onlyList
ax5Grid.setData([]);

ax5grid.getList(_type) ⇒ Array

Kind: static method of ax5grid

Param Type Description
_type String selected

Example

ax5Grid.getList();
ax5Grid.getList("selected");
ax5Grid.getList("modified");
ax5Grid.getList("deleted");

ax5grid.setHeight(_height) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_height Number

Example

ax5Grid.setHeight(height);

ax5grid.addRow(_row, [_dindex], [_options]) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Default Description
_row Object
[_dindex] Number | String last
[_options] Object options of addRow
[_options.sort] Boolean sortData
[_options.focus] Number | String HOME

Example

ax5Grid.addRow($.extend({}, {...}), "first");
ax5Grid.addRow($.extend({}, {...}), "last", {focus: "END"});
ax5Grid.addRow($.extend({}, {...}), "last", {focus: "HOME"});
ax5Grid.addRow($.extend({}, {...}), "last", {focus: 10});

ax5grid.appendToList(_list) ⇒ ax5grid

Kind: static method of ax5grid

Param
_list

Example

ax5Grid.appendToList([{},{},{}]);
ax5Grid.appendToList([{},{},{}]);

ax5grid.removeRow([_dindex]) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Default
[_dindex] Number | String last

Example

ax5Grid.removeRow();
ax5Grid.removeRow("first");
ax5Grid.removeRow("last");
ax5Grid.removeRow(1);
ax5Grid.removeRow("selected");

ax5grid.updateRow(_row, _dindex) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_row Object
_dindex Number

Example

firstGrid.updateRow({price: 100, amount: 100, cost: 10000}, 1);

ax5grid.updateChildRows(_dindex, _updateData, [_options]) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_dindex Number
_updateData Object
[_options] Object
[_options.filter] function

Example

onDataChanged: function () {
     this.self.updateChildRows(this.dindex, {isChecked: this.item.isChecked});
}

onDataChanged: function () {
     this.self.updateChildRows(this.dindex, {isChecked: this.item.isChecked}, {filter: function(){
         return this.item.type == "A";
     });
}

ax5grid.deleteRow(_dindex) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_dindex Number | String

Example

ax5Grid.deleteRow("first");
ax5Grid.deleteRow("last");
ax5Grid.deleteRow(1);
ax5Grid.deleteRow("selected");

ax5grid.setValue(_dindex, _key, _value) ⇒ ax5grid

Kind: static method of ax5grid

Param
_dindex
_key
_value

Example

ax5Grid.setValue(0, "price", 100);

ax5grid.addColumn(_column, [_cindex]) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Default
_column Object
[_cindex] Number | String last

ax5grid.removeColumn([_cindex]) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Default
[_cindex] Number | String last

ax5grid.updateColumn(_column, _cindex) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_column Object
_cindex Number

ax5grid.setColumnWidth(_width, _cindex) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_width Number
_cindex Number

ax5grid.getColumnSortInfo() ⇒ Object

Kind: static method of ax5grid
Returns: Object - sortInfo

ax5grid.setColumnSort(_sortInfo) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Description
_sortInfo Object
_sortInfo.key Object
_sortInfo.key.seq Number seq of sortOrder
_sortInfo.key.orderBy String “desc”

Example

ax5grid.setColumnSort({a:{seq:0, orderBy:"desc"}, b:{seq:1, orderBy:"asc"}});

ax5grid.select(_selectObject, _options) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Description
_selectObject Number | Object
_selectObject.index Number index of row
_selectObject.rowIndex Number rowIndex of columns
_selectObject.conIndex Number colIndex of columns
_options Object
_options.selectedClear Boolean
_options.selected Boolean

Example

firstGrid.select(0);
firstGrid.select(0, {selected: true});
firstGrid.select(0, {selected: false});
firstGrid.select(0, {selectedClear: true});

ax5grid.clearSelect() ⇒ ax5grid

Kind: static method of ax5grid
Example

firstGrid.clearSelect();

ax5grid.selectAll(_options) ⇒ ax5grid

Kind: static method of ax5grid

Param Type
_options Object
_options.selected Boolean
_options.filter function

Example

firstGrid.selectAll();
firstGrid.selectAll({selected: true});
firstGrid.selectAll({selected: false});
firstGrid.selectAll({filter: function(){
     return this["b"] == "A01";
});
firstGrid.selectAll({selected: true, filter: function(){
     return this["b"] == "A01";
});

ax5grid.exportExcel(_fileName) ⇒ ax5grid | String

Kind: static method of ax5grid

Param Type
_fileName String

Example

firstGrid.exportExcel("grid-to-excel.xls");
console.log(firstGrid.exportExcel());

ax5grid.focus(_pos) ⇒ ax5grid

Kind: static method of ax5grid

Param Type Description
_pos String | Number UP, DOWN, LEFT, RIGHT, HOME, END

Example

firstGrid.focus("UP");
firstGrid.focus("DOWN");
firstGrid.focus("HOME");
firstGrid.focus("END");

ax5grid.destroy() ⇒ null

Kind: static method of ax5grid

AX5UI Package

'AX5UI' can be used with Bootstrap theme. The development of the distribution of the various UI plug-in. When you click the link to move to AX5UI index page.

Get AXBoot

AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.

Code licensed
MIT
Mantained by
Thomas Jang, Brant and Team AXISJ
Templete design by
Jorwrney Kim
Copyright
Opensource Group AXISJ - www.axisj.com
DNS
DNSEver