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

liu_dashi 2013-09-13 10:52:26
最近用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>
...全文
282 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
liu_dashi 2013-09-18
  • 打赏
  • 举报
回复
嗯 可以了 为什么组织架构图的线有时候显示 有时候不显示呢?
liu_dashi 2013-09-17
  • 打赏
  • 举报
回复
有个新问题 求解决?我在【 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脚本实现这个功能?
liu_dashi 2013-09-17
  • 打赏
  • 举报
回复
哦 不用了 这个问题解决了
liu_dashi 2013-09-17
  • 打赏
  • 举报
回复
版主你太棒了,你用过这个插件么?现在还有一个问题,就是子部门是同名的情况,在draw出的架构图中只显示一个。 比方说我根节点是“集团”,下面是几个办公室 这样的话 知会显示1个办公室?是不允许名称相同么?
Go 旅城通票 2013-09-17
  • 打赏
  • 举报
回复
ztree的容器是ul,你用select做容器显示不出来的,因为向select中添加的内容为li,不是option 改成ul
liu_dashi 2013-09-17
  • 打赏
  • 举报
回复
@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);
                    }
                }
            });
        }
,这样处理后,并没有出现我想要的树结构数据?不知道这么应用是不是正确?望指点
liu_dashi 2013-09-17
  • 打赏
  • 举报
回复
这个我已经解决了 正在调样式 谢谢
Go 旅城通票 2013-09-17
  • 打赏
  • 举报
回复
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)
});
我的波塞冬 2013-09-17
  • 打赏
  • 举报
回复
只会extjs 不会jquery
Go 旅城通票 2013-09-16
  • 打赏
  • 举报
回复
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',
//async:false,//或者设置为同步的
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 });
}

});
}
}

});

}

//new google.visualization.OrgChart(document.getElementById('chart_div')).draw(data, { allowHtml: true });
//go();
}


放到回调里面,因为ajax没返回的时候都已经执行过下面的new google.visualization.OrgChart(document.getElementById('chart_div')).draw(data, { allowHtml: true });这句了,要么就将ajax改为同步的,不过同步网速慢的时候浏览器会假死
liu_dashi 2013-09-16
  • 打赏
  • 举报
回复
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的值没有子节点数据?不知道这是为什么?
Go 旅城通票 2013-09-13
  • 打赏
  • 举报
回复
chart.draw(data, { allowHtml: true }); go(); 更换位置,都会没有绘图当然没有在dom中生成
liu_dashi 2013-09-13
  • 打赏
  • 举报
回复
走过路过的 行行好 跪谢
liu_dashi 2013-09-13
  • 打赏
  • 举报
回复
没人用过么 再顶!
liu_dashi 2013-09-13
  • 打赏
  • 举报
回复
自己顶 大牛们 给看看哈 跪谢!
liu_dashi 2013-09-13
  • 打赏
  • 举报
回复
哦 果然如此! 那么 想动态加载数据 又要如何来走呢 您知道不

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