Layui如何实现在表格中点击头像后直接弹出该用户的名片卡片-Layui教程-PHP中文网

表格头像列需在templet中添加lay-event="showCard"，再通过table.on('tool(表ID)', callback)监听并调用layer.open渲染名片弹窗，数据统一从obj.data安全获取，避免内联onclick和XSS风险。

表格头像列如何绑定点击事件并触发名片弹窗

直接在 layui.table 的 cols 配置中用 templet 渲染带 onclick 的头像 html 即可，但要注意事件委托问题——表格重绘后原生 onclick 会失效。必须用 layui.table.on('tool') 监听自定义工具栏事件，或改用 lay-event 属性配合事件委托。

推荐做法：在头像列模板里写 lay-event="showCard"，然后统一监听：

table.on('tool(userTable)', function(obj){
  if(obj.event === 'showCard'){
    const data = obj.data;
    layer.open({
      title: '用户名片',
      content: buildCardHtml(data), // 自行拼接名片 DOM
      area: ['320px', '400px']
    });
  }
});

名片卡片 HTML 结构怎么写才适配 layer 弹窗

layer 默认把 content 当字符串渲染，所以得手动拼接结构。别用复杂组件（如 layui.card），layer 弹窗不自动执行其中的 JS 或样式初始化。重点是控制内边距、头像圆角、信息对齐和响应式断行。

常见错误：直接塞一个 <div class="layui-card"> 进去，结果样式不生效、头像拉伸、手机号换行错乱。 <ul> <li>头像用 <code><img src="" class="layui-nav-img" style="max-width:90%"> 最稳，复用 layui 原生样式

姓名用 <h3 style="margin:10px 0 5px"></h3>，避免默认 h3 外边距过大

关键字段（如部门、职位）加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防溢出

手机号等长文本建议包裹 <span style="word-break:break-all"></span>

如何从表格数据安全提取用户 ID 并传给名片接口

千万别在 templet 里直接拼接 data.id 到 onclick="showCard('+data.id+')" —— XSS 风险高，且引号嵌套极易报错。所有数据都应走 obj.data 上下文获取。

如果名片需实时加载（比如含最新动态），应在 layer.open 的 success 回调里发请求，用 obj.data.id 作为参数：

layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。

下载

layer.open({
  content: '<div>加载中...</div>',
  success: function(layero){
    $.get('/api/user/card?id=' + obj.data.id, function(res){
      $(layero).find('.layui-layer-content').html(buildCardHtml(res.data));
    });
  }
});

注意：obj.data 是当前行原始数据，字段名必须和 table.render() 的 cols 中定义的一致，比如后端返回 user_id，但你配置了 field: 'id'，那这里就只能用 obj.data.id。