我使用MVC + kendoui网格,这是我的代码:
模型
public class User
{
[StringLength(9)]
public int UserId { get; set; }
[StringLength(50)]
public string UserName { get; set; }
public bool IsSelected { get; set; }
}
CSHTML
@model IEnumerable<PoliciesHaglasha.Models.User>
@{
Layout = null;
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var users = MvcHtmlString.Create(serializer.Serialize(Model));
}
JsonUsers = @users;
var UsersSource = new kendo.data.DataSource({
pageSize: 5,
data: JsonUsers,
autoSync: true,
schema: {
model: {
id: "UserId",
fields: {
UserId: { type: "number" ,editable: false, nullable: false },
UserName: { type: "string" , editable: false, nullable: false }
}
}
}
});
$("#gridPolisot").kendoGrid({
dataSource: PolisotSource,
editable: true,
scrollable: false,
selectable: "row",
sortable: true,
reorderable: true,
toolbar: [{ name: "save", text: "save" }],
columns: [
{ field:"IsSelected", title: "<input type='checkbox' id='chkSelectAll'>", width: "34px" ,template: "<input type='checkbox' #= IsSelected ? checked='checked' : '' #/>"},
{ field:"UserId", title: "User Id", width: "20px", attributes: {"class": "KendoUITD"}},
{ field:"UserName",title:"User Name", width: "50px", attributes: {"class": "KendoUITD"}},
],
},
});
我的问题是:
1)如何选择所有标题复选框?
2)当我选中/取消选中一个复选框时,它将返回服务器
谢谢,
答案 0 :(得分:8)
1)您应该使用网格的headerTemplate配置选项:
headerTemplate: "<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)'/>"
然后将“checkAll”功能添加到页面:
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $('#gridPolisot').data('kendoGrid');
$.each(grid.dataSource.view(), function () {
if (this['IsSelected'] != state)
this.dirty=true;
this['IsSelected'] = state;
});
grid.refresh();
}
2)我不确定我是否正确理解您要实现的目标,但是如果您需要将上述功能的更改与服务器同步,那么您也可以调用网格 saveChanges method。