Question

我正在尝试使用以下内容在网格的标题行中呈现“全选”复选框。

column.For(x => Html.CheckBox("InvoiceSelection", false, new {@class = "checkbox reqPayment ", value = x.InvoiceId}))
          .Header(o=>"<th><input type=\"checkbox\" id='chkHeader' />Select All</th>")
          .Encode(false)
          .HeaderAttributes(@class => "text-error");

但是，这不会按预期呈现，而是使用<a>作为内容呈现

<tr><th class="text-error"><a href="/Invoices?Direction=Ascending"></a></th>

“行”复选框正确呈现并且已经尝试过这个solution而没有运气，但不确定这是否适用于我目前正在使用的Nuget包 - MvcContrib.Mvc3-ci 3.0.100

Answer 1

我已经使用相同的版本测试了您的上述代码，它对我来说很好。

可能值得检查以下内容：

你在视图中有具体的参考吗？

@using MvcContrib.UI.Grid

如果你在项目的其他地方使用过不同的帮助，可能会与另一个Html.Grid帮助混淆。

还有其他一些因素可以像jQuery插件一样添加排序功能吗？

编辑（问题作者）

@hutchonoid提出了一个关于“其他因素”的好点，这导致我找到了解决方案。

关于最终解决方案有一些注意事项

如果您使用的是可排序网格，则需要在列

Sortable(false)

不需要<th>元素

我最终使用的解决方案

column.For(x => Html.CheckBox("InvoiceSelection", false, new {@class = "checkbox reqPayment ", value = x.InvoiceId}))
      .Header(o=>"<input type=\"checkbox\" id='chkHeader' />")
      .Encode(false)
      .Sortable(false)
      .HeaderAttributes(new Dictionary<string, object> { { "style", "width:20px" } });

添加完整性，这是切换“全选”功能的JS

$(document).ready(function () {
    $('#chkHeader').change(function() {
        if ($(this).is(':checked')) {
            $('.reqPayment').attr('checked', 'checked');
        } else {
            $('.reqPayment').removeAttr('checked');
        }
    });
});

如何使用MvcContrib在标题行中呈现一个复选框？

1 个答案: