使用Jquery显示或隐藏MVC WebGrid列

Question

I have a MVC Webgrid with columns that I want to Hide or Show dynamically based on a javascript function after the grid is rendered.

So after the WebGrid is displayed I want to call a javascript function and pass in a ColumnName to Show or hide. Is this possible?

Thanks,

This is how my grid is setup:

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

And this would be my Javascript code:

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

Is this possible?

Here is the rendered code of my grid:

<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

I faced the similar problem in my Grid. And I solved it with the help of css class added on WebGrid columns.

First, I add a class to all those columns which needs to be hidden.

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

Added hide property on class 'hidden-column'

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

It will hide all the columns (td elements) having this class set (in this case, it will hide "ID" column).

To hide Grid headers as well, I called IIFE function on document ready.

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

Hope this post will help you to resolve your issue.