Posted on March 30, 2013by mtryambake
How to make a MVC 3 Webgrid with checkbox column?
This article will show you a How to Add custom html to Header in WebGrid e.g. add a check box in webgrid header.
Some time you come across a situation where you have to add html element (checkbox) in webgrid header, consider a column with checkbox and you want to add checkbox in the header of same column.
Approach: In document.ready event find out webgrid header and replace it with html string.
$(document).ready(function () {
$(‘#gridContent table th‘).each(function () {
if (this.innerHTML == "") {
this.innerHTML = "<input type=‘checkbox‘ id=‘chkHeader‘ />";
}
});
});
Application: If you have a checkbox column in webgrid and on clicking of header checkbox all checkbox in column will be checked.
<script type="text/javascript">
$(document).ready(function () {
$(‘#gridContent table th‘).each(function () {
if (this.innerHTML == "") {
this.innerHTML = "<input type=‘checkbox‘ id=‘chkHeader‘ />";
}
});
$(‘#gridContent table th input:checkbox‘).click(function (e) {
var table = $(e.target).closest(‘table‘);
$(‘td input:checkbox‘, table).attr(‘checked‘, e.target.checked);
});
});
</script>
========================================================================================================for reference
========================================================================================================
$(function () {
$(‘.gridTable thead tr th:first‘).html(
$(‘<input/>‘, {
type: ‘checkbox‘,
click: function () {
var checkboxes = $(this).closest(‘table‘).find(‘tbody tr td input[type="checkbox"]‘);
checkboxes.prop(‘checked‘, $(this).is(‘:checked‘));
}
})
);
});[webgrid] – header - (How to Add custom html to Header in WebGrid)
原文：http://www.cnblogs.com/dufu/p/3971818.html