Пользовательский парсер для сортировщика таблиц JQuery
-
06-09-2019 - |
Вопрос
я использую jQuery-сортировщик таблиц и возникла проблема с порядком применения анализаторов к столбцам таблицы.Я добавляю собственный синтаксический анализатор для обработки валюты вида $-3,33.
$.tablesorter.addParser({
id: "fancyCurrency",
is: function(s) {
return /^\$[\-]?[0-9,\.]*$/.test(s);
},
format: function(s) {
s = s.replace(/[$,]/g,'');
return $.tablesorter.formatFloat( s );
},
type: "numeric"
});
Кажется, проблема в том, что встроенный анализатор валют имеет приоритет над моим собственным анализатором.Я мог бы поместить анализатор в сам код сортировщика таблиц (до анализатора валют), и он работал бы правильно, но это не очень удобно в обслуживании.Я не могу указать сортировщик вручную, используя что-то вроде:
headers: {
3: { sorter: "fancyNumber" },
11: { sorter: "fancyCurrency" }
}
поскольку столбцы таблицы генерируются динамически на основе вводимых пользователем данных.Я предполагаю, что одним из вариантов было бы указать сортировщик, который будет использоваться в качестве класса CSS, и использовать некоторый JQuery для явного указания сортировщика, например этот вопрос предполагает, но я бы предпочел придерживаться динамического обнаружения, если это возможно.
Решение
Первый вариант — присвоить столбцам со значениями валют дополнительный класс «{'sorter':'currency'}».Также убедитесь, что вы включили метаданные плагина, которые поддерживает tablesorter.Это вызовет параметры для каждого элемента и явно укажет tablesorter, как сортировать.
<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" />
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.metadata.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script>
$(document).ready(function()
{
$("#table").tablesorter();
}
);
</script>
</head>
<table id="table" class="tablesorter">
<thead>
<tr>
<th class="{'sorter':'currency'}">Currency</th>
<th>Integer</th>
<th>String</th>
</tr>
</thead>
<tbody>
<tr>
<td class="{'sorter':'currency'}">$3</td>
<td>3</td>
<td>three</td>
</tr>
<tr>
<td class="{'sorter':'currency'}">-$3</td>
<td>-3</td>
<td>negative three</td>
</tr>
<tr>
<td class="{'sorter':'currency'}">$1</td>
<td>1</td>
<td>one</td>
</tr>
</tbody>
</table>
Также есть ошибка в функции форматирования валюты:он не обрабатывает отрицательные числа.
я подал ошибка, и я работаю над установкой патча.
Второй вариант — применить это исправление к вашей копии tablesorter.После того, как вы применили исправление, вам не нужно будет указывать сортировщик валют в th или td (в любом случае указание в td является излишним).
Отредактируйте строку 724 файла jquery.tablesorter.js:
return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.]/g),""));
изменить на:
return $.tablesorter.formatFloat(s.replace(new RegExp(/[^-0-9.]/g),""));
случай:
ценности:$-3, $1, $3
текущий порядок возрастания:$1,$3,$-3
ожидаемый порядок возрастания $-3,$1,$3
случай:
ценности:-3 доллара, 1 доллар, 3 доллара
текущий порядок возрастания:1 доллар, 3 доллара, - 3 доллара
ожидаемый порядок возрастания $-3,$1,$3
Другие советы
У меня была аналогичная проблема, и я обнаружил textExtraction
вариант, который рекомендуется использовать, если ваши ячейки содержат разметку.Тем не менее, он отлично работает в качестве средства форматирования предварительного форматирования!
$('table').tablesorter({
textExtraction: function(s) {
var text = $(s).text();
if (text.charAt(0) === '$') {
return text.replace(/[^0-9-.]/g, '');
} else {
return text;
}
}
});
Я использовал что-то подобное, и это сработало для меня.
Используйте этот класс в заголовке <th class="{'sorter':'digit'}"> и в столбце <td class="{'sorter':'digit'}">.
Как только это будет сделано, внесите изменения в код JavaScript, чтобы получить всю валюту в виде цифр.
Готово, наслаждайтесь сортировкой!!!
Вот код:
ЗАГОЛОВОК:
<th style='width: 98px;' class="{'sorter':'digit'}">
Amount
</th>
КОЛОНКА (тд):
<td align="left" style='width: 98px;' class="{'sorter':'digit'}">
<%= Convert.ToDouble( a.AMOUNT ?? 0.0).ToString("C3") %>
</td>
ЯВАСКРИПТ:
<script language="javascript" type="text/javascript">
jQuery("#rewardtable").tablesorter({
textExtraction: function (data) {
var text = $(data).text();
if (text.toString().indexOf("-$") != -1) {
return ("-" + text.replace(new RegExp(/[^0-9.]/g), ""));
}
else if (text.toString().indexOf("$") != -1) {
return (text.replace(new RegExp(/[^-0-9.]/g), ""));
}
else {
return text;
}
}
});