Добавление парсера-сортировщика на основе выборки данных из столбца ячейки
-
21-08-2019 - |
Вопрос
Это последняя часть проекта, спасибо всем, кто помогал с исправлением синтаксиса в других частях.Я использую плагин tablesorter для jQuery.По сути, я хочу, чтобы моя пользовательская функция сортировки выбирала заголовок таблицы в зависимости от того, есть ли у нее класс, а именно «SortableHeader».Затем он должен решить, какой анализатор метаданных добавить в заголовок этого конкретного столбца на основе данных в этом столбце.Я применил более сложный подход и решил взять образец данных из одной ячейки (скажем, первой строки столбца) и сравнить его с различными шаблонами или регулярными выражениями, затем сортировщик добавит подходящий анализатор метаданных. на основе результата сравнения, напримересли он соответствует шаблону даты, сортировщик добавит анализатор даты, если он соответствует шаблону URL-адреса, он добавит анализатор URL-адресов и т. д.У меня есть две проблемы:
Я не могу понять, как выбрать одну строку из столбца, я пытался посмотреть, но я нахожу учебники для пересечения всех рядов в таблице, в отличие от выбора одной строки из столбца на основе заголовка столбца информация.
Я не уверен, как делать шаблоны и/или регулярные выражения в jQuery.напримерКак будет дата регулярного выражения/шаблона, которое ищет даты формы 2 марта 2009 года, посмотрите в jQuery ??
В настоящее время у меня есть следующая схема
//Add parser to each table header that has a class="SortableHeader"
$("th[class='SortableHeader']").each(function(column){
//Take a sample of data from a single cell in this column
// compare it to various patterns to determine what type
//of data it contains in order to apply the appropriate parser
});
Пример раздела заголовка для выполнения поиска по сортировке будет следующим:
<table id="myTable" summary="Table is used to list available workshops" cellspacing="0">
<thead>
<tr>
<th class="SortableHeader"><a rel = "Header" href="#" title="Sort title in decending order" class="">Title</a></th>
<th><a rel = "Header" href="#" title="Sort instructor in descending order" class="">Instructor</a></th>
<th class="SortableHeader"><a rel = "Header" href="#" title="Sort column in decending order" class="">Date</a></th>
<th>Start/End</th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="">Seats Available</a></th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="">Enrolled</a></th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="">Pre-Requisites</a></th>
<th>Workshop Actions</th>
</tr>
</thead>
Последний вопрос, который у меня есть: может ли быть гораздо более простой способ сделать это??Я полагаю, что мог бы просто взять заголовок из заголовка и основывать на нем селектор синтаксического анализатора, но я хотел избежать этого, поскольку это кажется немного менее гибким, мне пришлось бы жестко закодировать определенные строки, чтобы проверить заголовок заголовок, и любой, кто реализует это, сможет использовать только эти конкретные строки в качестве заголовка заголовка, чтобы применить определенные анализаторы сортировки.Я хочу избежать этого, если смогу.
Решение
Используйте селектор, который возвращает столбцы в первой строке, а затем выберите из него нужный столбец.
var firstColumn = $("#myTable TBODY TR:first TD")[0];
Я бы попытался принудительно указать значение даты и числовых типов, а затем вы сможете перейти к подтипам и сопоставлению регулярных выражений, когда просматриваете различные варианты типов строк (URL-адреса и т. д.).
Если вы хотите сделать его более декоративным, я бы просто добавил еще один класс в заголовки столбцов, указывающий компаратор, который вы хотите использовать при сортировке.
<th Class = "SortableHeader DataTypedate"> ... < /th> <th Class = "SortableHeader DatatyPeurl"> ... < /th>
Когда вы инициализируете сортировку, вы можете использовать метод hasClass, чтобы узнать, имеет ли столбец определенный тип даты, связанный с ним.
$("#myTable THEAD TR:first TH").each(function(column) {
if ($(this).hasClass("DataTypeDate")) {
// ...
}
});