Paste the following code into the head section of your site’s HTML.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
HTML
<div style="position: relative;height:400px;" id="grid-parent">
<div data-ax5grid="first-grid" data-ax5grid-config="{
showLineNumber: true,
showRowSelector: true,
sortable: true,
header: {align:"center"}
}" style="height: 100%;"></div>
</div><script type="text/javascript">
$(document.body).ready(function () {
var API_SERVER = "http://api-demo.ax5.io";
var firstGrid = new ax5.ui.grid({
target: $('[data-ax5grid="first-grid"]'),
columns: [
{key: "a", label: "field A", width: 80, align: "center", editor: {type: "text"}},
{
key: "b", label: "field B", align: "center", editor: {
type: "text",
disabled: function () {
// 필드 B의 에이트 활성화 여부를 item.a의 값으로 런타임 판단.
return this.item.a == "A";
}
}
}
]
});
firstGrid.setData(gridList);
// 그리드 데이터 가져오기
/*
$.ajax({
method: "GET",
url: API_SERVER + "/api/v1/ax5grid/order",
success: function (res) {
firstGrid.setData(res);
}
});
*/
});
</script>
'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.
AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.