Control Display(header/page)

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>

<div style="position: relative;height:300px;" 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>
<div style="padding: 10px;">
    <button class="btn btn-default" data-grid-control="toggle-header">show/hide header</button>
    <button class="btn btn-default" data-grid-control="toggle-page">show/hide page</button>
</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"]'),
            frozenColumnIndex: 3,
            frozenRowIndex: 2,
            header: {
                display: false,
                columnHeight: 40
            },
            columns: [
                {key: "a", label: "field A", align: "center"},
                {key: "b", label: "field  B", align: "center"},
                {key: "price", label: "price", align: "center"},
                {key: "amount", label: "amount", align: "center"},
                {key: "saleDt", label: "saleDate", align: "center"},
                {key: "customer", label: "Customer", align: "center"},
                {key: "userType", label: "User Type", align: "center"}
            ],
            body: {
                columnHeight: 40
            },
            page: {
                display: false
            }
        });
        firstGrid.setData(gridList);

        // 그리드 데이터 가져오기
        /*
        $.ajax({
            method: "GET",
            url: API_SERVER + "/api/v1/ax5grid/order",
            success: function (res) {
                firstGrid.setData(res);
            }
        });
        */

        $('[data-grid-control]').click(function () {
            switch (this.getAttribute("data-grid-control")) {
                case "toggle-header":
                    firstGrid
                        .setConfig({
                            header: {
                                display: !firstGrid.config.header.display
                            }
                        }, false)
                        .align();
                    break;
                case "toggle-page":
                    firstGrid
                        .setConfig({
                            page: {
                                display: !firstGrid.config.page.display
                            }
                        }, false)
                        .align();
                    break;
            }
        });
    });
</script>