У меня есть таблица, которую я строю, используя обертку диаграммы следующим образом:
var rightWrapper;
function drawVisualization() {
rightWrapper = new google.visualization.ChartWrapper({
"chartType": "Table",
'dataSourceUrl':'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
'containerId':'target_table_div',
'query':'SELECT A,B,C,D',
'options': { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
google.visualization.events.addListener(rightWrapper.getChart(), 'select', rightSelectionHandler);
}
function rightSelectionHandler() {
var selection = rightWrapper.getChart().getSelection();
if (selection.length == 1) {
var item = selection[0];
if (item.row != null) {
alert("selected row " + item.row);
var value = (rightWrapper.getSnapshot().getDataTable().getValue(item.row,3));
alert(value);
}
}
}
}
И в этом столбце 3 у меня есть HTML для создания переключателей. К сожалению, фактический HTML хранится, и у меня, похоже, нет способа опроса, чтобы выяснить, какая радио-кнопка теперь проверена (getValue, перечисленный в коде выше, всегда показывает мне только HTML, который использовался для построения радио кнопки, а не какая из них сейчас "проверена").
К сожалению, кажется, что любые щелчки внутри этой таблицы должны быть обнаружены выбранным слушателем, и выбранный слушатель не передает никакой информации за пределы выбранной строки и столбца. Я попытался встроить функции изменения и щелчка, а также переключил s на своих переключателях. Например:
$("#radio").click(function(){ //also tried with .change
alert("working");
});
Это никогда не сработает, даже если я отключу моего первоначального слушателя.
Итак, как я могу узнать, какую радио-кнопку выбрал мой пользователь?
Примечание: мне нужны переключатели внутри таблицы, так как каждая строка таблицы имеет свои собственные переключатели, чтобы предоставить мне различную информацию о каждом.
2 ответа
Вам не нужна форма, вам просто нужно дождаться события 'ready'
графика,
перед назначением события изменения.
См. следующий рабочий фрагмент,
выберите радио, чтобы увидеть имя и значение ...
google.charts.load('current', {
packages: ['controls', 'table']
}).then(function () {
var rightWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
containerId: 'target_table_div',
query: 'SELECT A,B,C,D',
options: { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
$('input[type="radio"]').on('change', calcForm2);
}
});
function calcForm2(sender) {
console.log(sender.target.name, sender.target.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="target_table_div"></div>
Я понял, что-то работает
Я могу добавить форму вокруг своих переключателей с кодом event.preventdefault и вызвать функцию:
<form name="myForm" onchange="event.preventDefault(); calcForm2(this);">...radiobuttons...</form>
Затем в своей функции я делаю все, что хочу с «этим». Он выглядит как «имя = значение», поэтому его довольно легко разделить и проанализировать.
Похожие вопросы
Новые вопросы
google-apps-script
Используйте для вопросов о Google Apps Script, облачной платформе сценариев Google на основе JavaScript для автоматизации задач в продуктах Google и сторонних сервисах. Используйте в дополнение к соответствующим тегам продукта (например, [google-sheet], [google-docs]) или API-тегам (например, [google-drive-api]), где это применимо.