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

我创建了一个用于将数据显示为表格形式的Webgrid，但是我想通过使用webgrid的标题部分添加复选框此复选框我想perorm操作检查所有其他复选框到的WebGrid和执行积极和删除operation..so请帮助我如何创建它..below我的WebGrid代码：如何在Webgrid的标题中创建复选框我无法在Web网格的标题中创建复选框

<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>

，请给我一些格式显示复选框到头.. 当我创建复选框到头错误是显示哪个是最好的重载方法....？我们也知道头只接受字符串类型的数据而不是任何元素..！请给我提示执行此操作即可。

来源

2013-03-05 Michel jeams

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

来源

2013-03-05 07:18:04

@{  
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

来源

2013-09-20 17:21:30

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

回答

相关问题