使用R读取动态HTML元素
使用R读取动态HTML元素
提问于 2016-02-23 16:58:48
首先，我想说我对R完全陌生。我已经阅读了文档，无法找到修复以下场景的方法：
我用谷歌图表库(org-图表)制作了一个图表，它可以工作。问题是，层次结构中的每个节点都有一个输入，当用户单击一个按钮或单击enter时，我必须读取该输入并发送给R。以下是我的问题
- 我不知道如何将反应性设置为动态创建的节点
- 我不知道要读多少个节点，因为它们是完全随机的。我的想法是在每个节点上设置一个类，然后迭代，但我不确定。
我所做的只是为了测试：
library(shiny)
# Define server logic for random distribution application
shinyServer(function(input, output) {
output$num <- renderText ({
paste('Number has changed to : ', input$qty_1)
})
})$qty_1在哪里
<input name="qty_1" id="qty_1" value="10" type="number"></input>但没有运气。
我正在使用闪亮的框架来开发后端。
我的HTML是
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style type="text/css">
input[type="number"] {
background-color : #fdfdd2;
}
</style>
<script>
"use strict";
var tree = {
name: "ROOT",
desc: "Root",
qty : 0,
parent: '',
children: {
name: "FIRST",
desc: "first",
qty : 0,
parent: 'ROOT',
children: [{
name: "SECOND",
desc: "second",
qty : 0,
parent: 'FIRST',
children: {}
}, {
name: "THIRD",
desc: "third",
qty : 0,
parent: 'FIRST',
children: [{
name: "FOURTH",
desc: "fourth",
qty: 0,
parent: 'THIRD',
children:{}
},{
name: "FIFTH",
desc: "fifth",
qty : 0,
parent: 'THIRD',
children: [{
name: "SIXTH",
desc: "sixth",
qty : 0,
parent: 'FIFTH',
children: {}
}]
}]
}]
}
}
</script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Desc');
data.addColumn('string', 'Qty');
// For each orgchart box, provide the name, description, and quantity to show.
addRows(data, tree);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, { allowHtml: true });
}
function addRows(data, Tree) {
if (jQuery.isEmptyObject(Tree)) return;
appendToChart(data, Tree.name, Tree.desc, Tree.qty, Tree.parent);
var children = Tree.children;
if (Object.prototype.toString.call( children ) == '[object Array]'){ // more than 1 child
for (var i = children.length - 1; i >= 0; i--) {
addRows(data, children[i]);
}
}
else
{
addRows(data, children);
}
}
function appendToChart(data, name, desc, qty, parent) {
data.addRows([
//[name, parent, desc]
[{ v:name, f: name + '<div style="color:red; font-style:italic">' + desc +
'</div><input id="qty" size="4" value="' + qty + '" type="number"></input>' }, parent, desc]
]);
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="chart_div"></div>
</div>
</div>
</div>
<script>
$(function(){
$(document).on('keypress', function(e) {
if (e.which == 13)
if ($.isNumeric($("#qty").val()))
alert($("#qty").val());
else
alert("not a number");
});
});
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-23 18:36:46
有几件事你可以试试：
- 将shiny.js添加到您的
head中(我通常也会使用闪亮的jquery版本)：<script src="shared/jquery.js" type="text/javascript"></script><script src="shared/shiny.js" type="text/javascript"></script> - 将数字输入包装在一个
<div class="shiny-input-container">中，以便闪亮识别它们为输入并绑定它们，它们将需要一个名称属性，然后您可以使用该属性在server.R中引用它们。对于ex，您可以在addRows函数中这样做：
[{ v:name, f: name + '<div style="color:red; font-style:italic" >' + desc + '</div><div class="shiny-input-container"><input name="qty-'+name+'" size="4" value="' + qty + '" type="number"></input></div>' }, parent, desc]
- 由于您是通过js添加输入，所以应该在
Shiny.unbindAll()函数的开头调用drawChart，在结束时调用Shiny.bindAll()，以使所有闪亮的输入绑定正常工作。
在server.R中，您可以引用输入，它们都有一个类似于qty-name的名称，您可以通过执行grepl("qty",names(input))将它们从输入列表中筛选出来。例如，在server.R中，将它们全部打印出来。
observe({
lapply(names(input)[grepl("qty",names(input))],function(x){
print(paste(x,input[[x]]))
})
}) 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35583593
复制相关文章
相似问题
腾讯云开发者
