3

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

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

带有复选框的列表视图

4

2 回答 2

6

您的代码如下所示：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. 在 kendo-list 模板之前插入一个复选框（用于全选）
  2. 当用户点击 Check-all Input 时，其他输入也将被检查。
  3. 在 kendo-list 重新绑定数据之后重新绑定您的事件。

//更新

要获取复选框值：

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

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

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

<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
于 2013-04-14T14:24:18.217 回答
2

我认为您正在寻找树视图。查看 Kendo 的演示：

复选框

于 2013-04-15T06:31:44.720 回答