使用CheckBox隐藏和显示表列 [英] hide and show table column using CheckBox

问题描述

hi ..

如果表格在Repeater控件中，如何使用CheckBox隐藏和显示表列

hi ..
how to hide and show table column using CheckBox if the table are in Repeater Controle

推荐答案

CSS

CSS

.Hide{visibility:hidden;}
        .Show {visibility:visible;}

页

Page

<asp:ScriptManager ID="scManager" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="upTest" runat="server">
        <ContentTemplate>
             <asp:CheckBox ID="chkShowHide" runat="server" AutoPostBack="true"

                oncheckedchanged="chkShowHide_CheckedChanged" />

         <asp:Repeater ID="rptTest" runat="server">
            <ItemTemplate>
                <table id="myTable" runat="server">

                <tr id="myTr">
                     <td id="mytd1" runat="server">
                           <asp:Label ID="lblTest" runat="server" Text='<%# Eval("Col1") %>'></asp:Label>
                        </td>
                        <td id="mytd2" runat="server">
                            <asp:Label ID="lblTest2" runat="server" Text='<%# Eval("Col2") %>'></asp:Label>
                        </td>
                        <td id="mytd3" runat="server">
                             <asp:Label ID="Label3" runat="server" Text='<%# Eval("Col3") %>'></asp:Label>
                        </td>
                </tr>
                </table>

            </ItemTemplate>
        </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>

CS Code

CS Code

foreach (Control ctrlItem in rptTest.Controls)
            {
                if (ctrlItem is RepeaterItem)
                {
                    foreach (Control ctrlTable in ctrlItem.Controls)
                    {
                        if (ctrlTable is System.Web.UI.HtmlControls.HtmlTable)
                        {
                            foreach (Control ctrlRow in ctrlTable.Controls)
                            {
                                if (ctrlRow is System.Web.UI.HtmlControls.HtmlTableRow)
                                {
                                    int i = 0;
                                    foreach (Control ctrlCell in ctrlRow.Controls)
                                    {
                                        if (ctrlCell is System.Web.UI.HtmlControls.HtmlTableCell && i <2)
                                        {
                                            if(chkShowHide.Checked)
                                            ((System.Web.UI.HtmlControls.HtmlTableCell)ctrlCell).Attributes["class"] = "Show";
                                            else
                                                ((System.Web.UI.HtmlControls.HtmlTableCell)ctrlCell).Attributes["class"] = "Hide";

                                            i++;
                                        }
                                        if (i == 2)
                                            break;
                                    }
                                }
                            }



                        }
                    }

                }


            }

注意：它工作得很好，但我建议你使用 TWO中继器。一个包含所有列，第二个包含所有列 - 2.

在需要时显示Repeater-1并单击复选框显示另一个并隐藏第一个。

（作为上面的解决方案可能会给你带来性能损失。



看看< asp：MultiView> 。您可以在页面中使用两个视图。并在选中复选框时切换所选视图。

Note: It is working very fine but i would suggest you to use TWO Repeaters. One with all columns and second with all - 2.
Show Repeater-1 when requred and on click of checkbox show the other one and hide the first.
(as the above solution may give you the performance hit).

Give a look to <asp:MultiView>. you may use two views in your page. and switch the selected view on check of checkbox.

<script type="text/javascript">
        var hide1 = true;
        

        function hideColumn1(tableId, colIndex) {
            var table = document.getElementById(tableId);

            if (table != null) {
                for (i = 0; i < table.rows.length; i++) {
                    if (hide1)
                        table.rows[i].cells[colIndex - 1].style.display = 'none';
                    else
                        table.rows[i].cells[colIndex - 1].style.display = '';
                }
                hide1 = !hide1;
            }
    </script> 

<asp:repeater id="rpt" runat="server" >

       <headertemplate>
        <table  id="myTable" >
          <tr>
                <th >
                </th>
                  <th >
                </th>
                 .
                 .
                 .
        </tr>
           </table></headertemplate></asp:repeater>

<input id="Checkbox1" type="checkbox"  önclick="hideColumn1('myTable', 1)"  runat="server" checked="checked" />
<input id="Checkbox1" type="checkbox"  önclick="hideColumn1('myTable', 2)"  runat="server" checked="checked" />
<input id="Checkbox1" type="checkbox"  önclick="hideColumn1('myTable', 3)"  runat="server" checked="checked" />
.
.
.

这篇关于使用CheckBox隐藏和显示表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！