Использование bootstrap-table на столе с кнопками

Я пытаюсь включить функцию сортировки в мою загрузочную таблицу. Таблица содержит кнопки для диалогов, и я хочу сортировать таблицу по значениям кнопок. Вот полный код:Использование bootstrap-table на столе с кнопками

<html> 
    <head> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.css"> 
    </head> 
    <body> 
     <div class="container"> 
     <h2 class="text-primary">Test Results</h2> 
     <br/> 
     <table class="table table-condensed" data-sort-name="pass_count" data-sort-order="desc" id="core_table"> 
      <thead> 
       <tr class="info"> 
        <th data-field="test_name" data-sortable="true"><b>Test Suite</b></th> 
        <th data-field="pass_count" data-sortable="true"><b>Pass</b></th> 
        <th data-field="fail_count" data-sortable="true"><b>Failure</b></th> 
        <th data-field="error_count" data-sortable="true"><b>Error</b></th> 
        <th data-field="time" data-sortable="true"><b>Time</b></th> 
        <th data-field="result" data-sortable="true"><b>R</b></th> 
       </tr> 
     </thead> 
     <tbody> 
      </tr> 
      <tr> 
       <td>TestCopyrightFile__qa-old_TestResults_xml</td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestCopyrightFile__qa-old_TestResults_xml_Error">1</button></td> 
       <td>0.801</td> 
       <td bgcolor='#2EFEF7'></td> 
      </tr> 
      <tr> 
       <td>TestAOS_testAos_qa-old_TestResults_xml</td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestAOS_testAos_qa-old_TestResults_xml_Pass">2</button></td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestAOS_testAos_qa-old_TestResults_xml_Fail">1</button></td> 
       <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td> 
       <td>2.144</td> 
       <td bgcolor='#FF0000'></td> 
      </tr> 
     </tbody> 
    </table> 
    <div class="modal fade" id="TestCopyrightFile__qa-old_TestResults_xml_Error" role="dialog"> 
     <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%; margin-top: 50px; margin-bottom:50px;"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <h2 class="text-primary">Error testcases from TestCopyrightFile: : qa-old: TestResults: xml</h2> 
       <br/> 
       </div> 
       <div class="modal-body" style="height: 250px; overflow-y: auto;"> 
       <table class="table table-condensed"> 
        <thead> 
         <tr class="info"> 
          <th><b>Test</b></th> 
          <th><b>Time</b></th> 
          <th><b>Result</b></th> 
         </tr> 
        </thead> 
        <tbody> 
         </tr> 
         <tr> 
          <td>Error: testCopyrightFile can't convert nil into String</td> 
          <td>0.801</td> 
          <td bgcolor='#2EFEF7'></td> 
         </tr> 
        </tbody> 
       </table> 
       </div> 
       <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="modal fade" id="TestAOS_testAos_qa-old_TestResults_xml_Pass" role="dialog"> 
    <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%; margin-top: 50px; margin-bottom:50px;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h2 class="text-primary">Pass testcases from TestAOS: testAos: qa-old: TestResults: xml</h2> 
       <br/> 
      </div> 
      <div class="modal-body" style="height: 250px; overflow-y: auto;"> 
       <table class="table table-condensed"> 
       <thead> 
        <tr class="info"> 
         <th><b>Test</b></th> 
         <th><b>Time</b></th> 
         <th><b>Result</b></th> 
        </tr> 
       </thead> 
       <tbody> 
        </tr> 
        <tr> 
         <td>Verifying correct response code is returned</td> 
         <td>1.742</td> 
         <td bgcolor='#00FF40'></td> 
        </tr> 
        <tr> 
         <td>Verifying correct response is returned</td> 
         <td>0.007</td> 
         <td bgcolor='#00FF40'></td> 
        </tr> 
       </tbody> 
       </table> 
      </div> 
      <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="modal fade" id="TestAOS_testAos_qa-old_TestResults_xml_Fail" role="dialog"> 
    <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%; margin-top: 50px; margin-bottom:50px;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h2 class="text-primary">Fail testcases from TestAOS: testAos: qa-old: TestResults: xml</h2> 
       <br/> 
      </div> 
      <div class="modal-body" style="height: 250px; overflow-y: auto;"> 
       <table class="table table-condensed"> 
       <thead> 
        <tr class="info"> 
         <th><b>Test</b></th> 
         <th><b>Time</b></th> 
         <th><b>Result</b></th> 
        </tr> 
       </thead> 
       <tbody> 
        </tr> 
        <tr> 
         <td>Failure: testAos Assertion failed for Verifying correct response code is returned. status like. 200 expected but was 401.</td> 
         <td>0.006</td> 
         <td bgcolor='#FF0000'></td> 
        </tr> 
       </tbody> 
       </table> 
      </div> 
      <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div> 
     </div> 
    </div> 
    </div> 
    </div> 

