{key: “abc”, label: “name”, width: 120, editor: { type: “text” }}
gridList.addRow(
그리드에 행추가후에 abc컬럼을 disabled 하고 싶습니다
addRow 안에 옵션이 있나요?
아니면 addRow 후에 gridList 이용해서 abc컬럼을 disabled 할 수 있는 방법을 알고싶습니다
조건에 따라 행마다 disabled 될수도 있고 안될수도 있습니다
{key: “abc”, label: “name”, width: 120, editor: { type: “text” }}
gridList.addRow(
그리드에 행추가후에 abc컬럼을 disabled 하고 싶습니다
addRow 안에 옵션이 있나요?
아니면 addRow 후에 gridList 이용해서 abc컬럼을 disabled 할 수 있는 방법을 알고싶습니다
조건에 따라 행마다 disabled 될수도 있고 안될수도 있습니다
updateColumn을 사용하시면 해결되실 것 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>그리드 예제</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>
<button onclick="window.click(); return false;">add row</button>
<script type="text/javascript">
var myGrid = new ax5.ui.grid();
$(document.body).ready(function () {
myGrid.setConfig({
header: {
selector: false
},
showRowSelector: true,
target: $('[data-ax5grid="my-grid"]'),
columns: [
{key: "abc", label: "abc", width: 100, editor: {type: "text"}},
{key: "age", label: "age", width: 100}
]
});
// 그리드 데이터 가져오기
myGrid.setData([
{abc: "a", age: 10},
{abc: "b", age: 11},
{abc: "c", age: 12},
{abc: "d", age: 13},
{abc: "e", age: 14},
{abc: "f", age: 15},
{abc: "g", age: 16}
]);
window.click = function () {
// add row
myGrid.addRow({abc: "h", age: 17});
// abc 컬럼 업데이트
myGrid.updateColumn({
key: "abc", label: "abc", width: 100, editor: {
type: "text", disabled: function () {
// 조건별로 disabled 처리
return this.item.age % 2;
}
}
}, 0);
}
});
</script>
</body>
</html>