Question

我有一个包含多个级别的组织结构图，下面的图片来自其中的一部分。我尝试获取所选节点的所有子节点和子节点，例如，如果＆＃34;电源业务单元＆＃34;节点选择它获得所有3个孩子，并为每个孩子做同样的事情。我得到了第一级但我无法获得树的深度以提供到达最后一个孩子的循环次数。

1-如何获取图表中的最后一个孩子？如何获得树的深度？

2-是否有放大/缩小工具栏或其他东西，我可以添加到图表中吗？

这是我的绘图代码：

google.load('visualization', '1', { packages: ['table', 'orgchart'] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'NODE');
        data.addColumn('string', 'PARENT');
        data.addColumn('string', 'NODEID');

        data.addRows(JSON.parse(document.getElementById("<%=HiddenField1.ClientID%>").value));
        //
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

        function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var oInd = data.getValue(selectedItem.row, 2);

                var arrLoop = chart.getChildrenIndexes(selectedItem.row);
                var arrConcat = chart.getChildrenIndexes(selectedItem.row);


                for (var i = 0; i < arrLoop.length; i++) {
                    var arr2 = new Array(chart.getChildrenIndexes(arrLoop[i]).length);
                    arr2 = chart.getChildrenIndexes(arrLoop[i]);
                    for (var j = 0; j < arr2.length; j++) {
                        arrConcat.push(arr2[j]);
                    }
                    arrConcat.concat(arr2);
                }

                var arrChilds = new Array(arrConcat.length);

                for (var i = 0; i < arrConcat.length; i++) {
                    arrChilds[i] = data.getValue(arrConcat[i], 2);
                }
                drawTable(oInd, arrChilds);
            }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, { allowHtml: true });

        //for (var i = 0; i < data.getNumberOfRows() ; i++) {
        //    chart.collapse(i, true);
        //}
    }

Google Organizational Chart

Answer 1

不确定图表中最后一个孩子的意思。此图表似乎不支持缩放，您可能需要自己编写代码或查看库。关于让孩子和子女被选中的问题，你需要处理递归：

    google.visualization.events.addListener(chart, 'select', function(){
          var children=[]
          var selected=chart.getSelection()[0].row;

          function getChilds(index){ // recursive function, adds children of index (row)
              var childs=chart.getChildrenIndexes(index); // get children indexes of current index
              for(var i = 0; i < childs.length;i++){ // for each children
                  children.push(data.getValue(childs[i],0)) // add the title
                  getChilds(childs[i]) // and call the function with this children index, to get their children and so on >> this is recursive
              }
          }

          getChilds(selected) // start recursive function with selected index
          console.log(children)

        })

以下是一个示例：http://jsfiddle.net/36gg3ro1/1/

Google Visualization组织结构图（节点儿童）

1 个答案: