Чтение динамических элементов HTML с использованием R

Прежде всего, я хотел бы сказать, что я совершенно новичок в R. Я прочитал документацию и не могу найти способ исправить следующий сценарий:

Я сделал диаграмму, используя библиотеку диаграмм Google (org-chart), и она работает. Дело в том, что у каждого узла в иерархии есть вход, который я должен прочитать и отправить в R, когда пользователь нажимает кнопку или нажимает ввод. И вот мои проблемы

  1. Я не знаю, как установить реактивность для динамически создаваемых узлов
  2. Я не знаю, сколько узлов мне нужно прочитать, потому что они абсолютно случайны. Моя идея состоит в том, чтобы установить класс на каждом узле и повторить его позже, но я не уверен.

Что я сделал только для проверки:

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>

Но не повезло.

PS Я использую Shiny Framework для разработки бэкенда.

Мой 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 ответ

Решение

Есть несколько вещей, которые вы можете попробовать:

  1. добавить блестящий.js к вашему head (Я вообще тоже ставлю блестящую версию jquery):

    <script src="shared/jquery.js" type="text/javascript"></script>

    <script src="shared/shiny.js" type="text/javascript"></script>

  2. Оберните ваши числовые входы в <div class="shiny-input-container"> так что блестящий распознает их как входные данные и связывает их, им понадобится атрибут имени, который вы затем сможете использовать для ссылки на них в server.R, Например, вы могли бы сделать в своем 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]

  1. Поскольку вы добавляете входные данные с помощью js, вы должны позвонить Shiny.unbindAll() в начале на drawChart функция и Shiny.bindAll() в конце, чтобы все привязки Shiny работали.

В 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]]))
   })
})
Источник
Другие вопросы по тегам