我正在一个Laravel项目中，该项目正在从后端收集一些数据。数据采用分层/树状结构，最高的是 asm ，然后是 usm ，然后是 ag 。每个变量都是关联数组的集合，其中每个数组具有唯一ID和策略集合。在视图中，我将其分为两列（使用引导网格布局），主要是左列（col-md-4）和右列（col-md-8）。
在左列（col-md-4）中，我使用了Bootstrap可折叠菜单来以良好的分层结构显示阵列。在右列（col-md-8）中，一旦用户将鼠标悬停或单击相应的asm，usm或ag的ID，我便无法显示相应的策略。
我尝试使用一些Javascript，但是它没有按预期工作。
//asm variable (level 1)
array:3 [▼
0 => array:3 [▼
"id" => "157"
"unit_sales" => array:7 [▶]
"policies" => array:3144 [▶]
]
1 => array:3 [▼
"id" => "73401"
"unit_sales" => array:1 [ …1]
"policies" => array:8 [ …8]
]
2 => array:3 [▼
"id" => "6511"
"unit_sales" => array:7 [ …7]
"policies" => array:1987 [ …1987]
]
]
//usm variable (level 2)
array:3 [▼
0 => array:3 [▼
"id" => "1525"
"ag" => array:10 [▶]
"policies" => array:374 [▶]
]
1 => array:3 [▼
"id" => "74696"
"ag" => array:12 [▶]
"policies" => array:496 [▶]
]
2 => array:3 [▼
"id" => "47060"
"ag" => array:1 [▶]
"policies" => array:129 [▶]
]
]
//ag variable (level 3)
array:3 [▼
0 => array:2 [▼
"agent_no" => "42184"
"policies" => array:38 [▶]
]
1 => array:2 [▼
"agent_no" => "21718"
"policies" => array:59 [▶]
]
2 => array:2 [▼
"agent_no" => "78863"
"policies" => array:3 [▶]
]
]
左列正在显示下拉列表
<div class="col-md-4">
<!--RSM looged in (See ASM downwards)-->
@if(isset($asm, $usm , $ag))
<div id="MainMenu">
<div class="list-group panel">
<!-- Level 1 -->
@php
$i = 1;
@endphp
@foreach($asm as $a)
<a href="#demo{{$i}}" class="list-group-item list-group-item-primary" data-toggle="collapse" data-parent="#MainMenu" id="{{ $a['id'] }}"> Agency Sales Managers ID : {{ $a['id'] }} </a>
<div class="collapse" id="demo{{$i}}">
<!-- Level 2 -->
@foreach($usm as $u)
<a href="#SubMenu{{$i}}" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#SubMenu1" style="color: red;" id="{{ $u['id'] }}"> Unit Sales Managers ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="SubMenu{{$i}}">
<!-- Level 3 -->
@foreach($ag as $Agt)
<a href="#SubSubMenu1{{$i}}" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1" id="{{ $Agt['agent_no'] }}"> Agents Number : {{ $Agt['agent_no'] }}</a>
@endforeach
<!-- END level 3-->
</div>
@endforeach
<!--END level 2-->
</div>
@php $i++; @endphp
@endforeach
<!-- END level 1-->
</div>
</div>
@endif
</div>
右列（表格正在动态填充策略）
<div class="col-md-8">
<table class="table table-hover mg-b-0 tx-11" id="summary-table">
<thead>
<tr>
<th>POLICIES</th>
</tr>
</thead>
<tbody>
<tr> <!-- Add policies dynamically via JS --></tr>
</tbody>
</table>
</div>
正在使用Javascript代码
<script>
//Returns true if asm , usm and ag variables are set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
$( document ).ready(function() {
var asmData = {!! json_encode($asm) !!};
var usmData = {!! json_encode($usm) !!};
var agData = {!! json_encode($ag) !!};
});
$(document).on("mouseenter", "a", function() {
//Execute ASM
var asmPolicies = '';
//Fetch id of a tag in the DOM
var asmId = $(this).attr('id');
for(var i = 0; i < asmData.length; i++) {
if(asmId == asmData[i]['id']) {
for(var j = 0; j < asmData[i]['policies'].length; j++){
asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
}
}
}
$('#summary-table tbody tr').html(asmPolicies);
//END ASM
//Execute USM
var usmPolicies = '';
//Fetch id of a tag in the DOM
var usmId = $(this).attr('id');
for(var i = 0; i < usmData.length; i++) {
if(usmId == usmData[i]['id']) {
for(var j = 0; j < usmData[i]['policies'].length; j++){
usmPolicies += '<tr><td>' + usmData[i]['policies'][j] + '</td></tr>';
}
}
}
$('#summary-table tbody tr').html(usmPolicies);
//END USM
//Execute agents
var agPolicies = '';
//Fetch id of a tag in the DOM
var agId = $(this).attr('id');
for(var i = 0; i < agData.length; i++) {
if(agId == agData[i]['agent_no']) {
for(var j = 0; j < agData[i]['policies'].length; j++){
agPolicies += '<tr><td>' + agData[i]['policies'][j] + '</td></tr>';
}
}
}
$('#summary-table tbody tr').html(agPolicies);
//END Agents
});
<?php } ?>
</script>
答案 0 :(得分：0)
尝试这样做
//Returns true if asm , usm and ag variables are set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
$( document ).ready(function() {
var asmData = {!! json_encode($asm) !!};
var usmData = {!! json_encode($usm) !!};
var agData = {!! json_encode($ag) !!};
$(document).on("mouseenter", "a", function() {
// here we delete the old data from the table
$('#summary-table tbody tr').html('');
//Execute ASM
var asmPolicies = '';
//Fetch id of a tag in the DOM
var asmId = $(this).attr('id');
for(var i = 0; i < asmData.length; i++) {
if(asmId == asmData[i]['id']) {
for(var j = 0; j < asmData[i]['policies'].length; j++){
asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
}
}
}
// we append asmPolicies Html to the table
$('#summary-table tbody tr').append(asmPolicies);
//END ASM
//Execute USM
var usmPolicies = '';
//Fetch id of a tag in the DOM
var usmId = $(this).attr('id');
for(var i = 0; i < usmData.length; i++) {
if(usmId == usmData[i]['id']) {
for(var j = 0; j < usmData[i]['policies'].length; j++){
usmPolicies += '<tr><td>' + usmData[i]['policies'][j] + '</td></tr>';
}
}
}
// we append usmPolicies to the table
$('#summary-table tbody tr').append(usmPolicies);
//END USM
//Execute agents
var agPolicies = '';
//Fetch id of a tag in the DOM
var agId = $(this).attr('id');
for(var i = 0; i < agData.length; i++) {
if(agId == agData[i]['agent_no']) {
for(var j = 0; j < agData[i]['policies'].length; j++){
agPolicies += '<tr><td>' + agData[i]['policies'][j] + '</td></tr>';
}
}
}
// we append agPoliciesHtml to the table
$('#summary-table tbody tr').append(agPolicies);
//END Agents
});
});