Basic

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>

To install the ax5grid component on a web page, you need a script that links the grid to the tag that the grid will print and the tag. You can use the data-ax5grid-config attribute to determine the properties of the grid via the tag element, or you can determine the properties of the grid instance with a script.

웹 페이지에 ax5grid 컴포넌트를 설치하기 위해서는 그리드가 출력될 태그와 태그에 그리드를 연결하는 스크립트가 필요합니다. data-ax5grid-config 속성을 이용하여 태그 엘리먼트를 통해 그리드의 속성을 결정하거나 스크립트로 그리드 인스턴스에 속성을 결정 할 수 있습니다.

HTML

<div data-ax5grid="first-grid" data-ax5grid-config="{}" 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();

        firstGrid.setConfig({
            target: $('[data-ax5grid="first-grid"]'),
            columns: [
                {key: "a", label: "field A"},
                {key: "b", label: "field B"},
                {key: "c", label: "numbers C"},
                {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"}
            ]
        });

        // {a: "A", b: "A01", c:"C", d:"D", e:"E", f:"F", g:"G"}
        // 값이 없는 h 는 표현안됨
        firstGrid.setData(gridList);
        // 그리드 데이터 가져오기
        /*
        $.ajax({
            method: "GET",
            url: API_SERVER + "/api/v1/ax5grid",
            success: function (res) {
                firstGrid.setData(res);
            }
        });
        */
    });
</script>

Column attribute

key : The key name of the data.
label : Header column display name
width : If you use the width value of the column ("*"), the width of the column becomes the remaining space. Also, if you do not declare `width`, the default value is set to` 100`. You can change the initial value with `setConfig ({columnMinWidth: 120})`.
align : Sort column labels
formatter : Used to convert the display value. You can use the predefined function name `money`. The formatter function definition can be defined directly with `ax5.ui.grid.formatter ["myFn"] = function () {}`.
styleClass : You can add a CSS class to the column. `String`, the CSS class is added to the corresponding column. If` Function` is specified, the return value of the function is added to the corresponding CSS class of the column
multiLine : All columns in the grid do not allow line feeds. Set this value to `true` if you want to allow line wrapping for that column.
sortable : Whether that column's alignment is visible

Setting up Grid attribute of tag

By default, the Grid’s property settings can be defined using the setConfig method. ax5grid allows the tag to recognize the value of the data-ax5grid-config attribute as an attribute of setConfig, which is optionally available to the user.

기본적으로 Grid의 속성설정은 setConfig메소드를 이용하여 정의할 수 있습니다. ax5grid는 태그에 data-ax5grid-config 속성의 값을 setConfig의 속성으로 인식하도록 되어 있어, 사용자는 선택적으로 이용이 가능합니다.

HTML

<div data-ax5grid="second-grid" data-ax5grid-config="{
                    showLineNumber: true,
                    columns: [
                        {key: "a", label: "field A"},
                        {key: "b", label: "field B"},
                        {key: "c", label: "numbers C"},
                        {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"}
                    ]
                }" 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"]')
        });

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

The first grid and the second grid differ in the way they are declared. The second grid does not use the setConfig method. ax5.ui.grid can define a property directly when declaring the UI (new), or by using setConfig at the time of declaration and time.

첫번째 그리드와 두번째 그리드는 선언방법에 차이점이 있습니다. 두번째 그리드는 setConfig메소드를 사용하지 않고 있습니다. ax5.ui.grid는 속성의 정의를 UI를 선언할 때(new) 바로 정의하거나, 선언타임과 시간을 두고 setConfig를 이용하여 정의할 수 있습니다.

Basic

Column attribute

Setting up Grid attribute of tag

AX5UI Package

Get AXBoot