Excel Export

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/ax5ui-grid/master/dist/ax5grid.min.js"></script>

<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>

<div style="padding: 10px;">
    <button class="btn btn-default" data-grid-control="excel-export">Excel Export</button>
    <button class="btn btn-default" data-grid-control="excel-string">get Excel String</button>
</div>

Excel Export has tested downloading files from browsers such as IE, Chrome, Firefox, The Safari browser does not control file downloading, so it outputs the table in a new window. Copy the output table and use it. FirstGrid.exportExcel("grid-to-excel.xls");, the file is downloaded and the Table String is returned if there is no argument. Pass the returned string to the server to generate Excel. How to create an Excel file on the server is to search. If you are having difficulty resolving, please contact us at https://www.facebook.com/groups/axboot/.

Excel Export는 IE, Chrome, Firefox 등의 브라우저에서 파일 다운로드되는 것을 테스트 하였고, Safari 브라우저에서는 파일 다운로드 제어가 되지 않아 새창으로 테이블을 출력합니다. 출력된 테이블을 복사하여 사용하시면 됩니다. firstGrid.exportExcel("grid-to-excel.xls"); 처럼 저장하고 싶은 파일명을 인자로 전달하면 파일이 다운로드 되고 인자가 없으면 Table String이 리턴됩니다. 리턴된 문자열을 서버로 전달하여 엑셀을 생성 하세요. 서버에서 엑셀 파일을 생성하는 방법은 검색으로 찾으시면 되겠습니다. 해결이 어려우시면 (https://www.facebook.com/groups/axboot/) 에서 문의 하세요.

<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,
                    styleClass: function () {
                        return "ABC";
                    },
                    enableFilter: true,
                    align: "center"
                },
                {key: "b", label: "field  B", align: "center"},
                {
                    key: undefined, label: "field C", columns: [
                    {key: "price", label: "price", formatter: "money", align: "right"},
                    {key: "amount", label: "amount", formatter: "money", align: "right"},
                    {
                        key: "cost", label: "cost", align: "right", formatter: function () {
                        return ax5.util.number(this.item.price * this.item.amount, {"money": true});
                    }
                    }
                ]
                },
                {key: "saleDt", label: "saleDt", align: "center"},
                {key: "customer", label: "customer"},
                {key: "userType", label: "userType"}
            ],
            body: {
                grouping: {
                    by: ["a"],
                    columns: [
                        {
                            label: function () {
                                return this.groupBy.labels.join(", ") + " SUM";
                            }, colspan: 2, align: "center"
                        },
                        {key: "price", collector: "avg", formatter: "money", align: "right"},
                        {key: "amount", collector: "sum", formatter: "money", align: "right"},
                        {
                            key: "cost", collector: function () {
                            var value = 0;
                            this.list.forEach(function (n) {
                                if (!n.__isGrouping) value += (n.price * n.amount);
                            });
                            return ax5.util.number(value, {"money": 1});
                        }, align: "right"
                        }
                    ]
                }
            },
            footSum: [
                [
                    {label: "SUMMARY", colspan: 2, align: "center"},
                    {key: "price", collector: "avg", formatter: "money", align: "right"},
                    {key: "amount", collector: "sum", formatter: "money", align: "right"},
                    {
                        key: "cost", collector: function () {
                        var value = 0;
                        this.list.forEach(function (n) {
                            if (!n.__isGrouping) value += (n.price * n.amount);
                        });
                        return ax5.util.number(value, {"money": 1});
                    }, align: "right"
                    }
                ]]
        });
        firstGrid.setData(gridList);

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

        // grid control button
        $('[data-grid-control]').click(function () {
            switch (this.getAttribute("data-grid-control")) {
                case "excel-export":
                    firstGrid.exportExcel("grid-to-excel.xls");
                    break;
                case "excel-string":
                    console.log(firstGrid.exportExcel());
                    break;
            }
        });
    });
</script>