可変数の列を使用したASP.NETテーブル

Question

表示する列は最大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は常にdisplyedされますが、いくつかのケースでは、私が対処するための最良の方法だろう何列2および/または3

を非表示にする必要がありますこの？

Answer 1

FormViewコントロールではなく、 "AutoGenerateColumns"をtrueに設定してGridViewコントロールを使用することをお勧めします。その後、データソースにバインドすると、データソースにある列と同じ数の列が常に表示されます。

ユーザーイベントのデータではなく、ユーザーイベントに基づいて列を非表示にする必要がある場合、GridViewは最終的に行/列をより詳細に制御します。

Answer 2

単純な解決策は、データソースから列を自動的に生成できるGridViewなどを使用することです。それを使用できない場合は、jqueryを使用できる場合、私は自分のコードで使用するメソッドを持っています。

第1列、第2列、第3列に異なるクラスを定義します。 3つの保護された変数を定義するか、または隠すためにクラスの配列を使用します。 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> 

希望は、これはあなたを助け:)

を