<script> 
$('#core_table').bootstrapTable({ 

}); 
</script>

Когда секция сценария закомментирована страница форматируется правильно, но когда я применяю бутстраповский стол, чтобы сортировать я получить код для кнопок в таблице, а не кнопки и сортировка работает на коде, а не на значениях кнопок. Как я могу отображать кнопки и сортировку, чтобы действовать по их значениям?

Заранее спасибо

Вот скрипку я работал с https://jsfiddle.net/x6htxss0/ Когда Javascript нет и бутстраповская стол сценарий не будет реализован в таблице выглядит так, как я хочу его смотреть.

источник

2016-01-26 amadain

ОКОНЧАТЕЛЬНЫЙ? EDIT РЕШЕНИЕ:

Установка опции эвакуации ложного при инициировании bootstrapTable будет решить эту проблему:

$('#core_table').bootstrapTable({escape: false});

Я бы рекомендовал глядя через bootstrapTable documentation (хотя это не дает мне какие-либо решения).

Быстрое и простое решение, которое я нашел, это заменить gt; и lt; которые были созданы с плагина назад до> и <. Это нужно делать каждый раз, когда выполняется сортировка. Вы должны быть в состоянии добавить прослушиватель событий в событие onSort.bs.table.

$('#core_table').find('td').each(function() { 
    $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<")); 
});

EDIT

Вот SetTimeout хак. Событие sort.bs.table срабатывает до того, как плагин сортирует и изменяет данные. Возможные решения могут заключаться в том, чтобы модифицировать плагин, чтобы иметь событие aftersort.bs.table или еще лучше, визуализировать данные как html/не изменять данные.

$('#core_table').on('sort.bs.table', function() { 
     $('#core_table').find('td').each(function() { 
     $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<")); 
});

EDIT: HACK РЕШЕНИЕ

$('#core_table').off().bootstrapTable().on('post-body.bs.table', 
    function() { 
     $('#core_table').find('td').each(function() { 
     $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<")); 
     }); 
});

источник

2016-01-26 15:12:28 cschaefer

Я попытался $ ('# core_table') на ('' sort.bs.table функции()), но либо вид не был доступен или сортировки. стал доступен, и кнопки вернулись к их текстовому происхождению. – amadain

Извините за поздний ответ! Похоже, что привязка eventlistener к событию sort.bs.table не работает, потому что он срабатывает до фактической сортировки таблицы. Я смог заставить его работать, добавив setTimeout в код выше и просто используя 1 мс. Существует краткая вспышка html вместо фактических элементов. Должно быть возможно изменить плагин, чтобы иметь событие aftersort, которое позволит вам прикрепить код выше, но я не подхожу таким образом. Возможно, было бы разумно отправить запрос разработчику плагина, но тем временем вы могли бы использовать взломы setTimeout. – cschaefer

Привет! Я просмотрел документацию о событии, которое может срабатывать после сортировки и поиска. Я обновил свой ответ. «post-body.bs.table» вместо «sort.bs.table» работает для меня без хаков (кроме split/join). – cschaefer

Использование bootstrap-table на столе с кнопками

ответ

Смежные вопросы