使用 Jquery 显示或隐藏 MVC WebGrid 列答案

【问题标题】：Show or Hide MVC WebGrid Column with Jquery使用 Jquery 显示或隐藏 MVC WebGrid 列
【发布时间】：2016-11-26 18:57:51
【问题描述】：

我有一个 MVC Webgrid，其中包含我想要在呈现网格后基于 javascript 函数动态隐藏或显示的列。

所以在显示 WebGrid 之后，我想调用一个 javascript 函数并传入一个 ColumnName 来显示或隐藏。这可能吗？

谢谢，

这就是我的网格的设置方式：

    @{
        var gridColumns = new List<WebGridColumn>();

        gridColumns.Add(grid.Column("Id", "Test ID"));
        gridColumns.Add(grid.Column("Description", "Test Description"));
        gridColumns.Add(grid.Column("ProjectDate", "Test Date", format: @<text> <span>@item.ProjectDate.ToString("d/M/yyyy")</span></text>));

    }
<div id="divWebGrid" class="row">
                @grid.GetHtml(
                    fillEmptyRows: false,
                    tableStyle: "webgrid",
                    alternatingRowStyle: "webgrid-alternating-row",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    selectedRowStyle: "webgrid-selected-row",
                    rowStyle: "webgrid-row-style",
                    mode: WebGridPagerModes.All,
                    columns: grid.Columns(gridColumns.ToArray())
                    )
            </div>

这将是我的 Javascript 代码：

function ToggleColumn(columnName)
    {
        //Some Code to Show or Hide the Column in the WebGrid based on the columnName parameter.
    }

这可能吗？

这是我的网格的渲染代码：

<table class="webgrid" data-swhgajax="true" data-swhgcontainer="divWebGrid" data-swhgcallback="">
    <thead>
        <tr class="webgrid-header">
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Id&amp;gridItemsortdir=ASC">Test ID</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Description&amp;gridItemsortdir=ASC">Test Description</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=ProjectDate&amp;gridItemsortdir=ASC">Test Date</a>            </th>
        </tr>
    </thead>
    <tfoot>
        <tr  class="webgrid-footer">
            <td colspan="3">1 <a data-swhglnk="true" href="/Home/Index?gridItempage=2">2</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">3</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=2">&gt;</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">&gt;&gt;</a></td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="webgrid-row-style">
            <td>1</td>
            <td>test 1</td>
            <td> <span>22/7/2016</span></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td>2</td>
            <td>test 2</td>
            <td> <span>22/7/2016</span></td>
        </tr>
        <tr class="webgrid-row-style">
            <td>3</td>
            <td>test 3</td>
            <td> <span>22/7/2016</span></td>
        </tr>
    </tbody>
    </table>

【问题讨论】：

每个复选框都有一个与网格中的列相同的 ID。 。不要保留重复的ID。还有其他方法可以将您的复选框关联到网格列，例如 html 5 数据属性。
控件的Id不一样。很抱歉对于这个误会。 Checkbox 与模型中的一个对象相关联，并具有一个名为 Id 的属性，该属性与 WebGrid 中列的属性 Id 相同。
基本上我希望能够将 Id 传递给函数并让函数隐藏或显示以该 Id 作为其 ColumnName 的 webgrid 列。
你能把 webgrid 的渲染输出放到一个 js bin 里吗？
不容易，imo。这适用于任何 HTML 表格。它们通常按行排列，而不是按列排列。您可能必须隐藏属于该列的所有<td>s。我会通过为列中的每个<td> 提供相同的 CSS 类来做到这一点（如果我可以控制标记），然后您就可以拥有一个轻松显示/隐藏它们的功能。但不知道你能不能把WebGrid控制到那种程度。

标签： javascript jquery asp.net-mvc webgrid

【解决方案1】：

我在我的网格中遇到了类似的问题。我在 WebGrid 列上添加的 css 类的帮助下解决了这个问题。

首先，我向所有需要隐藏的列添加一个类。

gridColumns.Add(grid.Column("ID", "Test ID", null, "hidden-column"));

在“隐藏列”类上添加了隐藏属性

<style>
    .hidden-column {
        display:none;
    }
</style>

它将隐藏具有此类集的所有列（td 元素）（在这种情况下，它将隐藏“ID”列）。

为了也隐藏网格标题，我在文档就绪时调用了IIFE 函数。

       (function () {
            $('#divWebGrid tbody tr:first').find('td.hidden-column').each(function (i, td) {
                var indexOfHiddenColumn = $(td).index();
                $('#divWebGrid thead th').eq(indexOfHiddenColumn).addClass('hidden-column');
            });
        }());

希望这篇文章能帮助您解决问题。

【讨论】：