如何分离JSON结果调用不同模态函数并按团队ID获取成员

看起来你已经在Controller里做了大部分准备工作——你已经把每个团队的ID、名称，甚至预加载了对应成员都塞进$cabang数组里传给视图了。下面分两种常见场景给你具体实现方案：

场景1：直接用后台预加载的成员数据（无需额外请求） #

这种方式最直接，因为你已经在后台把所有团队的成员都查询好了，视图里直接用就行：

在你的视图文件team_memb_creation.php中，先渲染团队名称表格，再给每个团队绑定点击事件，点击时把预存的成员数据展示到模态框里：

<!-- 准备成员查看模态框 -->
<div class="modal fade" id="teamMembersModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTeamTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ul id="memberList" class="list-group"></ul>
      </div>
    </div>
  </div>
</div>

<!-- 渲染团队名称表格 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>团队名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($team_name as $team): ?>
    <tr>
      <td><?= htmlspecialchars($team['team_name']) ?></td>
      <td>
        <button class="btn btn-sm btn-primary" 
                onclick="openMemberModal('<?= $team['team_id'] ?>', '<?= htmlspecialchars($team['team_name']) ?>', <?= json_encode($team['team_members']->result()) ?>)">
          查看成员
        </button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<script>
function openMemberModal(teamId, teamName, members) {
  // 设置模态框标题
  document.getElementById('modalTeamTitle').textContent = teamName;
  // 清空旧的成员列表
  const memberList = document.getElementById('memberList');
  memberList.innerHTML = '';

  // 渲染成员数据（记得替换成你实际的成员字段，比如staff_name）
  if (members.length === 0) {
    memberList.innerHTML = '<li class="list-group-item">该团队暂无成员</li>';
  } else {
    members.forEach(member => {
      const listItem = document.createElement('li');
      listItem.className = 'list-group-item';
      listItem.textContent = member.staff_name; // 替换为你的成员表字段
      memberList.appendChild(listItem);
    });
  }

  // 显示模态框
  $('#teamMembersModal').modal('show');
}
</script>

场景2：通过AJAX动态请求成员数据（点击时再查询后端） #

如果你不想在后台预加载所有成员，而是希望点击团队名称时再通过team_id请求后端获取最新数据，可以这样调整：

第一步：在Controller新增成员查询接口 #

public function get_team_member_by_id() {
  // 获取前端传入的team_id
  $team_id = $this->input->get('team_id');
  // 调用模型查询对应成员
  $members = $this->mastertable_model->get_team_member($team_id);
  // 返回JSON格式结果
  header('Content-Type: application/json');
  echo json_encode($members->result());
}

第二步：调整视图，用AJAX请求数据 #

<!-- 模态框结构和之前一致 -->
<div class="modal fade" id="teamMembersModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTeamTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="loading" style="display:none;" class="text-center">加载中...</div>
        <ul id="memberList" class="list-group"></ul>
      </div>
    </div>
  </div>
</div>

<!-- 团队表格 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>团队名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($team_name as $team): ?>
    <tr>
      <td><?= htmlspecialchars($team['team_name']) ?></td>
      <td>
        <button class="btn btn-sm btn-primary" 
                onclick="fetchTeamMembers('<?= $team['team_id'] ?>', '<?= htmlspecialchars($team['team_name']) ?>')">
          查看成员
        </button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<script>
function fetchTeamMembers(teamId, teamName) {
  const modalTitle = document.getElementById('modalTeamTitle');
  const loading = document.getElementById('loading');
  const memberList = document.getElementById('memberList');

  // 初始化模态框状态
  modalTitle.textContent = teamName;
  loading.style.display = 'block';
  memberList.innerHTML = '';

  // 发送AJAX请求（替换成你的Controller路径）
  fetch('<?= base_url('你的控制器名/get_team_member_by_id') ?>?team_id=' + teamId)
    .then(response => response.json())
    .then(members => {
      loading.style.display = 'none';
      // 渲染成员列表
      if (members.length === 0) {
        memberList.innerHTML = '<li class="list-group-item">该团队暂无成员</li>';
      } else {
        members.forEach(member => {
          const listItem = document.createElement('li');
          listItem.className = 'list-group-item';
          listItem.textContent = member.staff_name; // 替换为你的成员表字段
          memberList.appendChild(listItem);
        });
      }
      $('#teamMembersModal').modal('show');
    })
    .catch(error => {
      loading.style.display = 'none';
      memberList.innerHTML = '<li class="list-group-item text-danger">加载成员失败，请稍后重试</li>';
      $('#teamMembersModal').modal('show');
      console.error('请求出错:', error);
    });
}
</script>

注意事项 #

• 把代码里的你的控制器名替换成你实际的Controller类名
• 成员字段（比如member.staff_name）要根据你的数据库表结构调整，确保和实际字段一致
• 如果你的项目用jQuery的$.ajax代替fetch，写法逻辑是一样的，根据技术栈选择即可

内容的提问来源于stack exchange，提问作者sethu