1

由于一些疯狂的请求,我创建了一个 .NET GridView,每列内包含三个标签(例如,请参见下面的 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>

我希望能够仅按第三个数字(在本例中为 0、0、-20 和 -14)进行排序。请记住,所有列都将包含三个数字,请忽略下面的二月。

在此处输入图像描述

我已经看到了使用直接添加到 .NET 的数据属性的自定义 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_m1-的值f_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
    }

});
  • 注意:我删除了“宽度:10px;” 来自“sortme” div,因为数字溢出到下一列。
于 2013-10-25T22:15:59.213 回答