Question

我创建了一个用于将数据显示为Tabular形式的Webgrid，但我想在webgrid的Header部分添加复选框，使用此复选框我想要操作检查所有其他复选框到webgrid并执行ACTIVE和删除操作..所以请帮我如何创建它..我的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>

请给我一些格式以显示复选框到标题.. 当我创建复选框到标题错误显示哪个是最好的重载方法....？而且我们也知道标头只接受字符串类型数据而不是任何元素..！请给我提示执行此操作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'));
            }
        })
    );
});

Answer 2

@{    
var grid = new WebGrid(Model);
var columns = new List<WebGridColumn>();

WebGridColumn checkBoxColumn = grid.Column(header: "{}",
   format: (item) =>
   {
       // I need access to item properties, otherwise this can be simplified    
       return Html.CheckBox("send-checkbox", false, new { @class = "singleCheckBox" });
   });
columns.Add(checkBoxColumn);
}    

string html = grid.GetHtml(columns: columns).ToString();
 @MvcHtmlString.Create(@html.Replace("{}", "<input type='checkbox' id='allCheckBox'/>"));
}        

<script>
    $().ready(function () {
    $('#allCheckBox').click(function () {
        var isChecked = $(this).is(':checked');
        $('.singleCheckBox').prop('checked', isChecked);            
    });

    $('.singleCheckBox').click(function () {
     var allChecked = ($('.singleCheckBox:checked').length == $('.singleCheckBox').length);            
      $('#allCheckBox').prop('checked', allChecked);                        
     });
});
</script>

我从中借鉴了一些想法 http://weblogs.asp.net/imranbaloch/archive/2011/09/13/webgrid-helper-with-check-all-checkboxes.aspx

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

2 个答案: