Frozen Column&Row

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="{
                    frozenColumnIndex: 3,
                    frozenRowIndex: 2,
                    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", width: 80},
                {key: "b", label: "field B", width: 80},
                {
                    label: "Group", columns: [ // child columns
                        {key: "d", label: "field D"},
                        {key: "e", label: "field E"},
                        {key: "f", label: "field F"}
                    ]
                },
                {key: "c", label: "field C", width: 200},
                {key: "g", label: "field G", width: 300},
                {key: "h", label: "field H"}
            ]
        });
        firstGrid.setData(gridList);

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

The frozenColumnIndex property allows you to set a fixed column. For non-group columns, development is simple and easy to understand. However, the problem is not simple if a fixed column is set between grouped columns. ax5grid divides and processes the grouped columns based on the fixed columns.

frozenColumnIndex속성을 이용하여 틀고정 컬럼을 설정 할 수 있습니다. 그룹이 아닌 컬럼인 경우엔 개발도 간단하고 이해도 쉽습니다. 하지만 그룹된 컬럼의 사이로 틀고정 컬럼이 설정된다면 문제가 간단하지 않습니다. ax5grid는 틀고정 컬럼을 기준으로 그룹된 컬럼을 나누어 처리합니다.