带有复选框的kendo listView以及全选复选框选项 [英] kendo listView with checkbox along with select all checkbox option

问题描述

我是kendo UI实施的新手，正在寻找一种创建带有复选框的列表视图的方法，第一个复选框是All Option，如果选中该选项，则可以选择listview中的所有项目.我创建了一个模板，允许我向项目添加复选框，但是我需要在所有数据之上添加一个ALL复选框.这是我到目前为止所做的，下面是我想要实现的(截图).

I am new to kendo UI implementation and am looking for a way to create a listview with checkbox, the very first checkbox being All Option to select all items in listview if it is checked. I have created a template that allows me to add checkbox to the items, But i need to add a ALL checkbox on top of all the data. this is what i have worked in so far, Below (screenshot) is what i would like to achieve.

这是我的模板:

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

推荐答案

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

Your code seem like this: 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重新绑定数据后重新绑定您的事件.

//更新

要获取复选框值:

确保您的列表由"form"标签包裹

Make sure your list was wrapped by "form" tag

<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的序列化方法的值:

Go get values you can use serialize method of 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时，结果将如下所示:

When you call getCheckedBoxValue, result will like this:

chkValue=Ikura1,Ikura2,Ikura3

这篇关于带有复选框的kendo listView以及全选复选框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！