个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我是编程新手，我正在使用 GetOrgChart 处理动态组织层次结构图。我想删除java脚本函数中的硬代码值并将我的mysql查询结果数据传递给javascript函数我通过查询从数据库获取数据并将其转换为json格式以在javascript函数中显示。
这是我的代码:
<?php
require ('db.php');
$selectSql = "SELECT
emp.id, emp.employee_parent_id, emp.emp_name,
emp.email,hd.desg_name
FROM
hr_employees emp
LEFT JOIN
hr_employees_designations empd ON emp.id = empd.id
LEFT JOIN
hr_designations hd ON empd.id = hd.id";
$result = mysqli_query($conn, $selectSql);
$arrAssociate = [];
while ($value = mysqli_fetch_assoc($result))
{
$json_array = json_encode($value);
echo $json_array;
//echo '<pre>', print_r($value, 1) , '</pre>';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | Create Your Own Theme 3</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-org-chart rect.get-box {
fill: #ffffff;
stroke: #D9D9D9;
}
.get-org-chart .get-text.get-text-0 {
fill: #262626;
}
.get-org-chart .get-text.get-text-1 {
fill: #262626;
}
.get-org-chart .get-text.get-text-2 {
fill: #788687;
}
.get-green.get-org-chart {
background-color: #f2f2f2;
}
.more-info {
fill: #18879B;
}
.btn path {
fill: #F8F8F8;
stroke: #D9D9D9;
}
.btn {
cursor: pointer;
}
.btn circle {
fill: #555555;
}
.btn line {
stroke-width: 3px;
stroke: #ffffff;
}
</style>
</head>
<body>
<div id="people"></div>
<script type="text/javascript">
getOrgChart.themes.myTheme =
{
size: [330, 260],
toolbarHeight: 46,
textPoints: [
{ x: 20, y: 45, width: 300 },
{ x: 120, y: 100, width: 200 },
{ x: 120, y: 125, width: 200 }
],
// textPointsNoImage: [] NOT IMPLEMENTED,
box: '<rect x="0" y="0" height="260" width="330" rx="10" ry="10"
class="get-box"></rect>'
+ '
<g transform="matrix(0.25,0,0,0.25,123,142)"><path
d="M48.014,42.889l-9.553-
4.776C37.56,37.662,37,36.756,37,35.748v-3.381c0.229-0.28,0.47-
0.599,0.719-0.951 c1.239-1.75,2.232-3.698,2.954-
5.799C42.084,24.97,43,23.575,43,22v-4c0-0.963-0.36-1.896-1-
2.625v-5.319 c0.056-0.55,0.276-3.824-2.092-
6.525C37.854,1.188,34.521,0,30,0s-7.854,1.188-
9.908,3.53C17.724,6.231,17.944,9.506,18,10.056 v5.319c-
0.64,0.729-1,1.662-
};
var orgChart = new getOrgChart(document.getElementById("people"), {
theme: "myTheme",
enableEdit: false,
enableDetailsView: false,
primaryFields: ["Title", "Name", "Email", "Image"],
color: "green",
updatedEvent: function () {
init();
},
dataSource: [
// Want Dynamic data here instead of this hard code values
{ id : 1,
parentId : null,
Name : "Jasper Lepardo",
Title : "CEO",
Email : "jasper@example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-
demos/images/f-11.jpg"
},
{ id : 2,
parentId : 1,
Name : "John Smith",
Title : "Front-endDeveloper",
Email : "john@example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart
demos/images/f-12.jpg"
},
{ id : 3,
parentId : 1,
Name : "Avaa Field",
Title : "Project Manager",
Email : "ava@example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-
14.jpg"
},
{ id : 4,
parentId : 1,
Name : "Ava Field",
Title : "Project Manager",
Email : "ava@example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-
14.jpg" }]
});
function getNodeByClickedBtn(el) {
while (el.parentNode) {
el = el.parentNode;
if (el.getAttribute("data-node-id"))
return el;
}
return null;
}
var init = function () {
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var nodeElement = getNodeByClickedBtn(this);
var action = this.getAttribute("data-action");
var id = nodeElement.getAttribute("data-node-id");
var node = orgChart.nodes[id];
switch (action) {
case "add":
orgChart.insertNode(id);
break;
case "edit":
orgChart.showEditView(id);
break;
case "preview":
orgChart.showDetailsView(id);
break;
}
});
}
}
init();
</script>
</body>
</html>
最佳答案
看看这个。
使用 Laravel( Blade ):
let json = JSON.parse('@json($your_array_here)');
没有框架(您的情况):
let json = JSON.parse('<?=json_encode($your_array_here)?>');
当你在PHP中有一个Array并且需要在JS中使用它时，你有两种实现方式:
但是请注意您的浏览器控制台(Chrome、Firefox)，如果您的 JSON 格式错误，您将会收到警告。
看看 JSON.parse 和 JSON.stringify，理解这些函数也很重要。
并且不要忘记声明开头和结尾的 '，就像我在下面的示例中所做的那样。
希望对您有帮助。
祝你有美好的一天。
关于javascript - GetOrgChart 中的动态数据源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49273066/
28
4
0
我正在尝试使用 getorgchart jquery 插件。我想删除显示在屏幕底部的“GetOrgChart”超链接。我已尝试将其从 getorgchart.js 文件中删除，但它仍然显示。它是主题的
我正在使用 here 中的 getOrgChart 库，我正在尝试打印整个图表，而不仅仅是可见部分。不幸的是，当使用标准库打印功能时，它只会打印出第一部分，而我不知道如何打印整个图表(该图表相当宽，大
我是编程新手，我正在使用 GetOrgChart 处理动态组织层次结构图。我想删除java脚本函数中的硬代码值并将我的mysql查询结果数据传递给javascript函数我通过查询从数据库获取数据并将
我有一个场景，我根据 REST 服务调用的响应将节点添加到根节点。 我希望能够根据节点的“类型”属性分配对象的填充颜色——这是我从 REST 负载分配的。 例如，我有一个包含 4 个地址记录和 3 个
是否可以使用 getorgchart.js 插入节点而不直接扩展节点？我想动态插入一个节点(使用 insertNode 方法)。但该节点应该折叠起来。 在 renderEvent 或 UpdatedE
我最近购买了你们的 gerOrgChart 插件，并且一直在为一些事情而苦苦挣扎。我正在使用自定义主题 1。该主题对我来说非常有用。但是，就我而言，每张卡片的名称标签都很长。我不喜欢使用 '...'
我的需要是垂直显示 OrgChart，发现 getOrgChart 是值得尝试的一个。我从here下载了js文件并按照说明进行操作，但我收到 getOrgChart is not Defined。我做
我正在使用GetOrgChart显示我公司的组织结构图。 但如示例所示，图像是从用户信息的框架/容器“开始”的。 OrgChart | First Look htm
我正在使用 GetOrgChart用于创建组织结构图。 一切都运行顺利，但是，它不允许您折叠其他节点并保持当前节点打开。 请查看JSFiddle例如，我从那里获取了演示。 在他们的 documenta
我正在努力让 getOrgChart 在固定宽度的 iframe 中工作，以便我可以显示组织结构图。该功能确实有效，但是有一件事似乎无法正常工作，那就是scale:auto实际上使组件居中: 这是我使
我正在使用 GetOrgChart 来显示超过 2500 个节点，我面临着很多问题，我在下面提到过。 图表不在中间。 由于在页面加载时它看起来像一条细线，我必须用力按放大按钮才能看到图表。 如果我使用
我正在尝试更新 GetOrgChart 中的元素，为此我正在执行以下操作 HTML JavaScript var oneForm = $("#one"); $("
我正在尝试使用 loadFromJSON 加载 getorgchart，但我收到以下消息:“无法读取未定义的属性‘children’”。这是我的代码: var peopleElement =
我正在尝试让最新版本的 GetOrgChart 在我公司的网站上运行，但他们网站上的最新版本在 Firefox 和 Chrome 中无法正常运行。鼠标滚动和移动不起作用，但在 IE 中可以正常工作。我
我想使用 getorgchart API 创建一个动态图表，但在 jquery 属性中显示数据源时遇到一个问题。我已经在 JSP 中完成了迭代并设置了我想要显示的数据源值，但这不起作用。任何人都可
我在处理组织结构图时注意到我们赞助人的头衔被省略号 chop 了。 有没有办法更改 CSS 或文件以换行？ 我正在使用“夏娃”主题。如果您不熟悉 GetOrgChart，这里是相关代码:
我是一名优秀的程序员,十分优秀！