Merge Cells

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>

Declare mergeCells as a property of the body and declare its value as true or key array. When the mergeCells attribute is activated, it merges when the cell value of the previous row among the cells in the body region of the grid is the same as the cell value of the current row.

바디의 속성으로 mergeCells를 선언하고 그것의 값을 true 또는 Key Array로 선언합니다. mergeCells 속성이 활성화 되면 그리드의 바디영역안에 셀들중 이전 행의 셀 값이 현재 행의 셀 값과 같은 경우 머지 하여 줍니다.

body: {
    mergeCells: ["a", "b", "userType"]
}

body: {
    mergeCells: true // all
}

<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", align: "center"},
                {key: "b", label: "field  B", align: "center"},
                {key: "price", label: "price", align: "center"},
                {key: "amount", label: "amount", align: "center"},
                {key: "saleDt", label: "saleDate", align: "center"},
                {key: "customer", label: "Customer", align: "center"},
                {key: "userType", label: "User Type", align: "center"}
            ],
            body:{
                mergeCells: ["a", "b", "userType"]
            }
        });
        firstGrid.setData(gridList);

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