Sort Column

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: 0,
                    showLineNumber: true,
                    showRowSelector: true,
                    lineNumberColumnWidth: 40,
                    rowSelectorColumnWidth: 26
                }" 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"]'),
            header: {
                align: "center"
            },
            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: "c", label: "<b>field C</b>", width: 100, sortable: true, align: "right"},
                {key: "g", label: "field G", width: 100},
                {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 you give the column or grid a sortable: true value, the sortable display is enabled for a specific column or an entire column in the column header. In the following example, if sortable: false is applied to a particular column after sortable: true on the grid, only the sortable display of the specific column is disabled.

컬럼또는 그리드에 sortable:true 값을 주면 컬럼헤더의 특정 컬럼또는 전체 컬럼에 sortable 표시가 활성화 됩니다. 다음의 예제에서는 그리드에 sortable:true후에 특정 컬럼에 sortable:false하게 되면 특정 컬럼만 sortable 표시가 비 활성화 됩니다.

<div data-ax5grid="second-grid" data-ax5grid-config="{
                    frozenColumnIndex: 3,
                    frozenRowIndex: 0,
                    showLineNumber: true,
                    showRowSelector: true,
                    lineNumberColumnWidth: 40,
                    rowSelectorColumnWidth: 26
                }" 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"]'),
            header: {
                align: "center"
            },
            sortable: true,
            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: "c", label: "<b>field C</b>", width: 100, sortable: false, align: "right"},
                {key: "g", label: "field G", width: 100},
                {key: "h", label: "field H"}
            ]
        });
        secondGrid.setData(gridList);
        // 그리드 데이터 가져오기
        /*
        $.ajax({
            method: "GET",
            url: API_SERVER + "/api/v1/ax5grid",
            success: function (res) {
                secondGrid.setData(res);
            }
        });
        */
    });
</script>