如何在Webgrid的标题中创建复选框我无法在Web网格的标题中创建复选框

Question

我已创建一个的WebGrid其用于显示数据转换成表格形式,但我想通过使用该复选框我想perorm操作检查所有其它复选框成的WebGrid并执行主动和删除操作,增加在的WebGrid的报头部分的复选框. .so请帮我如何创建它..我的Webgrid代码:

<div id="mygrid">
     @grid.GetHtml(tableStyle: "gridTable",
         headerStyle: "gridHead",
         footerStyle: "gridFooter",
         rowStyle: "gridRow",
         alternatingRowStyle: "gridAltRow",                                                                                                                                                                                                                                                                                                                                                                                                     
         columns: grid.Columns(
             grid.Column(header: "",format: @<text><input type="checkbox" name="chkactive[]" value="@item.User_id" /></text>),
             grid.Column("User_Id"),
             grid.Column("Name"),
             grid.Column("Username"),
             grid.Column("Fb_Id"),
             grid.Column("User_image", format: @<text><img src="@Url.Content(@item.Image_path)" height="30px" width="50px" alt="noimage"/></text>),
             grid.Column("Email"),
             grid.Column("Gender"),
             grid.Column(header: "Status", format: @<text>
             @if (@item.Is_active == true)
             { 
                 <a href="@Url.Action("UserStatus", "Admin", new { id = @item.User_id })"><img src="../../images/Active.png"/></a> 
             }
             else
             { 
                 <a href="@Url.Action("UserStatus", "Admin", new { id = @item.User_id })"><img src="../../images/Deactive.png"/></a> }</text>),
             grid.Column(header: "Edit",
                 format: @<text><a href="@Url.Action("EditeUser", "Admin", new { id = @item.User_id })"><img src="../../images/icons/editor.png" /></a></text>),
             grid.Column(header: "Delete",
                 format: @<text><a href="@Url.Action("DeleteUser", "Admin", new { id = @item.User_id })"><img src="../../images/icons/trash.png"/></a></text>)))
</div>

请给我一些格式来显示复选框到标题..当我创建复选框到标题错误显示哪个是最好重载方法....？而且我们也知道header只接受字符串类型数据而不是任何元素..!请给我提示执行此操作ok..it; s argent ..？

Answer 1

该WebGrid助手不支持添加标记列标题.你可以使用更高级的控制,如Telerik MVC Grid或MVCContrib Grid允许这种定制.

如果要使用WebGrid帮助程序,可以使用javascript将复选框注入标题.这是一个丑陋的黑客,但是自助手以来唯一一个不支持渲染正确的标记.

这是一个如何用jQuery完成的例子:

$(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'));
            }
        })
    );
});