使用 Js 在 table in Laravel blade 中显示动态数据时出现问题

Question

我正在开展一个 Laravel 项目，从后端收集一些数据。数据在hierarchical/tree-like结构中，最高的是asm，然后是usm，然后是ag。每个变量都是 collection 个关联数组，其中每个数组都有一个 唯一 ID 和 collection 个策略 。在视图中，我将其分为 2 列（使用 bootstrap 网格布局），主要是左列 (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>

右栏（Table 正在动态填充策略）

<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>

Answer 1

尝试这样做

//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
  });
});

使用 Js 在 table in Laravel blade 中显示动态数据时出现问题

Problem displaying dynamic data in a table in Laravel blade using Js

javascript

associative-array

html-table

laravel