API.md

ax5grid

Kind: global class
Author: [email protected]

• ax5grid
  • .setConfig(_config) ⇒ ax5grid
  • .align() ⇒ ax5grid
  • .repaint() ⇒ ax5grid
  • .keyDown(_keyName, _data) ⇒ ax5grid
  • .copySelect() ⇒ Boolean
  • .setData(_data) ⇒ ax5grid
  • .getList(_type) ⇒ Array
  • .setHeight(_height) ⇒ ax5grid
  • .addRow(_row, [_dindex], [_options]) ⇒ ax5grid
  • .appendToList(_list) ⇒ ax5grid
  • .removeRow([_dindex]) ⇒ ax5grid
  • .updateRow(_row, _dindex) ⇒ ax5grid
  • .updateChildRows(_dindex, _updateData, [_options]) ⇒ ax5grid
  • .deleteRow(_dindex) ⇒ ax5grid
  • .setValue(_dindex, _key, _value) ⇒ ax5grid
  • .addColumn(_column, [_cindex]) ⇒ ax5grid
  • .removeColumn([_cindex]) ⇒ ax5grid
  • .updateColumn(_column, _cindex) ⇒ ax5grid
  • .setColumnWidth(_width, _cindex) ⇒ ax5grid
  • .getColumnSortInfo() ⇒ Object
  • .setColumnSort(_sortInfo) ⇒ ax5grid
  • .select(_selectObject, _options) ⇒ ax5grid
  • .clearSelect() ⇒ ax5grid
  • .selectAll(_options) ⇒ ax5grid
  • .exportExcel(_fileName) ⇒ ax5grid | String
  • .focus(_pos) ⇒ ax5grid
  • .destroy() ⇒ null

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