Column group

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,
                    lineNumberColumnWidth: 40,
                    rowSelectorColumnWidth: 25
                }" style="height: 300px;"></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"},
                {key: "b", label: "field B"},
                {
                    key: "c", label: "field C", columns: [ // child columns
                        {key: "d", label: "field D"},
                        {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) {
                firstGrid.setData(res);
            }
        });
        */
    });
</script>

If there is a column with columns among thecolumns items, the grid’s header is grouped. The rules for representing the body of a grid are different from headers, and if a key exists in a column, it is represented as a group. Here’s an example:

columns 아이템들중에 columns를 가진 column이 있다면 grid의 헤더를 그룹으로 표현합니다. grid의 body를 표현하는 규칙은 헤더와는 다르게 column에 key가 있으면 그룹으로 표현하고 key가 없으면 표현하지 않습니다. 예제로 설명하면 다음과 같습니다.

<div data-ax5grid="second-grid" data-ax5grid-config="{
                    showLineNumber: true
                }" style="height: 300px;"></div>

<script type="text/javascript">
    $(document.body).ready(function () {
        var API_SERVER = "http://api-demo.ax5.io";
        var secondGrid = new ax5.ui.grid({
            target: $('[data-ax5grid="second-grid"]'),
            columns: [
                {key: "a", label: "field A"},
                {key: "b", label: "field B"},
                {
                    label: "field C", columns: [ // child columns
                    {key: "d", label: "field D"},
                    {key: "e", label: "field E"},
                    {key: "f", label: "field F"}
                ]
                },
                {key: "g", label: "field G"},
                {key: "h", label: "field H"}
            ]
        });
        secondGrid.setData(gridList);

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