Google 图表:单击节点导航到其他页面 link
Google chart : Navigating to other page on click of the node link
您好,我在 Codeigniter 中使用 google organisation charts 作为 Web 应用程序- PHP/Mysql。我已经从 mysql 数据库加载图表的节点。并且节点中的文本被制作为links。到目前为止一切都很好。但现在我想将 href 添加到 link,这样当用户单击 link 时,它应该导航到详细信息页面,其中显示了特定节点的详细信息。我知道,为了显示细节,应该有一个节点的 Id 来从数据库中获取数据。
所以我的问题是如何将此 ID 添加到 link?
有什么办法吗?谁能帮帮我吗。这是我的代码:
型号:
public function getTreeMembersData()
{
$this->db->select('E1.name AS memname,E2.name AS parentname,E3.name AS spouse');
$this->db->from('tab_members AS E1');
$this->db->join('tab_members AS E2', 'E2.member_id = E1.parent_id','left outer');
$this->db->join('tab_members AS E3', 'E3.parent_id = E1.member_id AND E3.relation_id = 3','left outer');
$this->db->where('E1.relation_id !=', 3);
$query = $this->db->get();
return $query->result();
}
控制器:
public function membertree()
{
if(isset($_SESSION['username']) || isset($_SESSION['userid']))
{
$page['pagename'] = "membertree";
$data['msg'] = $this->session->flashdata('msg');
$this->load->view('header',$page);
$data['treedata'] = $this->Family_model->getTreeMembersData();
$this->load->view('membertree',$data);
$this->load->view('footer');
}
else
{
redirect('Auth/login');
}
}
查看:
<script type="text/javascript">
var url="<?php echo base_url();?>";
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
var data;
var chart;
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addRows([<?php
foreach($treedata as $d)
{
$memname = $d->memname;
$parent = $d->parentname;
$spouse = $d->spouse;
?>
[{v:'<?php echo $memname;?>', f:'<a><?php echo $memname;?><a><div><a><?php echo $spouse;?></a></div>'},'<?php echo $parent; ?>'],
<?php
}
?>]);
var options = {
'width':250,
'height':600};
// 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});
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if(selectedItem) {
var name = data.getValue(selectedItem.row,0);
alert(name);
}
}
}
<div class="box">
<div class="box-body">
<div id="chart_div" class="chart"></div>
</div>
</div>
如果您能够从查询中获取 ID,
您可以将地址作为 href
属性中的 'GET'
参数添加到详细信息页面。
类似...
<a href="http://address.to/details.php?id=<?php echo $id_field;?>"><?php echo $memname;?><a>
如数据行中...
[{v:'<?php echo $memname;?>', f:'<a href="http://address.to/details.php?id=<?php echo $id_field;?>"><?php echo $memname;?><a><div><a><?php echo $spouse;?></a></div>'},'<?php echo $parent; ?>'],
您好,我在 Codeigniter 中使用 google organisation charts 作为 Web 应用程序- PHP/Mysql。我已经从 mysql 数据库加载图表的节点。并且节点中的文本被制作为links。到目前为止一切都很好。但现在我想将 href 添加到 link,这样当用户单击 link 时,它应该导航到详细信息页面,其中显示了特定节点的详细信息。我知道,为了显示细节,应该有一个节点的 Id 来从数据库中获取数据。 所以我的问题是如何将此 ID 添加到 link?
有什么办法吗?谁能帮帮我吗。这是我的代码:
型号:
public function getTreeMembersData()
{
$this->db->select('E1.name AS memname,E2.name AS parentname,E3.name AS spouse');
$this->db->from('tab_members AS E1');
$this->db->join('tab_members AS E2', 'E2.member_id = E1.parent_id','left outer');
$this->db->join('tab_members AS E3', 'E3.parent_id = E1.member_id AND E3.relation_id = 3','left outer');
$this->db->where('E1.relation_id !=', 3);
$query = $this->db->get();
return $query->result();
}
控制器:
public function membertree()
{
if(isset($_SESSION['username']) || isset($_SESSION['userid']))
{
$page['pagename'] = "membertree";
$data['msg'] = $this->session->flashdata('msg');
$this->load->view('header',$page);
$data['treedata'] = $this->Family_model->getTreeMembersData();
$this->load->view('membertree',$data);
$this->load->view('footer');
}
else
{
redirect('Auth/login');
}
}
查看:
<script type="text/javascript">
var url="<?php echo base_url();?>";
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
var data;
var chart;
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addRows([<?php
foreach($treedata as $d)
{
$memname = $d->memname;
$parent = $d->parentname;
$spouse = $d->spouse;
?>
[{v:'<?php echo $memname;?>', f:'<a><?php echo $memname;?><a><div><a><?php echo $spouse;?></a></div>'},'<?php echo $parent; ?>'],
<?php
}
?>]);
var options = {
'width':250,
'height':600};
// 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});
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if(selectedItem) {
var name = data.getValue(selectedItem.row,0);
alert(name);
}
}
}
<div class="box">
<div class="box-body">
<div id="chart_div" class="chart"></div>
</div>
</div>
如果您能够从查询中获取 ID,
您可以将地址作为 href
属性中的 'GET'
参数添加到详细信息页面。
类似...
<a href="http://address.to/details.php?id=<?php echo $id_field;?>"><?php echo $memname;?><a>
如数据行中...
[{v:'<?php echo $memname;?>', f:'<a href="http://address.to/details.php?id=<?php echo $id_field;?>"><?php echo $memname;?><a><div><a><?php echo $spouse;?></a></div>'},'<?php echo $parent; ?>'],