具有可变列数的ASP.NET表

时间:2009-09-04 17:41:32

标签: asp.net

我必须显示一些表格数据,其中最多显示3列,但有时只需要1或2列。到目前为止,我有:

<asp:FormView ID="myFormView" runat="server" DataSourceID="myXmlDataSource">
    <ItemTemplate>
        <table cellspacing="0" cellpadding="0" class="myTableStyle">
            <colgroup>
                <col class="myCol1Style" />
                <col class="myCol2Style" />
                <col class="myCol3Style" />
            </colgroup>
            <thead>
                <tr>
                    <th class="myCol1HeaderStyle">Column 1</th>
                    <th class="myCol2HeaderStyle">Column 2</th>
                    <th class="myCol3HeaderStyle">Column 3</th>
                </tr>
            </thead>
            <tr>
                <td>
                    <p>Column 1 data goes here</p>
                </td>
                <td>
                    <p>Column 2 data goes here</p>
                </td>
                <td>
                    <p>Column 3 data goes here</p>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:FormView>
<asp:XmlDataSource ID="myXmlDataSource" runat="server" />

第1列将始终显示,但在某些情况下,我需要隐藏第2列和/或第3列。

处理此问题的最佳方法是什么?

2 个答案:

答案 0 :(得分:2)

我建议使用GridView控件,将“AutoGenerateColumns”设置为true,而不是FormView控件。然后将其绑定到您的数据源,它将始终显示与您的数据源相同的列数。

如果您需要根据用户事件而不是其中的数据隐藏列,那么GridView最终将为您提供对行/列的更多控制。

答案 1 :(得分:1)

简单的解决方案是使用GridView等,它可以自动从数据源生成列。如果你不能使用它,那么如果你可以使用jquery那么我有一个我在我的代码中使用的方法。

为第一,第二,第三列定义不同的类。定义三个受保护的变量或使用一组类来隐藏。使用ClientScriptManager将此数组注册为javascript数组。然后在页面加载时使用jquery隐藏数组中类的列或tds。

C#:

protected string SecondCol="true";
protected string ThirdCol = "true";

void BinData(){
    ////
    ////DataBinding Code
    ////
    if(!SecondColumnNeeded) SecondCol="false";
    if(!ThirdColumnNeeded) ThirdCol="false";
}

ASPX:

      <tr>
            <td>
                <p>Column 1 data goes here</p>
            </td>
            <td class="second">
                <p>Column 2 data goes here</p>
            </td>
            <td class="third">
                <p>Column 3 data goes here</p>
            </td>
        </tr>     

 <script type="text/javascript">
 var s="<%= SecondCol %>";
 var t="<%= ThirdCol %>";

 $(document).ready(function(){
    if(s==="true"){
        $("td.second").hide();//or remove
    }
    //similarly remove third column and column headers also
 });
 </script>

希望这可以帮助你:)