首页 > 代码库 > [webgrid] – header - (How to Add custom html to Header in WebGrid)
[webgrid] – header - (How to Add custom html to Header in WebGrid)
How to Add custom html to Header in WebGrid
MyEvernote Link
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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。