1.视图端(views)的配置为:
<script>
$(document).ready(function() {
$("#info-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("ListInfo", "GradeMessage"))",
type: "POST",
dataType: "json",
data: additionalData
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
editable: {
confirmation:false,
mode: "inline"
},
scrollable: false,
columns: [ {//列配置
field: "Id",//选择框
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50
},
{
field: "CompetitorName",
title: "@T("Admin.GradeMessage.CompetitorName")",
width:100,
{
field: "Id",
title: "@T("Admin.Common.Edit")",
width: 100,
template: '<a href="Edit/#=Id#">@T("Admin.Common.Edit")</a>'
}
]
});
});
</script>
2.选中选择框中值
<script type="text/javascript">
var selectedIds = [];
$(document).ready(function () {
//search button
$('#search-info').click(function ()
{
//search
var grid = $('#info-grid').data('kendoGrid');
grid.dataSource.page(1); //new search. Set page size to 1
//grid.dataSource.read(); we already loaded the grid above using "page" function
//clear selected checkboxes
$('.checkboxGroups').attr('checked', false).change();
selectedIds = [];
return false;
});
// search CompetitorName
$("#@Html.FieldIdFor(model => model.CompetitorName)").keydown(function (event) {
if (event.keyCode === 13) {
$("#search-info").click();
return false;
}
});
//delete selected
$('#delete-selected').click(function(e) {
e.preventDefault();
var postData = {
selectedIds: selectedIds
};
addAntiForgeryToken(postData);
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("DeleteSelected", "GradeMessage"))",
data: postData,
complete: function(data) {
//reload grid
var grid = $('#info-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
return false;
});
$('#mastercheckbox').click(function () {
$('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
});
//wire up checkboxes.
$('#info-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function (e) {
var $check = $(this);
if ($check.is(":checked") == true) {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked == -1) {
//add id to selectedIds.
selectedIds.push($check.val());
}
}
else {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked > -1) {
//remove id from selectedIds.
selectedIds = $.grep(selectedIds, function (item, index) {
return item != $check.val();
});
}
}
updateMasterCheckbox();
});
});
//参赛者姓名搜索
function additionalData()
{
var data = {
keyName: $('#@Html.FieldIdFor(model => model.CompetitorName)').val()
};
addAntiForgeryToken(data);
return data;
}
function onDataBound(e) {
$('#info-grid input[type=checkbox][id!=mastercheckbox]').each(function () {
var currentId = $(this).val();
var checked = jQuery.inArray(currentId, selectedIds);
//set checked based on if current checkbox's value is in selectedIds.
$(this).attr('checked', checked > -1);
});
updateMasterCheckbox();
}
function updateMasterCheckbox()
{
var numChkBoxes = $('#info-grid input[type=checkbox][id!=mastercheckbox]').length;
var numChkBoxesChecked = $('#info-grid input[type=checkbox][id!=mastercheckbox]:checked').length;
$('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
}
</script>
3.控制器端(服务):
[HttpPost]
public ActionResult DeleteSelected(ICollection<int> selectedIds)
{
if (selectedIds != null)
{
var selectd = _gradeMessageService.GetGradeMessagesByIdCollection(selectedIds.ToArray()).FirstOrDefault(p => p.EventId == p.EventSystemMessage.Id);//通过导航属性查询
if (selectd != null)
{
_gradeMessageService.DeleteGradeMessage(selectd);
}
}
return Json(new { Result = true });
}