Collector

Collector is a function that returns the output values of footSum columns and body.grouping columns. I hope you understand it like formatter. The collector also has predefined functions. Sum,avg. Other functions can be implemented directly.

collector는 footSum columns과 body.grouping columns의 출력 값을 반환하는 함수 입니다. formatter와 같이 이해 하시면 좋겠습니다. collector역시 미리 정의된 함수가 있습니다. sum, avg 입니다. 그 외의 함수는 직접 구현 하실 수 있습니다.

// capital formatter 추가
ax5.ui.grid.collector["special"] = function(){
    // console.log(this);
    var value = 0;
    this.list.forEach(function (n) {
        if (!n.__isGrouping) value += (n.price * n.amount);
    });
    return ax5.util.number(value, {"money": 1});
}

collector this

In the collector function, this is: You can freely program by using the value of the final return. collector 함수에 this는 다음과 같습니다. 최종 return 의 값을 사용 하므로 자유롭게 프로그래밍 할 수 있습니다.

{key: "c", list: Array[10]}

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>

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