안녕하세요 - Githubissues

ohHyunJae commented 7 years ago

안녕하세요

혹시 아래와 같이도 구성이 가능하나요..?

text : 텍스트 (edit는 되면 안된다) edit : 수정 button : 버튼 empty : 공백 (edit는 되면 안된다)

각 row및 col마다 개별적으로 컨트롤 할 수 있게요..

아님 기능을 따로 추가해야 할까요..?

thomasJang commented 7 years ago

모두 가능합니다. 보다 자세한 건 @aeei 님에게

aeei commented 7 years ago

안녕하세요 :) 말씀하신 기능들은 formatter와 inline edit disable를 사용하시면 구현 가능합니다!

아래는 예제 소스 입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Issue #42 그리드 예제</title>
    <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>
</head>
<body>
<div data-ax5grid="my-grid" data-ax5grid-config="{}" style="height: 300px;"></div>
<script type="text/javascript">
    var myGrid = new ax5.ui.grid();
    $(document.body).ready(function () {

        var fn_disabled = function () {
            return function () {
                return this.value != "edit";
            };
        };

        myGrid.setConfig({
            target: $('[data-ax5grid="my-grid"]'),
            columns: [
                {key: "a", label: "header1", editor: {type: "text", disabled: fn_disabled()}},
                {key: "b", label: "header2", editor: {type: "text", disabled: fn_disabled()}},
                {key: "c", label: "header3", editor: {type: "text", disabled: fn_disabled()}},
                {key: "d", label: "header4", editor: {type: "text", disabled: fn_disabled()}},
                {
                    key: "e", label: "header5", editor: {type: "text", disabled: fn_disabled()},
                    formatter: function () {
                        var returnValue = "";
                        switch (this.value) {
                            case "checkbox" :
                                returnValue = '<label><input type="checkbox"/> 체크박스</label>';
                                break;
                            case "button"   :
                                returnValue = '<button type="button" data-custom-btn="' + this.dindex + '">버튼</button>';
                                break;
                            default:
                                returnValue = this.value;
                                break;
                        }// end switch
                        return returnValue;
                    }
                }
            ]
        });

        // 그리드 데이터 가져오기
        myGrid.setData([
            {a: "merge", b: "merge", c: "merge", d: "edit", e: "checkbox"},
            {a: "merge", b: "merge", c: "merge", d: "text", e: "empty"},
            {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
            {a: "text", b: "text", c: "text", d: "edit", e: "text"},
            {a: "text", b: "text", c: "text", d: "edit", e: "text"},
            {a: "text", b: "text", c: "text", d: "edit", e: "text"}
        ]);

        $('[data-custom-btn]').on("click", function () {
            alert(this.getAttribute("data-custom-btn"));
        });
    });
</script>
</body>
</html>

도움이 되셨다면 ax-boot-framework, ax5ui-kernel에 방문하셔서 스타 한 번씩만 눌러주시면 감사하겠습니다.

ohHyunJae commented 7 years ago

답변 감사합니다! (주변사람들에게도 추천 중이에요!)

저상태에서 merge도 진행하면 되겠죠?

ax5ui / ax5ui-grid

안녕하세요 #42