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 回答