Formatter

A formatter is a property of a column that outputs a column by replacing the value to be output with a predefined function name or a return value of a user-defined function. It contains predefined functions in the ax5.ui.grid.formatter object. The default defined formatter function is money. If you want to extend formatter, before you run the grid. Add the following code.

formatter는 컬럼의 출력 될 값을 미리 정의된 함수명 또는 사용자가 직접 정의한 함수의 리턴값으로 대체하여 출력하는 컬럼의 속성을 말합니다. ax5.ui.grid.formatter 오브젝트 안에 미리 정의된 함수들이 담겨 있습니다. 기본 정의된 formatter함수는 money입니다. 사용자가 formatter를 확장하고 싶다면, 그리드 실행전에. 다음의 코드를 추가 하시면 됩니다. formatter함수는 인라인으로도 사용가능합니다.

// capital formatter 추가
ax5.ui.grid.formatter["capital"] = function(){
    // console.log(this);
    return this.value.toUpperCase();
}

// inline formatter
firstGrid.setConfig({
    target: $('[data-ax5grid="first-grid"]'),
    columns: [
        {key: "c", label: "label", formatter: function(){
           return this.item.a + this.value;
        }}
    ]
});

formatter this

In the formatter function, this is: You can freely program because you use the last value returned.

{key: "c", value: 3000, index: 5, item: Object, list: Array[6]}

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 data-ax5grid="first-grid" data-ax5grid-config="{
                    showLineNumber: true,
                    showRowSelector: true,
                    multipleSelect: true
                }" style="height: 300px;"></div>

<script type="text/javascript">
    var API_SERVER = "http://api-demo.ax5.io";
    var firstGrid = new ax5.ui.grid();

    $(document.body).ready(function () {
        firstGrid.setConfig({
            target: $('[data-ax5grid="first-grid"]'),
            columns: [
                {key: "a", label: "field A"},
                {key: "b", label: "field B"},
                {key: "c", label: "<b>numbers C</b>", formatter: "money"},
                {key: "d", label: "field D", formatter: function(){
                    return this.item.c + "/" + this.value;
                }},
                {key: "e", label: "field E"},
                {key: "f", label: "field F"},
                {key: "g", label: "field G"},
                {key: "h", label: "field H"}
            ]
        });

        firstGrid.setData(gridList);
        // 그리드 데이터 가져오기
        /*
        $.ajax({
            method: "GET",
            url: API_SERVER + "/api/v1/ax5grid",
            success: function (res) {
                res.forEach(function (v, k) {
                   v.c = k * 1000;
                });
                firstGrid.setData(res);
            }
        });
        */
    });
</script>