Question

我有一个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>

Answer 1

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

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

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

在课程＆＃39; hidden-column＆＃39;

上添加了hide属性

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

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

为了隐藏网格标题，我在文档就绪时调用了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');
            });
        }());

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

使用Jquery显示或隐藏MVC WebGrid列

1 个答案: