Foot Summary

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

FootSum is a two-dimensional array. It is designed as a two-dimensional array considering that the summary to be printed in the bottom area of the grid is several lines. The footSum has a column that lists only the label and a {} column that allows you to add a blank space at the end of the column that outputs the result of declaring the key and collector, as well as outputting the string.

footSum은 2차원 배열입니다. 그리드 맨 아래 영역에 출력될 summary가 여러줄 일때는 고려해 2차원 배열로 설계 하였습니다. footSum은 label만 선언하여 문자열을 출력하는 컬럼과 key, collector를 선언하여 연산된 결과를 출력하는 컬럼 끝으로 빈 공백을 추가할 수 있는 {}컬럼이 있습니다.

footSum: [
    [
        {label:"~~~", colspan:2},
        {},
        {key:"a", collector:"sum", formatter:"money"}
    ]
]

The columns that output the computed result by declaring the key and collector are output by checking the formatter when outputting the computed result.

key, collector를 선언하여 연산된 결과를 출력하는 컬럼은 연산된 결과 값을 출력할 때 formatter여부를 확인하여 출력됩니다.

<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"}
            ],
            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);
            }
        });
        */
    });
</script>