google的orgchart中jquery找不到控件？？？

最近用asp.net做组织架构图，网上找了好多资料，觉得google的visualization插件可以用。下了源码本机试用了一下，发现几个问题
1、如何加载动态数据。比如组织节点是从数据库中拿到的数据，如何给节点赋值？
2、另，现在某个节点下挂treeview，可是用jquery找不到对象。
哪位大哥用过啊，帮帮忙！送分<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script src="Scripts/jquery-latest.min.js" type="text/javascript"></script>
    <%--  <script src="Scripts/public.js" type="text/javascript"></script>--%>     <script type='text/javascript'>
         google.load('visualization', '1', { packages: ['orgchart'] });
         google.setOnLoadCallback(drawChart);
         function drawChart() {
             var data = new google.visualization.DataTable();
             data.addColumn('string', 'Name');
             data.addColumn('string', 'Manager');
             data.addColumn('string', 'ToolTip');
             data.addRows([
          [{ v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>' }, '', 'The President'],
          [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' }, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          [{ v: 'carol', f: 'carol<div style="color:red; font-style:italic"> <select id="dept_list" size="13" style="margin-top:10px; width:180px;"></select></div>' }, 'Bob', '']
        ]);
             var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
             go();
             chart.draw(data, { allowHtml: true });
         }         function go() {
             alert($("#dept_list").length);
         }    </script></head><body>
<div id='chart_div'></div>
</body>


</html>jqueryvisualization组织架构asp.netjavascript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

             chart.draw(data, { allowHtml: true });
             go();
更换位置，都会没有绘图当然没有在dom中生成
function drawVisualization(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'ParentName');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].OrgName, '']);

               $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: 'orgchart.aspx/IsExists',
                    data: "{deptId:'" + dataValues[i].Value + "'}",
                    success:
                    function (response) {
                        if (response.d != "0") {
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json',
                                url: 'orgchart.aspx/GetSubData',
                                data: "{deptId:'" + response.d + "'}",
                                success:
                                function (response2) {

                                    var subValue = response2.d;
                                    for (var i = 0; i < subValue.length; i++) {
                                        data.addRow([{ v: subValue[i].OrgName, f: '<div style="color:red; font-style:italic"> </div>' }, subValue[i].ParentName]);

                                    }
                                }                            });
                        }
                    }                });

            }

            new google.visualization.OrgChart(document.getElementById('chart_div')).
                draw(data, { allowHtml: true });
                //go();
        }
这段js中在data.addRow([{ v: subValue[i].OrgName, f: '<div style="color:red; font-style:italic"> </div>' }, subValue[i].ParentName]);
这里 data数据很完整，可是到了最后draw(data, { allowHtml: true })data的值没有子节点数据？不知道这是为什么？
本帖最后由 showbo 于 2013-09-16 17:25:38 编辑
版主你太棒了，你用过这个插件么？现在还有一个问题，就是子部门是同名的情况，在draw出的架构图中只显示一个。比方说我根节点是“集团”，下面是几个办公室这样的话知会显示1个办公室？是不允许名称相同么？
有个新问题求解决？我在【 data.addRow([{ v: subValue[i].OrgName + i, f: subValue[i].OrgName + '<div style="color:red; font-style:italic"><select id="dept_left_list" size="13" style="margin-top:10px; width:180px;"></select> </div>' }, subValue[i].ParentName]);】这句html中增加select控件，给每个部门绑定树结构，想到每个select控件用部门ID命名，然后在js函数中，查找所有select控件并绑定数据加载事件，参数就用select控件的ID，不知道怎么用js脚本实现这个功能？
data.addRow([{ v: subValue[i].OrgName + i, f: subValue[i].OrgName + '<div style="color:red; font-style:italic"><select id="dept_left_list_' + 部门id + '" size="13" style="margin-top:10px; width:180px;"></select> </div>' }, subValue[i].ParentName]);$('select[id^="dept_left_list_"]').each(function(){
  var id=this.id.replace('dept_left_list_','');
  alert('部门id：'+id)
});
@showbo版主，在select树结构这边我用的是jquery.ztree.core-3.5.min.js，样式是/zTreeStyle.css，在遍历select控件时，调用数据初始化方法“go(id)”$("select[name=subDept]").each(function (a, b) {
                                        var id = $(b).attr("id"); //获取id属性
                                        go(id);
                                    });,
go 方法：  function go(id) {
            $.ajax({
                type: "post",
                contentType: "application/json",
                data: "{ a: '" + id + "'}",
                url: "MyDeptMng.aspx/treeList_selectorg",
                dataType: "json",
                success: function (data) {
                    if (data.d != "") {
                        $("#" + id).empty();
                        data = eval("(" + data.d + ")");
                        $.fn.zTree.init($("#" + id), setting, data);
                        //$("#" + id).append(data.d);
                        //InitStyle(id);
                    }
                }
            });
        }，这样处理后，并没有出现我想要的树结构数据？不知道这么应用是不是正确？望指点
ztree的容器是ul，你用select做容器显示不出来的，因为向select中添加的内容为li，不是option改成ul