表格 · table-kuoqiui 引擎表格
table table-kuoqiui 是「引擎表格」:ui.dev.js 的 syncTable() 自动初始化(handle kqinittablekuoqiui)——圆角 0.5rem、表头毛玻璃 / 主色描边、偶行 12% / hover 22% 主色底;配 data-totalcount / data-pagecount 后在 .card.card-table .card-foot 自动生成分页条。
表格家族
索引
base
simple
toggle
stretch
line
kuoqiui
kuoqiui-head
kuoqiui-pager
kuoqiui-checkbox
sticky
cell
controller
pager
print
引擎表格
引擎表格 · 自动分页
| 编号 | 商品 | 价格 | 状态 |
|---|---|---|---|
| 1 | 引擎表格示例 | 99.00 | 上架 |
| 2 | 毛玻璃表头 | 128.00 | 上架 |
| 3 | 偶行主色底 | 66.00 | 下架 |
<div class="card card-table">
<div class="card-head">引擎表格 · 自动分页</div>
<div class="card-body">
<table class="table table-kuoqiui" data-index="id" data-totalcount="120" data-pagecount="12">
<thead><tr><th>编号</th><th>商品</th></tr></thead>
<tbody><tr><td>1</td><td>引擎表格示例</td></tr></tbody>
</table>
</div>
<div class="card-foot"></div>
</div>
数据属性
data-index="id" <!-- 主键名,多选用 -->
data-totalcount="120" <!-- 总条数,计算最大页 -->
data-pagecount="12" <!-- 每页条数 -->
data-pagenow="1" <!-- 当前页 -->
data-apiurl="..." <!-- 刷新接口;缺省用当前路径 -->
提示: 表头排序图标、分页条、多选框分别见 kuoqiui-head / kuoqiui-pager / kuoqiui-checkbox 三篇。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页