Question

由于一些疯狂的请求，我创建了一个.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）。请记住，所有列都有三个数字，忽略下面的二月。

enter image description here

我已经看到examples自定义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的值来设置此属性）吗？有没有人有这方面的经验？

谢谢。

Answer 1

由于div遍布整个地方，当我this demo时，我注意到我选择了错误的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，因为数字溢出到下一列。

将属性添加到td以进行textExtraction排序？

1 个答案: