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

时间:2013-04-14 04:42:45

标签: jquery jquery-plugins kendo-ui

我是kendo UI实现的新手,我正在寻找一种创建带复选框的列表视图的方法,第一个复选框是All Option,如果选中它,则选择listview中的所有项目。我创建了一个模板,允许我添加项目的复选框,但我需要在所有数据的顶部添加一个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/

LIstview with checkboxes

2 个答案:

答案 0 :(得分:5)

您的代码如下所示: 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 template
  2. 之前插入一个复选框(用于全部检查)
  3. 当用户舔Check-all Input时,也会检查其他输入。
  4. 在kendo-list重新绑定数据后重新绑定您的事件。
  5. <强> //更新

    获取复选框值:

    确保您的列表包含在"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的serialize方法:

    <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
    

答案 1 :(得分:2)

我认为你正在寻找树视图。请参阅kendo的演示

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