Question

在我的previous question我询问了如何定义初始排序顺序，但我注意到data-reactid属性排序不正确。我使用bootstrap table和react.js生成data-reactid属性。

jsfiddle - 包含data-reactid属性的表格，排序不正确

如果您订购＆＃34; CustomerN＆＃34; 列，则行序列不正确。

jsfiddle - 没有data-reactid属性的表，排序正确

HTML

<table class="table table-striped table-bordered table-hover" cellspacing="0" id="table3" data-show-columns="true" data-show-multi-sort="true">
   <thead>
      <tr>
         <th data-field="CustomerName" data-sortable="true">CustomerN</th>
         <th data-field="ProjectName" data-sortable="true">ProjectN</th>
         <th data-field="ProjectType" data-sortable="true">ProjectT</th>
         <th data-field="ProjectDetails" data-sortable="true">ProjectD</th>
      </tr>
   </thead>
   <tbody>
      <tr>
      <td data-customer-id="49" data-reactid=".0.1.0.1.1.1.$51.1:$0"><a data-reactid=".0.1.0.1.1.1.$51.1:$0.0">Quiksilver</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Vix eu erant doctus delenit, et copiosae indoctum accommodare eum."
         </td>
      </tr>
      <tr>
         <td data-customer-id="80" data-reactid=".0.1.0.1.1.1.$71.1:$0"><a data-reactid=".0.1.0.1.1.1.$71.1:$0.0">asdasd</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td> 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam"
         </td>
      </tr>
      <tr>
         <td data-customer-id="40" data-reactid=".0.1.0.1.1.1.$66.1:$0"><a data-reactid=".0.1.0.1.1.1.$66.1:$0.0">dell</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-customer-id="30" data-reactid=".0.1.0.1.1.1.$1.1:$0"><a data-reactid=".0.1.0.1.1.1.$1.1:$0.0">dell</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-customer-id="10" data-reactid=".0.1.0.1.1.1.$54.1:$0"><a data-reactid=".0.1.0.1.1.1.$54.1:$0.0">Rip Curl</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-reactid=".0.1.0.1.1.1.$2.1:$0" data-customer-id="2"><a data-reactid=".0.1.0.1.1.1.$2.1:$0.0">Java</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
   </tbody>
</table>

的javascript

$(function(){
  $('#table3').bootstrapTable(
  {"sortName": "CustomerName","sortOrder":"asc"});
});

Answer 1

如果使用开发人员工具调试问题代码，您将意识到用于排序的值不是实际的客户名称，而是整个<a href=""...>dell</a>。由于您使用的是默认排序器，因此字符串比较会将整个字符串视为用于比较。 data-reactid与boostraptable库没有冲突，但由于分配给此属性的值，它具有副作用。在进行排序比较时，由于字符串的开头类似，因此data-reactid的变化决定了元素的位置。

有两种方法可以解决这个问题。

将数据值属性附加到超链接，它应该在a标记后立即显示。例如。 <a data-value="dell" data-reactid...></a>
使用bootstrap表提供的格式化程序，并使列中显示的数据保持清洁。

Bootstrap-table - 使用data-reactid属性进行排序是不正确的

1 个答案: