Layui如何实现在表格顶部的工具栏添加自定义HTML-Layui教程-PHP中文网

Layui表格toolbar必须用script模板语法定义，不能直接写HTML字符串；需通过toolbar:'#id'引用，且lay-filter、lay-event与table.on事件三者严格匹配才能生效。

toolbar 配置必须用 script 模板，不能写纯 HTML 字符串

直接写 toolbar: '<button>导出</button>' 是无效的——layui 不会解析其中的 html，更不会绑定事件或初始化按钮样式。它只会把整段字符串当文本渲染出来，图标、class、lay-event 全部失效。

正确做法是提前在页面中声明一个 <script type="text/html" id="myToolbar"></script> 模块，然后在 table.render() 中引用它的 ID：

toolbar 值设为 '#myToolbar'（开头必须带 #）
<script></script> 标签必须放在内，且在表格初始化之前已存在
ID 名严格区分大小写，myToolbar 和 mytoolbar 是两个不同模板
模板内可自由使用 <i class="layui-icon"></i>，Layui 渲染时会真正编译执行

监听 toolbar 点击事件必须三者对齐

按钮渲染出来了，但点下去没反应？大概率是 lay-filter、lay-event、table.on() 三者没对上。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<table lay-filter="userTable"> → 表格容器上的 <code>lay-filter 值
table.on('toolbar(userTable)', function(obj){...}) → 监听时括号里的 filter 必须完全一致
<button lay-event="export"></button> → 按钮上的 lay-event 值，只能是合法 JS 标识符（不能含空格、中文、短横线）
回调中通过 obj.event === 'export' 判断点击的是哪个按钮

想在 toolbar 按钮里操作选中行？得主动查，不能靠 `this`

toolbar 是表格级操作，和具体哪一行无关。点击后 this 指向按钮 DOM，obj.data 是 undefined，拿不到任何行数据。

要获取当前选中的行，必须调用 table.checkStatus('userTable')（传入你的 lay-filter 值）
返回对象的 data 字段才是选中行数组，obj.data 在 toolbar 回调里永远不存在
如果操作目标是“某一行”，比如编辑单条记录，这个按钮就不该放 toolbar，而应放进列配置的 toolbar: '#rowBar' 里
列级 toolbar 的回调才有 obj.data，且是当前被点击行的完整数据

图标不显示？先查字体文件是否加载失败

按钮能点、有 hover 效果，但 <i class="layui-icon"></i> 位置空白——这不是代码写错了，而是 layui.css 引用的 iconfont 文件 404 了。

打开浏览器开发者工具 → Network 面板 → 过滤 icon 或 font
看是否有 iconfont.eot、iconfont.woff2 等请求返回 404
常见原因是项目结构调整后，layui/css/layui.css 里写的相对路径（如 url("../font/iconfont.eot")）失效
临时验证方式：在控制台执行 getComputedStyle(document.querySelector('.layui-icon')).fontFamily，返回 " layui-icon" 才正常；若为空或报错，说明字体未加载