ax5ui-grid
Version:
A grid plugin that works with Bootstrap & jQuery
311 lines (288 loc) • 14.3 kB
HTML
<!--
~ Copyright (c) 2017. tom@axisj.com
~ - github.com/thomasjang
~ - www.axisj.com
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>GRID</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-mask/dist/ax5mask.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-calendar/dist/ax5calendar.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-picker/dist/ax5picker.css"/>
<link rel="stylesheet" type="text/css" href="../../ax5ui-select/dist/ax5select.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../dist/ax5grid.css"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../ax5core/dist/ax5core.js"></script>
<script src="../../ax5ui-formatter/dist/ax5formatter.min.js"></script>
<script src="../../ax5ui-calendar/dist/ax5calendar.min.js"></script>
<script src="../../ax5ui-picker/dist/ax5picker.min.js"></script>
<script src="../../ax5ui-select/dist/ax5select.js"></script>
<script src="../dist/ax5grid.js"></script>
</head>
<body style="padding: 20px;">
<div style="padding: 10px;">
<button class="btn btn-default" data-grid-control="row-add">row add</button>
<button class="btn btn-default" data-grid-control="row-remove">row remove</button>
<button class="btn btn-default" data-grid-control="row-delete">row delete</button>
<button class="btn btn-default" data-grid-control="row-update">row update</button>
<button class="btn btn-default" data-grid-control="cell-update">cell update</button>
</div>
<div style="padding: 10px;">
<button class="btn btn-default" data-grid-control="select-row-toggle">toggle select list[0]</button>
<button class="btn btn-default" data-grid-control="select-row-true">select list[0]</button>
<button class="btn btn-default" data-grid-control="select-row-false">deselect list[0]</button>
<button class="btn btn-default" data-grid-control="select-all-toggle">toggle selectAll</button>
<button class="btn btn-default" data-grid-control="select-all-true">select selectAll</button>
<button class="btn btn-default" data-grid-control="select-all-false">deselect selectAll</button>
<button class="btn btn-default" data-grid-control="get-list-selected">getList("selected");</button>
<button type="button" class="btn btn-default" data-grid-control="excel">Excel</button>
</div>
<div style="height: 10px;"></div>
<div style="border:1px solid #0a68b4;position: relative;" id="grid-parent">
<div
data-ax5grid="first-grid"
data-ax5grid-config="{
frozenColumnIndex: 2,
frozenRowIndex: 2,
showLineNumber: true,
showRowSelector: true,
lineNumberColumnWidth: 60,
rowSelectorColumnWidth: 25
}"
style="height: 300px;">
</div>
</div>
<TEXTAREA ID="holdtext" STYLE="position:absolute;top:-1000px;"></TEXTAREA>
<script>
var firstGrid = new ax5.ui.grid();
var sampleData = [
{id: 0, name: "Thomas Jang", price: 1000, amount: null, saleDt: "2016-08-29", customer: "장기영", saleType: "A", isChecked: "N", collapse: true},
{pid: "0", id: "2", name: "Seowoo", price: 1100, amount: 11, saleDt: "2016-08-28", customer: "장서우", saleType: "B", isChecked: "N"},
{pid: "0", id: "3", name: "Mondo", price: 1200, amount: 10, saleDt: "2016-08-27", customer: "이영희", saleType: "A", isChecked: "N"},
{pid: "0", id: "4", name: "Brant", price: 1300, amount: 8, saleDt: "2016-08-25", customer: "황인서", saleType: "C", isChecked: "N"},
{pid: "4", id: "5", name: "Tiffany", price: 1500, amount: 2, saleDt: "2016-08-26", customer: "이서연", saleType: "A", isChecked: "N"},
{pid: "4", id: "6", name: "Edward", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "황세진", saleType: "D", isChecked: "N"},
{pid: "4", id: "7", name: "Bill", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "이하종", saleType: "B", isChecked: "N"},
{pid: "0", id: "8", name: "Aeei", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "김혜미", saleType: "C", isChecked: "N"}
];
ax5.ui.grid.collector["depth0sum"] = function () {
var value = 0, i = this.list.length;
while (i--) {
if (!("__groupingList" in this.list[i]) && this.list[i].__depth__ == 0) {
value += ax5.util.number(this.list[i][this.key]);
}
}
return value;
};
///
var gridView = {
initView: function () {
firstGrid.setConfig({
target: $('[data-ax5grid="first-grid"]'),
frozenColumnIndex: 3,
frozenRowIndex: 2,
showLineNumber: true,
showRowSelector: true,
multipleSelect: true,
lineNumberColumnWidth: 40,
rowSelectorColumnWidth: 28,
virtualScrollX: true,
sortable: true, // 모든 컬럼에 정렬 아이콘 표시
multiSort: false, // 다중 정렬 여부
remoteSort: false, // remoteSort에 함수를 sortable 컬럼이 클릭되었을때 실행 setColumnSort를 직접 구현. (remoteSort를 사용하면 헤더에 정렬 상태만 표시 하고 데이터 정렬은 처리 안함)
header: {
align: "center",
columnHeight: 28
},
body: {
align: "center",
columnHeight: 28,
onClick: function () {
},
onDataChanged: function () {
if (this.key == 'isChecked') {
this.self.updateChildRows(this.dindex, {isChecked: this.item.isChecked}, {
filter: function (item) {
return item.saleType != "A";
}
});
}
else if (this.key == '__selected__') {
this.self.updateChildRows(this.dindex, {__selected__: this.item.__selected__});
}
}
},
columns: [
{
key: "id",
label: "필드A",
width: 80,
styleClass: function () {
return "ABC";
},
enableFilter: true,
align: "center",
editor: {
type: "text", disabled: function () {
// item, value
return false;
}
}
},
{key: "name", label: "필드B", align: "left", width: 200, treeControl: true, editor: {type: "text"}},
{
key: "isChecked", label: "체크박스", width: 50, sortable: false, editor: {
type: "checkbox", config: {height: 17, trueValue: "Y", falseValue: "N"}
}
},
{key: "price", label: "단가", formatter: "money", align: "right"},
{key: "amount", label: "수량", formatter: "money", align: "right"},
{key: "cost", label: "금액", align: "right", formatter: "money"},
{
key: "saleType", label: "판매타입", editor: {
type: "select", config: {
columnKeys: {
optionValue: "CD", optionText: "NM"
},
options: [
{CD: "A", NM: "A: String"},
{CD: "B", NM: "B: Number"},
{CD: "C", NM: "C: substr"},
{CD: "A", NM: "A: String"},
{CD: "B", NM: "B: Number"},
{CD: "C", NM: "C: substr"},
{CD: "A", NM: "A: String"},
{CD: "B", NM: "B: Number"},
{CD: "C", NM: "C: substr"},
{CD: "A", NM: "A: String"},
{CD: "B", NM: "B: Number"},
{CD: "C", NM: "C: substr"},
{CD: "D", NM: "D: substring"}
]
}
}
},
{
key: "saleDt", label: "판매일자", align: "center", editor: {
type: "date", config: {}
}
},
{
key: "customer", label: "고객명", editor: {type: "text"}
},
{
key: "hash", label: "hash", width: 300, align: "left", formatter: function () {
return this.item["__hs__"];
}
}
],
page: {
navigationItemCount: 9,
height: 30,
display: true,
firstIcon: '<i class="fa fa-step-backward" aria-hidden="true"></i>',
prevIcon: '<i class="fa fa-caret-left" aria-hidden="true"></i>',
nextIcon: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
lastIcon: '<i class="fa fa-step-forward" aria-hidden="true"></i>',
onChange: function () {
gridView.setData(this.page.selectPage);
}
},
tree: {
use: true,
indentWidth: 10,
arrowWidth: 15,
iconWidth: 18,
icons: {
openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
collapsedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
groupIcon: '<i class="fa fa-folder-open" aria-hidden="true"></i>',
collapsedGroupIcon: '<i class="fa fa-folder" aria-hidden="true"></i>',
itemIcon: '<i class="fa fa-circle" aria-hidden="true"></i>'
},
columnKeys: {
parentKey: "pid",
selfKey: "id"
}
},
footSum: [
[
{label: "전체 합계", colspan: 3, align: "center"},
{key: "price", collector: "depth0sum", formatter: "money", align: "right"},
{key: "amount", collector: "depth0sum", formatter: "money", align: "right"},
{key: "cost", collector: "depth0sum", formatter: "money", align: "right"}
]]
});
return this;
},
setData: function (_pageNo) {
firstGrid.setData(sampleData);
return this;
}
};
$(document.body).ready(function () {
gridView
.initView()
.setData();
$('[data-set-height]').click(function () {
var height = this.getAttribute("data-set-height");
if (height == "100%") {
$("#grid-parent").css({height: 500});
} else {
$("#grid-parent").css({height: "auto"});
}
firstGrid.setHeight(height);
});
$('[data-grid-control]').click(function () {
switch (this.getAttribute("data-grid-control")) {
case "row-add":
firstGrid.addRow({pid: "3", id: firstGrid.list.length, name: "A99", price: 1500, amount: 2, saleDt: "2016-08-26", customer: "이서연", saleType: "A", isChecked: "N"}, "first");
break;
case "row-remove":
firstGrid.removeRow(2); // 완전제거
break;
case "row-delete":
firstGrid.deleteRow("selected");
break;
case "row-update":
firstGrid.updateRow($.extend({}, firstGrid.list[1], {price: 100, amount: 100, cost: 10000}), 1);
break;
case "cell-update":
firstGrid.setValue(0, "price", 100);
break;
case "select-row-toggle":
firstGrid.select(0);
break;
case "select-row-true":
firstGrid.select(0, {selected: true});
break;
case "select-row-false":
firstGrid.select(0, {selected: false});
break;
case "select-all-toggle":
firstGrid.selectAll();
break;
case "select-all-true":
firstGrid.selectAll({selected: true});
break;
case "select-all-false":
firstGrid.selectAll({selected: false});
break;
case "get-list-selected":
console.log(firstGrid.getList("selected"));
break;
case "excel":
$("body").append(firstGrid.exportExcel());
break;
}
});
});
</script>
</body>
</html>