2014-12-21 1 views

답변

0

다음 코드 스 니펫으로 시도해보십시오.

<!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> 

우려 사항이 있으면 알려주세요.

관련 문제