Проблема выравнивания элементов пользовательского интерфейса с помощью цикла foreach на нескольких массивах в файле Laravel Blade - PullRequest
Новая
       22

Проблема выравнивания элементов пользовательского интерфейса с помощью цикла foreach на нескольких массивах в файле Laravel Blade

0 голосов
/ 24 декабря 2018

Я работаю над приложением Laravel, в котором извлекаю некоторые данные из бэкэнда и сохраняю их в 3 отдельных переменных. Далее я передаю переменные в представление и мне нужно отобразить данные в представлении в виде иерархической / древовидной структурыУровень 1 (массив в переменной с именем asm) является самым высоким, Уровень 2 (массив в переменной usm) находится на уровне 1, Уровень 3 (массив в переменной ag) находится на уровне 2.

Я пытался использоватьцикл foreach на разметке, но он не показывает ожидаемый результат.В основном все данные уровня 1 (показанные динамически) должны быть закрыты, когда пользователь щелкает по уровню 1, соответствующий уровень 2 должен свернуться / открыться, при нажатии на уровне 2 соответствующий уровень 3 должен открыться под ним.

В основноммакет должен выглядеть как макет по этой ссылке:

https://www.bootply.com/DglnYJTSKA

Уровень 1 (хранится в переменной asm) 

array:4 [▼
  0 => array:3 [▼
    "id" => "157"
    "unit_sales" => array:7 [▶]
    "policies" => array:3007 [▶]
  ]
  1 => array:3 [▼
    "id" => "73401"
    "unit_sales" => array:8 [ …8]
    "policies" => array:2226 [ …2226]
  ]
  2 => array:3 [▼
    "id" => "0"
    "unit_sales" => array:1 [ …1]
    "policies" => array:162 [ …162]
  ]
  3 => array:3 [▼
    "id" => "76300"
    "unit_sales" => array:1 [ …1]
    "policies" => array:1 [ …1]
  ]
]

Уровень 2 (хранится в переменной usm) 

array:4 [▼
  0 => array:3 [▼
    "id" => "74696"
    "ag" => array:13 [▶]
    "pol" => array:481 [▶]
  ]
  1 => array:3 [▼
    "id" => "1525"
    "ag" => array:8 [▶]
    "pol" => array:357 [▶]
  ]
  2 => array:3 [▼
    "id" => "47060"
    "ag" => array:1 [▶]
    "pol" => array:124 [▶]
  ]
  3 => array:3 [▼
    "id" => "74695"
    "ag" => array:3 [▶]
    "pol" => array:5 [▶]
  ]
]

Уровень 3 (хранится в переменной ag) 

array:4 [▼
  0 => array:2 [▼
    "ag" => "75**"
    "pol" => array:4 [▶]
  ]
  1 => array:2 [▼
    "ag" => "9***"
    "pol" => array:27 [▶]
  ]
  2 => array:2 [▼
    "ag" => "67***"
    "pol" => array:8 [▶]
  ]
  3 => array:2 [▼
    "ag" => "224"
    "pol" => array:147 [▶]
  ]
]

цикл по каждому элементукоторые я пытаюсь использовать на лезвии 

<div id="MainMenu">
    <div class="list-group panel">
      <!-- Level 1 -->
      @foreach($asm as $a)
       <a href="#demo3" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;"> ASM ID : {{ $a['id'] }} <i class="fa fa-caret-down"></i></a>

          <div class="collapse" id="demo3">
          <!-- Level 2 -->
          @foreach($usm as $u)

        <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1"> USM ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>

        <div class="collapse list-group-submenu" id="SubMenu1">
            <!-- Level 3 -->
           @foreach($ag as $Agt)
            <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1"> Ag: {{ $Agt['ag'] }}<i class="fa fa-caret-down"></i></a>
          @endforeach
          <!-- END level 3-->
        </div>
            @endforeach 
            <!--END level 2-->
          </div>

      @endforeach
      <!-- END level 1-->
    </div> 
</div>

1 Ответ

0 голосов
/ 24 декабря 2018

Это может быть вызвано такими идентификаторами, как #SubMenu1, demo3. Во-первых, проверьте ваш взгляд, чтобы показать, что один уровень целевого идентификатора указывает на другой уровень или нет.Вы можете изменить идентификатор динамически с помощью $loop->iteration в шаблоне, например demo{{$loop->iteration }}

...