Gridview中的Expandable和Collapsible列

Question

我在asp.net中使用了Gridview。專欄以這種方式：四月，五月，六月，Q1，七月，八月，九月，第二季度，十月，十一月，十二月，第三季度，一月，二月，三月，第四季度。 我想顯示如下GridView控件：

1. 最初僅列Q1，Q2，Q3，Q4應該是可見的。
2. 如果我點擊Q1，Apr，May，Jun列應該是可見的。 Q2，Q3，Q4仍然可見。
3. 如果我點擊Q2，Oct，Nov，Dec列應該是可見的。 Q1，Q3，Q4仍然可見。
4. 如果我點擊Q3，10月，11月，12月列應該是可見的。 Q1，Q2，Q4仍然可見。
5. 如果我點擊Q4，Jan，Feb，Mar列應該是可見的。 Q1，Q2，Q3仍然可見。

上的任何擴展欄再次點擊應該崩潰，因爲它是

之前

任何人指導我如何實現這一目標？

Answer 1

使用jQuery。將CssClass應用於每個代表的列。它不一定是一個運作的CSS元素，只是一個名稱。

<asp:BoundField ID="Apr" CssClass="Q1" .... /> 

然後，您可以爲包含鏈接的Q1列使用標題模板。鏈接的點擊事件應該調用一個jQuery，它調用一個方法來切換hide()和show()以匹配類中的元素。這裏將是一個功能的想法：

function ToggleColumn(colID) 
{ 
    var elements = $('.' + col); 
    if (elements[0].is(":visible")) 
    { 
     elements.hide(); 
    } else { 
     elements.show(); 
    } 

    return false; 
} 

，並呼籲該鏈接將是：

<asp:LinkButton ID="lnkQ1" OnClientClick="return ToggleColumn('Q1');" ... /> 

這顯然需要調整，以得到正確的針對您的具體要求，並有將需要一些在可能發生故障的地方進行空檢查。如果你認爲這是僞代碼，它應該讓你朝着正確的方向前進。