Question

按照this particular thread中的说明，我可以在复选框显示的列标题中添加一个“全部选中”复选框。它对我来说很完美，但我在下面的cshtml页面中有两个选项卡（MVC网页格式），它提供了两个带有自己的webgrid的选项卡。 Check All Box javascript将这个框添加到两个webgrids中。我需要弄清楚如何只定位特定的ONE webgrid（在本例中为Unassigned选项卡下），将Check All框添加到第一个列标题中。

cshtml文件中的一个部分（我有五个标签，其中包含自己的webgrid，但我将其剪切为两个以保持简洁）：

<div class="tabbody">

@if (Page.Tab == "Incomplete")
{
    var grid = new WebGrid(Page.Incomplete, rowsPerPage: 10, defaultSort: "UserName", canSort: true);
    var tfooter = (Page.IncompleteCount > 0 ? Page.IncompleteCount : "No") + " Record" + (Page.IncompleteCount == 1 ? "" : "s") + " Found";
    var tpaging = @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20);
    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    @grid.Table(columns: grid.Columns(
        grid.Column("UserName", "User"),
        grid.Column("Column1", "Column1"),
        grid.Column("Column2", "Column2"),
        grid.Column("Column3", "Column3")),
    tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", footer: @<div>@tfooter<br />@tpaging</div>)

}
@if (Page.Tab == "Unassigned")
{
    if (Page.UnassignedCount > 0)
{
    var grid = new WebGrid(Page.Unassigned, rowsPerPage: 10, defaultSort: "UserName", canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "addCheck");
    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    <div id="grid">
    @grid.GetHtml(columns: grid.Columns(
        grid.Column(format: @<text><input type="checkbox" name="UserId" value="@item.UserId" /></text>),
        grid.Column("Username", "User"),
        grid.Column("Column1", "Column1"),
            tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
            </div>
</div>

使用Javascript：

<script type="text/javascript">
$(function () {
    addCheck();
});
function addCheck() {
    var $chk = $('<input/>').attr({ type: 'checkbox', name: 'chkAll', id: 'chkAll', title: "Select All" });
    $('th:first').append($chk);
    $('#chkAll').click(function () {
        $(':checkbox').prop('checked', $(this).is(':checked') ? true : false);
    });
    $(':checkbox').not('#chkAll').click(function(){
        testCheck();
        });
}
function testCheck() {
    if ($(':checkbox').not('#chkAll').filter(':not(:checked)').length === 0) {
        $('#chkAll').prop('checked', true);
    } else {
        $('#chkAll').prop('checked', false);
    }
}
</script>

Answer 1

我建议您在网格中添加一个标识符，以便将其选为：

    $('#id th:first')

或者，您应该能够按照页面上的顺序选择正确的表格：

    $('table:eq(1) th:first')

使用JavaScript检查一个目标webgrid中的所有框

1 个答案: