必须同步修改dom和table.config.cols才能使列标题变更生效,仅调用table.reload()或修改cols无效;推荐在done回调中用jquery更新并手动同步config.cols对应项。

不能靠 table.reload() 或改 table.config.cols 就生效——必须同步操作 DOM 和内部配置,否则排序、导出、点击列头时标题会回退或错乱。
只改单个列标题:用 done 回调改 DOM + 手动同步 config.cols
这是最轻量、最常用的做法,适用于搜索后微调某列文字(比如“分数”→“考评得分”)。
- 必须在
table.render()的done回调里操作,确保<th> 已挂载 <li>用 jQuery 定位最稳:<code>$('th[data-field="score"]').text('考评得分')(推荐),或按索引:$('th').eq(2).text('...') - 紧接着同步更新内部配置:
table.config.cols[0][2].title = '考评得分'(注意:cols[0]是第一组表头,[2]是第 3 列) - 如果新标题变长,建议加一句
table.resize()防止文字被截断 - ⚠️ 如果启用了
autoSort: true,点该列排序图标可能把标题刷回原始值——因为排序逻辑会重读config.cols并重绘<th> <h3>整列结构要变(字段名/模板/宽度都不同):必须 <code>table.destroy()后重新table.render()比如下拉框切换“用户视图”和“订单视图”,字段完全不同,这时不能只改文字,得重建表格实例。
- 先销毁旧实例:
table.destroy('userTable')(不调会内存泄漏、事件重复绑定) - 新
cols必须是完整二维数组,不能只写title;field、width、templet、toolbar等都要带全 - 分页状态不会继承,需手动恢复:
page: { curr: table.cache['userTable']?.page?.curr || 1, limit: 20 } -
where参数也要显式传入,否则搜索条件丢失 - ⚠️
table.reload()传cols会被静默忽略(源码明确跳过),别试
动态改标题后导出 Excel 还是旧名字?
因为
table.exportFile()读的是table.config.cols,不是 DOM。只改<th> 文字,导出时标题不变。 <ul> <li>导出前务必确认 <code>table.config.cols[0][i].title已更新 - 先销毁旧实例:
- 如果用了多级表头(
colspan/rowspan),注意cols是二维嵌套结构,索引要算准 - 导出失败或标题错位,优先检查
field是否和后端返回的 key 完全一致(大小写、下划线都不能错)
最容易被忽略的点:改完标题后没同步 config.cols,结果导出、列筛选、右键隐藏列都还用旧名;或者用了 autoSort 却没意识到点击排序会触发重绘并覆盖你的 DOM 修改。











