PHP实现点击按钮/链接展示数组值的技术求助

1. 修正模型方法（User_model.php） #

原方法仅返回用户计数，现在需要调整为返回完整的用户ID数组，同时保留计数的获取能力：

function get_user_list($location){
    $this->db->select('user_id');
    $this->db->from('time_location');
    $this->db->where('location', $location);
    $this->db->where('ack', 1);
    return $this->db->get()->result_array(); // 返回包含所有user_id的数组
}

2. 修改控制器逻辑（controller.php） #

调用新的模型方法获取用户列表，计算计数后将其封装为可点击按钮，并把用户ID列表嵌入到按钮的自定义属性中：

$user_list = $this->User_model->get_user_list($location);
$user_count = count($user_list);
// 将用户ID转为逗号分隔的字符串，存入data属性
$user_ids_str = implode(', ', array_column($user_list, 'user_id'));

// 生成带交互的按钮，作为表格的Users列内容
$interactive_count = "<button class='show-user-btn' data-user-ids='{$user_ids_str}'>{$user_count}</button>";
$this->table->add_row($location, $interactive_count);

3. 添加前端交互逻辑（视图文件中引入） #

在页面的脚本区域添加点击事件，实现点击按钮时展示对应位置的用户ID列表：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 给所有用户计数按钮绑定点击事件
    document.querySelectorAll('.show-user-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const locationName = this.parentElement.previousElementSibling.textContent;
            const userIds = this.getAttribute('data-user-ids');
            
            // 用自定义弹窗展示（也可替换为框架模态框）
            const popup = document.createElement('div');
            popup.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 24px;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.15);
                z-index: 9999;
                max-width: 300px;
            `;
            popup.innerHTML = `
                <h3 style="margin-top:0;">${locationName} 用户ID</h3>
                <p>${userIds.replace(/, /g, '<br>')}</p>
                <button onclick="this.parentElement.remove()" style="margin-top:12px;padding:6px 12px;">关闭</button>
            `;
            document.body.appendChild(popup);
        });
    });
});
</script>

可选优化方案 #

如果用户ID数量极大，直接嵌入data属性会导致页面体积过大，可改为AJAX异步加载：

1. 模型新增仅返回计数的方法（保留你原有的get_user_count）
2. 控制器仅渲染计数按钮，按钮携带位置标识
3. 点击按钮时通过AJAX请求后端接口，获取对应位置的用户ID列表后展示

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