Bootstrap форматирование данных таблицы для функций форматирования гиперссылок не работает - PullRequest
Новая
       156

Bootstrap форматирование данных таблицы для функций форматирования гиперссылок не работает

0 голосов
/ 07 августа 2020

Я пытался отформатировать значения столбца в BoostrapTable с помощью этого кода:

HTML: 

<table data-toggle="#table" id="articles-table">
    <thead class="thead-light">
        <tr>
            <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
                Title
            </th>
            <th data-field="date" data-sortable="true">
                Date
            </th>
        </tr>
    </thead>
</table>

JS: 

const LinkFormatter = (e, t) => '<a href="'+e.url+'" target="_blank">' + e.title + "</a>";
$(function() {
    $('#articles-table').bootstrapTable({
        data: mydata
    })
})

Мои данные: 

mydata = [
    {
        date: "2020-08-04",
        title: "Title one",
        url: "https://www.site1.org"
    }, {
        date: "2020-08-05",
        title: "Title two",
        url: "https://www.site2.org"

    }, {
        date: "2020-08-06",
        title: "Title three",
        url: "https://www.site3.org"
    }
]

Я хочу, чтобы в каждой строке заголовка была гиперссылка. Вместо этого у меня есть: введите описание изображения здесь

Может кто подскажет, что я делаю не так? Спасибо!

1 Ответ

1 голос
/ 07 августа 2020

Похоже, что скрипт bootstrap-table не принимает функцию, объявленную как константа const LinkFormatter. Поэтому я преобразовал его в объявление функции, как в документах .

Кроме того, если вы посмотрите на снимок экрана ниже, вам не нужно обращаться к url атрибут e, потому что e уже содержит URL, а t - это объект, содержащий заголовок.

image 

function LinkFormatter(e, t) {
  return '<a href="' + e + '" target="_blank">' + t.title + "</a>"
};

let mydata = [{
  date: "2020-08-04",
  title: "Title one",
  url: "https://www.site1.org"
}, {
  date: "2020-08-05",
  title: "Title two",
  url: "https://www.site2.org"

}, {
  date: "2020-08-06",
  title: "Title three",
  url: "https://www.site3.org"

}]

$(function() {
  $('#articles-table').bootstrapTable({
    data: mydata
  })
})
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>

<table data-toggle="#table" id="articles-table">
  <thead class="thead-light">
    <tr>
      <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
        Title
      </th>
      <th data-field="date" data-sortable="true">
        Date
      </th>
    </tr>
  </thead>
</table>

...