Получить значения всех строк таблицы за счет хранения сеанса

У меня есть таблица HTML с одним столбцом, имеющим флажки. Если вы установите флажок, нажмите кнопку «Оформить заказ», он займет указанные строки и отобразит их в теле письма.

Верхние 100 строк отображаются при загрузке страницы. У меня также есть функция поиска, где пользователь может искать определенные строки. Пользователь может выполнять маневрирование во всех различных поисковых запросах и по-прежнему держать все флажки в хранилище сеансов. Однако, когда пользователь нажимает «Checkout», в теле письма отображаются только те строки таблицы, которые отмечены и отображаются в данный момент на странице.

Таким образом, если пользователь выполняет поиск строки таблицы и проверяет ее, а затем переходит к исходным 100 топ-строкам, эта строка, указанная в строке, не будет отображаться в электронном письме, поскольку она не отображается на странице в данный момент.

Как я могу исправить это и показать ВСЕ строки, которые были проверены, независимо от того, видны они на странице или нет?

Мне сказали, что я храню флажки в сеансе, но затем возвращаюсь к пользовательскому интерфейсу, чтобы прочитать список выбранных элементов. Тем не менее, я не уверен, как именно это исправить, и я бы очень признателен за помощь! Благодаря!

JavaScript, который включает код для проверки всех флажков в течение всего сеанса:

