Как я могу динамически генерировать таблицу, используя данные из моей базы данных? - PullRequest
Новая
       6

Как я могу динамически генерировать таблицу, используя данные из моей базы данных?

0 голосов
/ 12 ноября 2018

Я очень новичок в этом, поэтому будьте добры. У меня есть таблица «пользователи» в моей базе данных, и каждый пользователь является частью команды. Я пытался отобразить всех пользователей в разных таблицах на основе названия их команды. Это код в моем UserService: 

    public List<User> getUsersFromFirstTeam() {
    List<User> usersFromFirstTeam = userRepository.findByTeam(FIRST_TEAM);
    return usersFromFirstTeam;
}

public List<User> getUsersFromSecondTeam() {
    List<User> usersFromSecondTeam = userRepository.findByTeam(SECOND_TEAM);
    return usersFromSecondTeam;
}

Это код в моем UserController: 

@Autowired
private UserService userService;

@GetMapping(value = "/admin/usermanagement")
public ModelAndView userManagement(Model firstTeamModel, Model secondTeamModel) {
    ModelAndView modelAndView = new ModelAndView();
    firstTeamModel.addAttribute("firstTeamUsers", userService.getUsersFromFirstTeam());
    secondTeamModel.addAttribute("secondTeamUsers", userService.getUsersFromSecondTeam());
    modelAndView.setViewName("userManagement");
    return modelAndView;
}

И, наконец, это моя страница .jsp, которая отображается: 

<body>
<div class = "tab" style="width: 250px">
<button class ="tablinks" onclick = "openTable(event, 'FirstTeam')">First 
Team</button>
<button class ="tablinks" onclick = "openTable(event, 'SecondTeam')">Second
Team</button>
</div>
<div id="FirstTeam" class="tabcontent">
<h3>First team members</h3>
<table class="table">
      <thead>
        <tr>
          <th>Username</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>

        </tr>
      </thead>
      <tbody>
              <c:forEach  items="${firstTeamUsers}" var ="user">
              <tr>
                <td>${user.username}</td>
                <td>${user.firstName}</td>
                <td>${user.lastName}</td>
                <td>${user.email}</td>
              </tr>
              </c:forEach>
      </tbody>
    </table>
</div>

<div id="SecondTeam" class="tabcontent">
<h3>Secondteam members</h3>
<table class="table">
        <thead>
          <tr>
            <th>Username</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>

          </tr>
        </thead>
        <tbody>
                <c:forEach  items="${secondTeamUsers}" var ="user">
                <tr>
                  <td>${user.username}</td>
                  <td>${user.firstName}</td>
                  <td>${user.lastName}</td>
                  <td>${user.email}</td>
                </tr>
                </c:forEach>
        </tbody>
      </table>
</div>

</body>

Итак, этот код работает и делает именно то, что я хочу. Он создает две вкладки «Первая команда» и «Вторая команда», и когда я нажимаю на каждую вкладку, он отображает таблицу с отсортированными пользователями по названию команды. Моя проблема в том, что я хочу сделать все это без жесткого кодирования названия команды и динамического генерирования элементов div, чтобы не имело значения, сколько команд будет в будущем или как их зовут. Есть идеи, как мне этого добиться? Заранее спасибо за ваше время и помощь!

1 Ответ

0 голосов
/ 12 ноября 2018

Создайте карту в вашем контроллере и добавьте ее в модель: 

@GetMapping(value = "/admin/usermanagement")
public ModelAndView userManagement() {
    ModelAndView modelAndView = new ModelAndView();

    Map<String, List<User>> usersMap = new LinkedHashMap<>();
    usersMap.put("First Team", userService.getUsersForTeam(FIRST_TEAM));
    usersMap.put("Second Team", userService.getUsersForTeam(SECOND_TEAM));
    modelAndView.add("usersMap", usersMap)

    modelAndView.setViewName("userManagement");

   return modelAndView;
}

В JSP вы можете перебирать записи Map, что-то вроде: 

<c:forEach items="${usersMap}" var="entry">
    <div id="${entry.key}" class="tabcontent">
    <h3>${entry.key} Members</h3>
    <table class="table">
          <thead>
            <tr>
              <th>Username</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Email</th>

            </tr>
          </thead>
          <tbody>
              <c:forEach items="${entry.value}" var ="user">
                  <tr>
                    <td>${user.username}</td>
                    <td>${user.firstName}</td>
                    <td>${user.lastName}</td>
                    <td>${user.email}</td>
                  </tr>
              </c:forEach>
          </tbody>
        </table>
    </div>
</c:forEach>

Вам все равно нужно изменить код контроллера для каждого нового типа, чтобы вы могли очистить его, динамически выбирая список команд, чтобы он выглядел примерно так, как показано ниже. Любая новая команда в базе данных должна автоматически отражаться в представлении без дальнейшего изменения кода. 

ModelAndView modelAndView = new ModelAndView();

Map<String, List<User>> usersMap = new LinkedHashMap<>();
List<String> teamNames = //db lookup on distinct team names

for(String name : teamNames){
    usersMap.put(name, userService.getUsersForTeam(name));
}

modelAndView.add("usersMap", usersMap);
...