问题描述
我是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();
}
});
});
- 在剑道列表模板之前插入一个复选框(用于全部选中)
- 当用户点击全部输入"时,也会检查其他输入.
- 在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以及全选复选框选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!