Контролировать видимость столбца gridview с помощью JavaScript

Question

У меня есть вид сетки, и я должен контролировать видимость столбцов сетки, используя JavaScript.Рассмотрим это gridview.У меня есть несколько столбцов.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Resource">
            <ItemTemplate>
               <asp:Label ID="Resource" Text='<%# Bind("Resource") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
               <asp:BoundField DataField="Description" HeaderText="Resource Description" HtmlEncode="false">
        <ItemStyle HorizontalAlign="Center" />
        <HeaderStyle HorizontalAlign="Center" />
    </asp:BoundField>

     </asp:TemplateField>
  </Columns>
</asp:GridView>

Я могу контролировать видимость этих столбцов на стороне сервера, используя это -

grdTest.Columns[n].Visible = false;

Но я должен контролировать видимость на стороне клиента, используя JavaScriptЯ много пробовал, но я смог получить доступ только к объекту строки или к какой-либо конкретной ячейке вида сетки.

grid.rows[index].cells[i].style="display: none"; //for cell

Есть ли способ получить доступ к объекту столбца вида сетки и управлять его видимостью с помощью javascript?

Answer 1

Вы можете попробовать набрать код на стороне сервера. Вот функция js, которая используется для вызова кода:

function HideColumns(sender, args)
{
    PageMethods.HideSomeColumns(args, onSuccess, onError);
}

function onReportSuccess(result)
{
}

function onReportError(error)
{
    alert("There was an error.");
}

А вот серверная функция, которая используется для скрытия нужных вам столбцов:

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static void ReportTranslation(int n)
{
    grdTest.Columns[n].Visible = false;
}

Для вас есть другой вариант - использование чистого js:

function show_hide_column(col_no, do_show) {

    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';

    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('td')
      cels[col_no].style.display=stl;
    }
}

Answer 2

Более простой подход к этому - использовать jQuery и установить имя класса CSS в ячейках столбца, который вы хотите показать / скрыть.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate CssClass="hide-me">
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
       </asp:TemplateField>
    </Columns>
</asp:GridView>

Установите видимость для отображения: по умолчанию нетв таблице стилей, или вы могли бы альтернативно поместить это в стиль ячейки:

.hide-me { display: none; }

Затем из javascript, используя jQuery:

$('.click-me').click(function(e) {
    $('.hide-me').show();
    // OR you could use toggle:
    $('.hide-me').toggle();
});