-3
배열에 변경 사항을 적용한 다음 사용자 정의 컨트롤에서 데이터를 편집해야합니다. 이 내 snipet 예. 내가 시도하지 않았으므로, 나는 그것을 할 수 없다. 내가 어떻게 만들 수 있니?내 배열을 변경하는 방법은 무엇입니까?
배열에 변경 사항을 적용한 다음 사용자 정의 컨트롤에서 데이터를 편집해야합니다. 이 내 snipet 예. 내가 시도하지 않았으므로, 나는 그것을 할 수 없다. 내가 어떻게 만들 수 있니?내 배열을 변경하는 방법은 무엇입니까?
다음 코드 스 니펫으로 시도해보십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
</head>
<body>
<a id="btnShowTest" href="#">Test</a>
<div id="layout"></div>
<script>
var root = {};
root.data =
[
{
code: 1,
name: "Test1",
status: true
},
{
code: 2,
name: "Test2",
status: true
},
{
code: 3,
name: "Test3",
status: false
},
];
$(function() {
$("#btnShowTest").kendoButton().click(function (e) {
Show();
});
root.ds = new kendo.data.DataSource(
{
pageSize: 10,
schema:
{
model:
{
id: "code",
fields:
{
code:
{
editable: false,
nullable: true
},
name:
{
type: "string"
},
status:
{
type: "boolean"
},
}
}
},
data: root.data
});
$("#layout").kendoListView(
{
dataSource: root.ds,
template: kendo.template($("#managersTemplate").html())
});
});
function Show() {
//root.ds.sync();
// var arr = root.ds.data();
var arr = root.data;
var str = "";
for (var i = 0; i < arr.length; ++i) {
str += arr[i].status + ", ";
}
alert(str);
}
function testclick(obj) {
var arr = root.data;
for (var i = 0; i < arr.length; ++i) {
if (arr[i].code == $(obj).attr('id')) {
arr[i].status = $(obj).prop('checked');
}
}
}
</script>
<script type="text/x-kendo-tmpl" id="managersTemplate">
<div >
<input type="checkbox" data-bind="checked:status" name="status" id="#:code#" onclick="testclick(this)" />
<span class="checkbox">#:name#</span>
</div>
</script>
</body>
</html>
우려 사항이 있으면 알려주세요.