带有复选框的剑道列表视图以及选择所有复选框选项 [英] kendo listView with checkbox along with select all checkbox option

问题描述

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

_

<div><输入类型=复选框"id="checkall"类=点击"/><span class="checkbox">All</span>
<div id="listView";class =k-listview">

<script type="text/x-kendo-tmpl";id=我的模板"><div class="item click";数据=${ProductID}"><输入类型=复选框"类=点击"/><span class="checkbox">#:ProductName#</span>

$(document).ready(function () {函数 checkboxEventBinding(){$('#checkall').bind('click',function(e){如果(this.checked){$('.item.click input').attr('checked','checked');}别的{$('.item.click input').removeAttr('checked');}})}var dataSource = new kendo.data.DataSource({运输: {读: {网址:http://demos.kendoui.c​​om/service/Products"，数据类型:jsonp"}}});$("#listView").kendoListView({数据源:数据源，模板:kendo.template($("#myTemplate").html()),headertemplate:<div class='item click' id='headerTemp' data='*'><input type='checkbox' class='click'/><span class='checkbox'>All</span></div>",数据绑定:函数(e){checkboxEventBinding();}});});

1. 在剑道列表模板前插入一个复选框(用于选中所有)
2. 当用户点击 Check-all Input 时，其他输入也会被选中.
3. 在剑道列表重新绑定数据后重新绑定您的活动.

//更新

获取复选框值:

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

<div id="listView";class =k-listview">

</表单>

所有 input 标签都具有相同的名称:

去获取值.您可以使用 jQuery 的序列化方法:

如果您的输入是

当你调用getCheckedBoxValue时，结果是这样的:

chkValue=Ikura1,Ikura2,Ikura3

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

_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. Insert a check-box (for check all) before the kendo-list template
2. When the user clicks on Check-all Input, other input will be checked too.
3. Rebind your event after the kendo-list rebind data.

//UPDATE

To get check-box values:

Make sure your list was wrapped by a "form" tag

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

All input tags have the 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>

Go get the values. You can use serialize method of jQuery:

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

If your input is

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

when you call getCheckedBoxValue, the result will like this:

chkValue=Ikura1,Ikura2,Ikura3

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