kendo listview with复选框以及选择所有复选框选项

Question

我是刚刚推出的kendo UI实现，并且正在寻找一种方法来创建带有复选框的listview，第一个复选框是All选项，以便在列表视图中选中所有项目。我创建了一个模板，允许我将复选框添加到项目中，但是我需要在所有数据之上添加一个ALL复选框。这是我到目前为止所做的工作，下面（截图）是我想要实现的。

这里是我的模板：

<script type="text/x-kendo-tmpl" id="myTemplate"> 
    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

http://jsfiddle.net/Archie/w6jsZ/

Answer 1

您的代码看起来是这样的： http://jsfiddle.net/Archie/w6jsZ/

<div style="width:250px;height:350px;overflow-y:scroll;"> 
    <div> 
     <input type="checkbox" id="checkall" class="click" /> 
     <span class="checkbox">All</span> 
    </div> 
    <div id="listView" class="k-listview" > 
    </div> 
</div> 
<script type="text/x-kendo-tmpl" id="myTemplate"> 

    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

$(document).ready(function() { 

    function checkboxEventBinding() 
    { 
     $('#checkall').bind('click',function(e){ 
      if(this.checked) 
      { 
       $('.item.click input').attr('checked','checked'); 
      } 
      else 
      { 
       $('.item.click input').removeAttr('checked'); 
      } 

     }) 
    } 
    var dataSource = new kendo.data.DataSource({ 
        transport: { 
         read: { 
         url: "http://demos.kendoui.com/service/Products", 
          dataType: "jsonp" 
         } 
       } 
       }); 
      $("#listView").kendoListView({ 
       dataSource: dataSource, 
       template: kendo.template($("#myTemplate").html()), 
       headertemplate:"<div class='item click' id='headerTemp' data='*'>  <input type='checkbox' class='click' /><span class='checkbox'>All</span></div>", 
       dataBound: function(e) { 
     checkboxEventBinding(); 
    } 
      }); 


     }); 

1. 在剑道列表模板前插入复选框（全部检查）
2. 当用户点击全部检查输入时，其他输入也会被检查。
3. 在kendo-list重新绑定数据后重新绑定您的事件。

// UPDATE

为了获得复选框值：

确保您的名单是由"form"标签

<form id="frmChk"> 
    <div id="listView" class="k-listview" > 
    </div> 
</form> 

所有input标签包裹有same name

<script type="text/x-kendo-tmpl" id="myTemplate"> 
    <div class="item click" data="${ProductID}"> 
     <input type="checkbox" name="chkValue" value="${ProductID}" class="click" /> 
     <span class="checkbox">#:ProductName#</span> 
    </div> 
</script> 

去拿值，您可以使用jQuery的序列化方法：

<script> 
    function getCheckedBoxValue() 
    { 
     $("#frmChk").serialize(); 
    } 
</script> 

如果输入：

<input type="checkbox" name="chkValue" value="Ikura1" class="click" /> 
<input type="checkbox" name="chkValue" value="Ikura2" class="click" /> 
<input type="checkbox" name="chkValue" value="Ikura3" class="click" /> 

当你调用getCheckedBoxValue，结果会是这样的：

chkValue=Ikura1,Ikura2,Ikura3 

Answer 2

我认为你正在寻找一个树形视图。请参阅从剑道

http://demos.kendoui.com/web/treeview/checkboxes.html