1

クレイジーな要求があったため、各列内に 3 つのラベルを持つ .NETGridViewを作成しました (たとえば、以下の Jan 列を参照)。 

<ItemTemplate>
    <div style="width: 100%">
        <div style="float: left; width: 10px;">
            <asp:Label ID="lblForecast_m1" Text='<%# _
                Eval("f_m1", "{0:#,###,0}")%>' runat="server" 
                CssClass="txtBoldSmall" Style="float: left;"></asp:Label>
        </div>

        <div style="float: right; width: 10px;">
            <asp:Label ID="lblVariance_m1" Text='<%# _
                 Eval("a_m1", "{0:#,###,0}") - Eval("f_m1", "{0:#,###,0}")%>' 
                 runat="server" Style="float: left;" 
                 CssClass="txtBoldSmall"></asp:Label>
        </div>

         <div style="margin: 0 auto; width: 10px;">
             <asp:Label ID="lblActual_m1" Text='<%# _
                 Eval("a_m1", "{0:#,###,0}")%>' runat="server" 
                  CssClass="txtBoldSmall" Style="float: left;"></asp:Label>
         </div>
    </div>
</ItemTemplate>

3 番目の数字 (この場合は 0、0、-20、および -14) だけでソートできるようにしたいと考えています。以下の 2 月は無視して、すべての列に 3 つの数字があることに注意してください。

ここに画像の説明を入力

に直接追加された data プロパティを使用するカスタム textExtraction パーサーの例を見てきまし<td>たが、この .NET アプローチでは、生成された HTML をうまく制御できません。たとえば、以下data-lastnameに追加されたフィールドを参照してください。td

<td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td>

OnRowDataBound を使用して、この HTML プロパティを生成中の に直接追加できますか( -<td>の値を使用して、このプロパティを設定します)? 誰もこれについて経験がありますか？a_m1f_m1

ありがとうございました。

4

1 に答える 1

1

divがあちこちに浮かんでいて、このデモを作成したときに間違った div を選択したことに気付きました。並べ替えたいデータを含む div にクラス名を追加するだけでよいと思います。このようなもの：

<ItemTemplate>
    <div style="width: 100%">
        <div style="float: left; width: 10px;">
            <asp:Label ID="lblForecast_m1" Text='<%# _
                Eval("f_m1", "{0:#,###,0}")%>' runat="server" 
                CssClass="txtBoldSmall" Style="float: left;"></asp:Label>
        </div>

        <div class="sortme" style="float: right;">
            <asp:Label ID="lblVariance_m1" Text='<%# _
                 Eval("a_m1", "{0:#,###,0}") - Eval("f_m1", "{0:#,###,0}")%>' 
                 runat="server" Style="float: left;" 
                 CssClass="txtBoldSmall"></asp:Label>
        </div>

         <div style="margin: 0 auto; width: 10px;">
             <asp:Label ID="lblActual_m1" Text='<%# _
                 Eval("a_m1", "{0:#,###,0}")%>' runat="server" 
                  CssClass="txtBoldSmall" Style="float: left;"></asp:Label>
         </div>
    </div>
</ItemTemplate>

次に、このコードで関数を使用して、textExtraction特定の列 (またはすべての列が同じ構造を持つ場合はテーブル全体) をターゲットにすることができます。

var getSortData = function (node) {
    return $(node).find('.sort').text();
};

$('table').tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'columns'],

    textExtraction: {
        1: getSortData,
        2: getSortData
    }

});
  • 注: "width:10px;" を削除しました。数字が次の列にオーバーフローしていたため、「sortme」divから。
于 2013-10-25T22:15:59.213 に答える