[英]Problem displaying dynamic data in a table in Laravel blade using Js
[英]Problem displaying dynamic data in an array in Laravel blade view using Javascript
在Laravel应用程序上工作,在该应用程序中数组中包含一些数据。 数据是关联数组的集合,其中每个数组都有一个标识号和其中的一组策略代码 。 正在获取数据并显示在刀片上。 在视图中,我分为两列(使用引导网格系统) 。 在左列(col-md-4)上遍历该变量并显示可以正常工作的标识号。 在右列中,有一个表格,据此可以根据identity_no的状态显示相应的策略代码。
我想实现一种功能,当用户单击或将鼠标悬停在特定的标识号上时,相应的策略代码应显示在表tbody标记的右列(col-md-8)上。 后续的身份编号应重复相同的操作(应仅在单击或悬停该身份编号后才显示)。
存储在名为asm的变量中的数组集合
array:1 [▼
0 => array:2 [▼
"identity_no" => "71360"
"policy_code" => array:2 [▼
0 => "IL2***********"
1 => "IL2***********"
2 => "IL2***********"
]
]
1 => array:2 [▼
"identity_no" => "68181"
"policy_code" => array:3 [▼
0 => "IL2**********"
1 => "IL2***********"
2 => "IL2***********"
3 => "IL2***********"
]
]
2 => array:2 [▼
"identity_no" => "53983"
"policy_code" => array:4 [▼
0 => "IL2*************"
1 => "IL2*************"
2 => "IL2*************"
3 => "IL2*************"
4 => "IL2*************"
5 => "IL2*************"
]
]
]
视图布局
<div class="row">
<!-- lEFT column -->
<div class="col-md-4">
<div id="MainMenu">
<div class="list-group panel">
<!-- Level 1 -->
@foreach($asm as $a)
<a href="#" class="list-group-item list-group-item-primary" > Identity No: {{ $a['identity_no'] }} </a>
@endforeach
<!-- END level 1-->
</div>
</div>
</div>
<!-- END left column-->
<!-- Right column-->
<div class="col-md-8">
<table id="summary-table">
<thead>
<tr>
<th>Policy Codes</th>
</tr>
</thead>
<tbody>
<tr>
<td> <!-- Add dynamic policy codes--></td>
</tr>
</tbody>
</table>
</div>
尝试这个! 我只知道javascript,所以解决方案在纯javascript和jquery中,我已经将鼠标悬停和click事件合并到了按钮上。 希望这会有所帮助
asm = [{ identity_no: '1', policy_code: "bla bla111111111" }, { identity_no: "2", policy_code: "bla bla2222222" }, { identity_no: "3", policy_code: "bla bla3333" }]; function btns() { var btn = $("<button class='tags' id=" + asm[i].identity_no + ">" + asm[i].identity_no + "</button>"); $(btn).attr("data-search", asm[i].identity_no) $(btn).appendTo("#buttons") } $('#buttons').on('click mouseover', 'button', function() { console.log('click on', $(this).attr('id')); var a = asm.filter(x => x.identity_no === $(this).attr('id')).map(x => x.policy_code); console.log("found!--", a) // show this on other side of col }); for (i = 0; i < asm.length; i++) { btns(); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="buttons"></div>
您可以这样做(在我的本地设备上测试并发现它正常工作):
<script>
var data;
$( document ).ready(function() {
data = {!! json_encode($asm) !!};
});
$(document).on("mouseenter", "a", function() {
var policyCodes = '';
var identityNo = $(this).attr('id');
for(var i = 0; i < data.length; i++) {
if(identityNo == data[i]['identity_no']) {
for(var j = 0;j < data[i]['policy_code'].length;j++){
policyCodes += '<td>' + data[i]['policy_code'][j] + '</td>';
}
}
}
console.log(policyCodes);
$('#summary-table tbody tr').html(policyCodes);
});
</script>
@foreach($asm as $a)
<a href="#" class="list-group-item list-group-item-primary" id="{{ $a['identity_no'] }}" > Identity No: {{ $a['identity_no'] }} </a>
@endforeach
希望能帮助到你 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.