Выпадающий фильтр по продукту
Мой специальный раскрывающийся список фильтров не фильтрует некоторые продукты в моем списке продуктов. Например, два параметра отображаются, если я выбираю «Телефоны» в категории и выбираю «Samsung». Но если я выберу часы Apple Watch, ничего не отобразится. Как я могу убедиться, что что-то отображается, когда я выбираю их в категории и подкатегории, пока они находятся в листах Google? Я добавил изображения.
Вот код
function getCategories() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Product");
var categories = [];
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
var category = data[i][0];
if (categories.indexOf(category) == -1) {
categories.push(category);
}
}
return categories;
}
function getSubCategories(category) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Product");
var subCategories = [];
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
var rowCategory = data[i][0];
var subCategory = data[i][1];
if (rowCategory == category && subCategories.indexOf(subCategory) == -1) {
subCategories.push(subCategory);
}
}
return subCategories;
}
function filterProducts(category, subCategory) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Product");
var [headers, ...data] = sheet.getDataRange().getValues();
var filteredData = data.filter(function (row) {
return row[0] == category && row[1] == subCategory;
});
return [headers, ...filteredData];
}
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
template.categories = getCategories();
template.category = '';
template.subCategory='';
return template.evaluate().setTitle('Product Filter');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getSheetData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Product');
var dataRange = sheet.getDataRange();
var dataValues = dataRange.getValues();
return dataValues;
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
Это скрипт и html код.
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<script>
function getSubCategories(category)
{
google.script.run.withSuccessHandler(function(ar)
{
console.info(ar);
subCategory.length = 0;
let option = document.createElement("option");
option.value = "";
option.text = "";
subCategory.appendChild(option);
ar.forEach(function(item, index)
{
let option = document.createElement("option");
option.value = item;
option.text = item;
subCategory.appendChild(option);
});
}).getSubCategories(category);
};
function updateSubCategories() {
var category = document.getElementById('category').value;
google.script.run.withSuccessHandler(function(subCategories) {
var subCategoryDropdown = document.getElementById('sub-category');
subCategoryDropdown.innerHTML = '';
for (var i = 0; i < subCategories.length; i++) {
var option = document.createElement('option');
option.value = subCategories[i];
option.text = subCategories[i];
subCategoryDropdown.appendChild(option);
}
}).getSubCategories(category);
}
function filterProducts() {
var category = document.getElementById('category').value;
var subCategory = document.getElementById('sub-category').value;
google.script.run.withSuccessHandler(function(filteredData) {
var [headers, ...filteredData] = filteredData;
var productTable = document.getElementById('product-table');
productTable.innerHTML = '';
var headerRow = document.createElement('tr');
for (var i = 0; i < headers.length; i++) {
var headerCell = document.createElement('th');
headerCell.textContent = headers[i];
headerRow.appendChild(headerCell);
}
productTable.appendChild(headerRow);
for (var i = 0; i < filteredData.length; i++) {
var row = filteredData[i];
var tableRow = document.createElement('tr');
for (var j = 0; j < row.length; j++) {
var tableCell = document.createElement('td');
tableCell.textContent = row[j];
tableRow.appendChild(tableCell);
}
productTable.appendChild(tableRow);
}
}).filterProducts(category, subCategory);
}
</script>
</head>
<body>
<h1>Product Filter</h1>
<?var tableData = getSheetData();?>
<?var url = getUrl();?>
<label for = "category">Category:</label>
<select id = "category" onchange = "updateSubCategories()">
<? for (var i = 0; i < categories.length; i++) { ?>
<option value = "<?= categories[i] ?>"><?= categories[i] ?></option>
<? } ?>
</select>
<label for = "sub-category">Sub-Category:</label>
<select id = "sub-category" onchange = "filterProducts()">
</select><br><br>
<? if (category != '' || subCategory != '')
{
var output_array = [];
tableData.forEach(function(value, index) {
if (index == 0)
{
output_array.push(value);
}
else if (index > 0 && category != '' && subCategory != '')
{
if (value[0] == category && value[2] == subCategory)
{
output_array.push(value);
}
}
else if (index > 0 && category != '')
{
if (value[0] == category)
{
output_array.push(value);
}
}
else if (index > 0 && subCategory != '')
{
if (value[2] == subCategory)
{
output_array.push(value);
}
}
});
}
else
{
var output_array = tableData;
} ?>
<!-- <table id = "product-table">
</table> -->
<table id = "product-table" border = "1" cellpadding = "5px" >
<?for(var i = 0; i < tableData.length; i++) { ?>
<?if (i == 0) { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<th><?= tableData[i][j] ?></th>
<? } ?>
</tr>
<? } else { ?>
<tr>
<? for(var j = 0; j < tableData[i].length; j++) { ?>
<td><?= tableData[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
<? } ?>
</table>
</body>
</html>
Вот изображение со списком всех продуктов
Вот продукт после того, как я фильтрую для компьютера Dell
Это фильтр для часов.
Проблема в том, что если у меня есть данные более чем в пяти столбцах, этот фильтр не отображается. Так, например, у меня есть категория, подкатегория, цена, скидка, новая цена и комментарий. Если есть какая-либо категория, в которой есть данные во всех этих полях, она не будет отображать эту строку.
Спасибо за ответ. Насчет The problem is if I have data in more than five columns, it does not display that filter. So, for example, I have Category, Subcategory, price, discount, new price, and comment. If there is any category that has data in all of those fields, it will not display that row., в вашем сценарии показа есть 4 столбца. Итак, я не могу понять ваш ответ. Но, я хотел бы поддержать вас. Итак, могу я спросить вас о деталях вашего фактического вопроса?
Я обновил картинки. Если в столбцах 6, 7 или 8 есть какая-либо информация, фильтр не работает. Он фильтрует, только если информация находится только в столбцах с 1 по 5.
Спасибо за ответ. Теперь, когда я увидел ваш обновленный вопрос, я был удивлен, что вы изменились по сравнению с исходной ситуацией. В этом случае, во-первых, могу ли я спросить вас, был ли мой предложенный ответ полезен для вашей исходной ситуации? Потому что мой ответ на ваш первоначальный вопрос.
Да, это помогло. Я добавил код. Просто фильтр до сих пор не работает.
Спасибо за ответ. Что касается вашего нового вопроса, я хотел бы поддержать вас. Но я думаю, что когда вы предоставите больше информации, это поможет понять причину вашей текущей проблемы и решение. Итак, можете ли вы опубликовать его как новый вопрос, включив дополнительную информацию? Этим я хотел бы подтвердить это. Кстати, насчет It's just that the filter is still not working., в данном случае какой фильтр это 1-й выпадающий список или 2-й выпадающий список?
Первый и второй выпадающие списки заполняются. Просто не обновляется таблица
Спасибо за ответ. Что касается The first and second dropdown lists are populating. It is just not updating the table, в этом случае, когда вы проверяете исходную ситуацию (5 столбцов), проблем не возникает. И при изменении количества столбцов с 5 на 8 возникла эта проблема. Правильно ли я понимаю?
Если я правильно понимаю, из того, что вы показываете новую электронную таблицу, я обеспокоен тем, что ваша электронная таблица включает объект даты. Если я правильно понимаю, возникает ошибка, когда значения отправляются из скрипта Google Apps в Javascript из-за текущей спецификации. Я предположил, что это может быть причиной вашей текущей проблемы. В этом случае замените все getValues() на getDisplayValues() на стороне скрипта Google Apps, отразите последний скрипт в веб-приложениях и протестируйте его снова. Таким образом, ваша новая проблема может быть удалена. Во-первых, пожалуйста, проверьте это.
Да это верно. Когда я изменил с 5 на 8 столбцов, возникла проблема.
Перейдя с getValues() на getDisplayValues(), это сработало. большое спасибо за вашу помощь
Спасибо за ответ и повторный тест. Я рад, что ваша вторая проблема была решена. И тебе спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хотя я не уверен, правильно ли я понял ваш ожидаемый результат, как насчет добавления начального значения во второй раскрывающийся список? Когда это отражено в вашем сценарии, получается следующее.
Пожалуйста, измените updateSubCategories() Javascript следующим образом.
Модифицированный скрипт:
function updateSubCategories() {
var category = document.getElementById('category').value;
google.script.run.withSuccessHandler(function (subCategories) {
var subCategoryDropdown = document.getElementById('sub-category');
subCategoryDropdown.innerHTML = '';
// --- I added the below script.
var option = document.createElement('option');
option.value = "";
option.text = "Please select";
option.hidden = true;
subCategoryDropdown.appendChild(option);
// ---
for (var i = 0; i < subCategories.length; i++) {
var option = document.createElement('option');
option.value = subCategories[i];
option.text = subCategories[i];
subCategoryDropdown.appendChild(option);
}
}).getSubCategories(category);
}
- В соответствии с этой модификацией, когда значения установлены во 2-м раскрывающемся списке, начальным значением является «Пожалуйста, выберите». Я догадался, что это может быть ваш ожидаемый результат.
Примечание:
Когда вы изменили сценарий Google Apps для веб-приложений, измените развертывание как новую версию. При этом измененный скрипт отражается в веб-приложениях. Пожалуйста, будьте осторожны с этим.
Вы можете увидеть подробности этого в моем отчете «Повторное развертывание веб-приложений без изменения URL-адреса веб-приложений для новой IDE (Автор: я)».
Хотя я не уверен, правильно ли я понял ваш вопрос, я предложил ответ. Пожалуйста, подтвердите это. Если я неправильно понял ваш вопрос, прошу прощения.