New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
안녕하세요 #42
Comments
모두 가능합니다. |
안녕하세요 :) 아래는 예제 소스 입니다. <!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에 방문하셔서 스타 한 번씩만 눌러주시면 감사하겠습니다. |
답변 감사합니다! (주변사람들에게도 추천 중이에요!) 저상태에서 merge도 진행하면 되겠죠? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
안녕하세요
혹시 아래와 같이도 구성이 가능하나요..?
text : 텍스트 (edit는 되면 안된다)
edit : 수정
button : 버튼
empty : 공백 (edit는 되면 안된다)
각 row및 col마다 개별적으로 컨트롤 할 수 있게요..
아님 기능을 따로 추가해야 할까요..?
The text was updated successfully, but these errors were encountered: