2009-09-04 7 views
2

Je dois afficher certaines données tabulaires où il y a un maximum de 3 colonnes à afficher, mais parfois, seulement 1 ou 2 sont nécessaires. Jusqu'à présent, j'ai:Table ASP.NET avec nombre variable de colonnes

<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" /> 

Colonne 1 sera toujours displyed, mais dans certains cas, je vais devoir cacher la colonne 2 et/ou 3.

Quelle serait la meilleure façon de gérer ce?

Répondre

2

Je suggère d'utiliser un contrôle GridView avec "AutoGenerateColumns" défini sur true, au lieu d'un contrôle FormView. Puis liez-le à votre source de données, et il montrera toujours le même nombre de colonnes que votre source de données.

Si vous avez besoin de masquer les colonnes en fonction des événements de l'utilisateur plutôt que de leurs données, GridView vous donnera finalement beaucoup plus de contrôle sur les lignes/colonnes.

1

Une solution simple est d'utiliser GridView, etc., qui peut générer automatiquement des colonnes à partir d'une source de données. Si vous ne pouvez pas utiliser cela, alors si vous pouvez utiliser jquery, j'ai une méthode que j'utilise dans mon code.

Définir différentes classes pour les première, deuxième et troisième colonnes. définir trois variables protégées ou utiliser un tableau de classes à masquer. Enregistrez ce tableau en tant que tableau javascript en utilisant ClientScriptManager. Ensuite, lors du chargement de la page, utilisez jquery pour masquer les colonnes ou tds avec les classes du tableau.

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> 

espoir que cela vous aide :)

Questions connexes