$(function(){ $(':checkbox').each(function() { // Iterate over the checkboxes and set their "check" values based on the session data var $el = $(this); //console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]); $el.prop('checked', sessionStorage[$el.prop('id')] === 'true'); if ($el.prop('checked')) { //show the quantity cell in the column under header with class num $el.closest('tr').find('td.quantity_num').toggle(this.checked); var quantity = sessionStorage['value_'+$el.prop('id')]; if (quantity) { $el.closest("tr").find(".spinner" ).spinner( "value", quantity ); } } }); $('input:checkbox').on('change', function() { // save the individual checkbox in the session inside the `change` event, // using the checkbox "id" attribute var $el = $(this); sessionStorage[$el.prop('id')] = $el.is(':checked'); }); }); 

JavaScript, который отправляет информацию в тело электронной почты:

 function sendMail() { var dataItems = [ { 'clss':'.loc', 'prop':'loc' }, { 'clss':'.rp-code', 'prop':'rpCode' }, { 'clss':'.sku', 'prop':'sku' }, { 'clss':'.special-id', 'prop':'specialId' }, { 'clss':'.description', 'prop':'description' }, { 'clss':'.quantity', 'prop':'quantity' }, { 'clss':'.unit', 'prop':'unit' } ]; var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body="; link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) { var str = dataItems.map(function(item) { return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0'; }).join(''); str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '%0D%0A'; return str; }).join('') + '%0D%0A'; console.log(link); window.location.href = link; } 

Таблица HTML:

 

query($query) as $row) {?> <td class="loc ui-widget-content" data-loc=""> <td class="rp-code ui-widget-content" align="center" data-rp-code="" id="rp-code-"> <td class="sku ui-widget-content" data-sku="" id="sku-"> <td class="special-id ui-widget-content" data-special-id="" align="center" id="special-id-"> <td class="description ui-widget-content" data-description="" id="description-"> <td class="quantity ui-widget-content" data-quantity="" align="center" id="quantity-"> <td class="unit ui-widget-content" data-unit="" id="unit-">
Loc Report Code SKU Special ID Description Quantity Unit Quantity #
<input type="checkbox" class="check" name="check" id="checkid-"> <input disabled="true" type="textbox" style="width: 100px;" class="spinner" id="spin-">

РЕДАКТИРОВАТЬ:

Функция, отображающая столбец Quantity # при проверке строки:

 $(function () { $(".check").change(function(){ $(this).closest('tr').find('td.quantity_num').toggle(this.checked); setupSpinner(this); console.log('input - checked: ',$('input.check').is(':checked')); //var quantity = $(this).closest('tr').find('td.quantity').data('quantity'); if($('input.check').is(':checked')) $(this).closest('table').find('th.num').toggle(true); else $(this).closest('table').find('th.num').toggle(false); }); }); 

Функция для счетчика:

 function setupSpinner(checkbox) { var quantity = $(checkbox).closest('tr').find('td.quantity').data('quantity'); console.log('quantity: ',quantity); $(checkbox).closest("tr").find(".spinner" ).spinner({ spin: function( event, ui ) { if ( ui.value > quantity ) { $( this ).spinner( "value", quantity ); return false; } else if ( ui.value <= 1 ) { $( this ).spinner( "value", 1 ); return false; } //store value var test = ui.value; sessionStorage.setItem('value_'+$(checkbox).prop('id'), JSON.stringify(test)); var testtrue = sessionStorage.getItem('value_'+$(checkbox).prop('id')); console.log('testtrue: ', JSON.parse(testtrue)); } }); } 

Функция, которая получает значения из каждой ячейки в проверенной строке таблицы:

 $(function () { $(document).on("click", "#merchTable .check", function () { var $this = $(this); var tds = $this.closest('tr').find('td').filter(function () { return $(this).find('.check').length === 0; }); var isValid = true; var errors = ''; var elements = tds; if (tds.find('td').length > 0) { elements = tds.find('td'); } var dict = {}; elements.each(function (index, element) { var type = $(this).attr('class'); var value = (element.tagName == 'td') ? $(this).val() : $(this).text(); console.log(type); // ----- Switch statement that provides validation for each table cell ----- switch (type) { case "loc ui-widget-content": dict["Loc"] = value; break; case "rp-code ui-widget-content": dict["Rp-Code"] = value; break; case "sku ui-widget-content": dict["SKU"] = value; break; case "special-id ui-widget-content": dict["Special-ID"] = value; break; case "description ui-widget-content": dict["Description"] = value; break; case "quantity ui-widget-content": dict["Quantity"] = value; break; case "unit ui-widget-content": dict["Unit"] = value; break; case "quantity_num ui-widget-content": dict["spinner"] = value; break; } }) if (isValid) { console.log(dict); } else { alert(errors); } }); }); 

Исходя из этого и более ранних вопросов, я понимаю, что вам нужно что-то, что:

  • сохраняет состояние проверенных строк в window.sessionStorage .
  • восстанавливает состояние проверенных строк после разбивки на страницы / поиск.
  • позволяет состав тела электронной почты, отражающий все проверенные строки, отображаются ли они в настоящее время или нет.

Без дисциплины код может стать действительно грязным. Я рекомендую одноэлементный объект с простым API и в итоге получил код ниже.

 $(function($) { // ************************************************************** // RowData acts as an interface beteween high level // application code and sessionStorage. // ************************* // RowData is phrased as a singleton object with private data, // and a bunch of functions, some of which are exposed as methods. // ************************* // Inner member `rowData` is a javascript representation of all // checked rows in the session. // A JSON-encoded version of `rowData` is stored in sessionStorage. // ************************************************************** var RowData = (function(storage, storageKey) { var rowData = readFromSession(); var dataItems = ['loc', 'rp-code', 'sku', 'special-id', 'description', 'quantity', 'unit']; var emailDelimiters = { 'row': '%0D%0A', 'dataItem': '\xa0\xa0' }; function readFromSession() { return JSON.parse(storage.getItem(storageKey) || '{}'); } function writeToSession() { storage.setItem(storageKey, JSON.stringify(rowData)); } function writeRow(tr) { var $tr = $(tr), id = $tr.prop('id'); if($tr.find('.check').is(':checked')) { rowData[id] = {}; for(var i=0; i } else { delete rowData[id]; } writeToSession(); } function readRow(tr) { // restore tr's checkbox and spinner value from stored data var $tr = $(tr), id = $tr.prop('id'), row = rowData[id]; if(row) { $tr.find('.check').prop('checked', true).end() // .find('.spinner').spinner('value', row.quantity_num); // if using spinner widget .find('.spinner').val(row.quantity_num); // if using HTML5  } } function toEmailString() { return $.map(rowData, function(row, id) { return $.map(row, window.encodeURIComponent).join(emailDelimiters.dataItem); }).join(emailDelimiters.row); } // selectively expose functions as methods of RowData return { 'writeRow': writeRow, 'readRow': readRow, 'toEmailString': toEmailString }; })(window.sessionStorage, 'checkedRowData'); // ********************************************************************************************** // With RowData in place to do the hard stuff, the high level application code is really simple // ********************************************************************************************** $('#merchTable').on('change', '.check', function() { // on changing a table row ... RowData.writeRow($(this).closest('tr').get(0)); // ... set the corresponding row object in RowData and sessionStorage }).on('blur', '.spinner', function() { // on leaving a spinner widget RowData.writeRow($(this).closest('tr').get(0)); }); $('#checkout').on('click', function() { // on clicking the [Checkout] button var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=" + RowData.toEmailString(); console.log(link); window.location.href = link; }); // Call this function on completion of every pagination/search function restoreVisibleRows() { $('#merchTable tbody tr').get().forEach(RowData.readRow); } // ... // here, set up table pagination/search, and spinners. // ... restoreVisibleRows(); }); 

минимально проверенный

Обратите внимание, что все вышеописанное полагается на строки таблицы, которые обслуживаются следующим образом:

   < ?php echo $row['Loc'];?> < ?php echo $row['Rp-Code'];?> < ?php echo $row['SKU'];?> < ?php echo $row['Special-ID'];?> < ?php echo $row['Description'];?> < ?php echo $row['Quantity'];?> < ?php echo $row['Unit'];?>   

Здесь я :

  • добавлен id="< ?php echo intval ($row['ID'])?>" в

    – интерфейс RowData не будет работать без него.

  • удаленные data-*** и атрибуты id из тегов

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