Как сделать таблицу сортируемой, когда все компоненты передаются в виде строки через ng-bind-html в AngluarJS - PullRequest
Новая
       64

Как сделать таблицу сортируемой, когда все компоненты передаются в виде строки через ng-bind-html в AngluarJS

0 голосов
/ 28 января 2019

Привет У меня есть ситуация в AngluarJS, что HTML генерируется back-end, и единственное, что должен сделать front-end, это поместить HTML, который в основном состоит из табличных тегов, в ng-bind-html и показать его пользователю,Но теперь эти таблицы тоже должны быть сортируемыми.Как я могу это сделать?

То, что я уже сделал, - это создаю свою собственную директиву, используя this , поэтому статическая строка HTML также должна выполнять некоторые действия.Но сортировка их - это нечто другое.Другими словами, я хочу, чтобы моя полностью сгенерированная таблица со всеми <tr> и <td> была отсортирована по моим действиям.

Вот мой упрощенный код (compile - это моя директива): 

JS:
// The string is fully generated by back-end
$scope.data.html = 
'<table> <tr> <th ng-click="sortByHeader($event)"> Name </th> 
              <th ng-click="sortByHeader($event)"> Age </th> </tr>
              <tr> <td> Sara </td> <td> 15 </td> </tr>
              <tr> <td> David </td> <td> 20 </td> </tr>'

HTML: 
<div compile="data.html"></div>

* * * * * * * * * * * * * * * * * * * * * * * * * * *1013* - это то, что back-end может подготовить для меня, поэтому я могу использовать его благодаря compile, который я написал, что позволяет мне узнать, какой заголовок был нажат.Кроме этого я ничего не могу сделать.Если вы не можете мне помочь: D

Заранее спасибо, я надеюсь, мой вопрос был ясен.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Поскольку вы пометили свой вопрос sorttable.js, я собираюсь предположить, что вы используете этот скрипт для сортировки таблиц.Теперь, если я правильно понимаю, sorttable.js анализирует ваш HTML для любых таблиц с классом sortable.Ваша таблица, очевидно, загружается динамически, поэтому sorttable.js не знает об этом при разборе HTML.

Но вы также можете сказать, чтобы динамически добавляемая таблица сортировалась тоже.

Релевантночасть взята со следующей страницы: https://kryogenix.org/code/browser/sorttable/#ajaxtables

Сортировка таблицы добавлена ​​после загрузки страницы

После добавления новой таблицы на страницу вво время выполнения (например, выполнив Ajax-запрос для получения содержимого или динамически создавая его с помощью JavaScript), получите ссылку на него (возможно, с помощью var newTableObject = document.getElementById (idOfTheTableIJustAdded) или аналогичного), а затем выполните следующее:

sorttable.makeSortable (newTableObject);

Это можно сделать с помощью angular.Если нет, я могу попытаться собрать что-нибудь позже.

0 голосов
/ 28 января 2019

Является ли ответ на вопрос " Должна ли отображаемая таблица точно соответствовать HTML, полученному с помощью бэкэнда? " своего рода " Нет "?

Если это так, то вот хакерский способ получить контроль над содержимым таблицы, анализируя и получая данные из строки HTML-кода с помощью регулярных выражений.

Например: захватить все данные строки и применить сортировку на стороне клиента

// Variables to be set by your sortByHeader functions in order to do client-side sorting
$scope.expression = null;
$scope.direction = null;

var regexToGetTableHead = /<table>\s*(.*<\/th>\s*<\/tr>)/g;
$scope.tableHead = regexToGetTableHead.exec($scope.data.html);

$scope.tableRows = [];

var regexToGetRowContents = /<tr>\s*<td>\s*(\w*)\s*<\/td>\s*<td>\s*(\w*)\s*<\/td>\s*<\/tr>/g;

var match;
while ((match = regexToGetRowContents.exec($scope.data.html)) != null) {
    $scope.tableRows.push({
        "name": match[1],
        "age": match[2] 
    });
}

И HTML 

<table>
    <thead compile="tableHead"></thead>

    <tbody>
        <tr ng-repeat="row in tableRows | orderBy: expression : direction">
            <td>{{row.name}}</td>
            <td>{{row.age}}</td>
        </tr>
    </tbody>
</table>
...