-1

asp.netでGridviewを使用しています。列は次のようになります：4月、5月、6月、Q1、7月、8月、9月、Q2、10月、11月、12月、Q3、1月、2月、3月、Q4。グリッドビューを次のように表示したい：

  1. 最初は、列Q1、Q2、Q3、Q4のみが表示されます。
  2. Q1をクリックすると、4月、5月、6月の列が表示されます。Q2、Q3、Q4はまだ表示されています。
  3. Q2をクリックすると、10月、11月、12月の列が表示されます。Q1、Q3、Q4はまだ表示されています。
  4. Q3をクリックすると、10月、11月、12月の列が表示されます。Q1、Q2、Q4はまだ表示されています。
  5. Q4をクリックすると、1月、2月、3月の列が表示されます。Q1、Q2、Q3はまだ表示されています。

展開された列をもう一度クリックすると、以前と同じように折りたたまれます。

誰かがこれを達成する方法を教えてくれますか？

4

1 に答える 1

0

jQuery を使用します。表示される各列に CssClass を適用します。機能する css 要素である必要はなく、名前だけです。

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

次に、リンクを含む Q1 列のヘッダー テンプレートを使用できます。hide()リンクのクリック イベントは、トグル メソッドを呼び出す jQuery を呼び出し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');" ... />

これは明らかに、特定の要件に合わせて調整する必要があり、失敗が発生する可能性がある場所にいくつかの null チェックを配置する必要があります。これを疑似コードとして扱うと、正しい方向に向かうはずです。

于 2012-08-08T14:13:49.350 に答える