带有复选框的kendo listView以及全选复选框选项

我是kendo UI实现的新手，我正在寻找一种创建带复选框的列表视图的方法，第一个复选框是All Option，如果选中它，则选择listview中的所有项目。 我创建了一个模板，允许我添加项目的复选框，但我需要在所有数据的顶部添加一个ALL复选框。 这是我迄今为止所做的工作，下面（截图）是我想要实现的。

这是我的模板：

 
  #:ProductName# 
  

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

Answer 1

您的代码如下所示： http ： //jsfiddle.net/Archie/w6jsZ/

 
 
  All 
 
 
 
  $(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:"
 All
", dataBound: function(e) { checkboxEventBinding(); } }); }); 

1. 在kendo-list模板之前插入一个复选框（用于全部检查）
2. 当用户舔Check-all Input时，也会检查其他输入。
3. 在kendo-list重新绑定数据后重新绑定您的事件。

// UPDATE

要获取复选框值：

确保您的列表包含在"form"标记中

所有input标记都具有same name

去获取值可以使用jquery的serialize方法：

如果你输入：

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

 chkValue=Ikura1,Ikura2,Ikura3 

Answer 2

我想你正在寻找树视图。 看看kendo的演示

http://demos.kendoui.c​​om/web/treeview/checkboxes.html