我是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/
答案 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();
}
});
});
<强> //更新强>
获取复选框值:
确保您的列表包含在"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的演示