layui/docs/table/detail/demo.md

综合演示 🔥

  {{- d.include("/table/examples/demo.md") }}
  

静态表格

静态表格是指内容已经存在于页面中的 <table class="layui-table"> 元素，且可通过一些特定属性设定不同风格。

  {{- d.include("/table/examples/static.md") }}
  

模板配置渲染

在上文「综合演示」中，是通过组件核心方法完成的渲染。除此，还可以在模板上直接配置相关属性，让其自动完成渲染。

  {{- d.include("/table/examples/autoRender.md") }}
  

静态表格转换

  {{- d.include("/table/examples/init.md") }}
  

已知数据渲染

  {{- d.include("/table/examples/data.md") }}
  

自定义模板

  {{- d.include("/table/examples/templet.md") }}
  

自定义样式 ^2.7+

  {{- d.include("/table/examples/css.md") }}
  

自定义分页

  {{- d.include("/table/examples/page.md") }}
  

外部搜索

  {{- d.include("/table/examples/search.md") }}
  

编辑的权限控制 ^2.7+

以下演示一个根据返回数据中某个字段来判断是否开启该行的编辑，单击对应行可进入单元格编辑。

  {{- d.include("/table/examples/editable.md") }}
  

实现多样化编辑

  {{- d.include("/table/examples/editModes.md") }}
  

转换数据格式

  {{- d.include("/table/examples/parse.md") }}
  

筛选列记忆功能

即点击当前表格右上角筛选图标后，对表头进行显示隐藏勾选，再刷新页面依然保留当前筛选状态。

  {{- d.include("/table/examples/filter.md") }}
  

选中行操作

点击行任意处，通过行事件中执行相关选中方法，实现对整行的状态选中。如下以「单选」行为例：

  {{- d.include("/table/examples/setRowChecked.md") }}
  

多级表头

  {{- d.include("/table/examples/theads.md") }}
  

更多示例

• 🎉 不定期分享在 Gitee Issues