init
This commit is contained in:
201
public/frontend/layui-main/docs/table/detail/demo.md
Executable file
201
public/frontend/layui-main/docs/table/detail/demo.md
Executable file
@@ -0,0 +1,201 @@
|
||||
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">综合演示 🔥</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe', id: 'table-demo-1', text: {preview: '综合演示 🔥'}, style: 'height: 506px;', layout: ['preview', 'code'], tools: ['full','window'], done: function(obj){
|
||||
setTimeout(function(){
|
||||
layer.tipsIndex = layer.tips(
|
||||
'点击该图标可最大化查看效果',
|
||||
layui.$('#table-demo-1 .layui-icon-screen-full'), {
|
||||
tips: 4,
|
||||
time: 30*1000
|
||||
})
|
||||
});
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layer.close(layer.tipsIndex);
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/demo.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-static" lay-toc="{level: 2}" class="ws-bold">静态表格</h3>
|
||||
|
||||
静态表格是指内容已经存在于页面中的 `<table class="layui-table">` 元素，且可通过一些*特定属性*设定不同风格。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, style: 'height: 335px; overflow: auto;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/static.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-auto-render" lay-toc="{level: 2}" class="ws-bold">模板配置渲染</h3>
|
||||
|
||||
在上文「[综合演示](#examples)」中，是通过组件核心方法完成的渲染。除此，还可以在模板上直接配置相关属性，让其自动完成渲染。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
layui.table.init(obj.container.children('table'));
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-init');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/autoRender.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-init" lay-toc="{level: 2}" class="ws-bold">静态表格转换</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/init.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-data" lay-toc="{level: 2}" class="ws-bold">已知数据渲染</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], ID: 'ID-table-demo-data', tools: ['full'], done: function(obj){
|
||||
layui.table.resize(this.ID);
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize(this.ID);
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/data.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-templet" lay-toc="{level: 2, hot: true}" class="ws-bold">自定义模板</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-templet', done: function(obj){
|
||||
layui.table.resize(this.ID);
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize(this.ID);
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/templet.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-css" lay-toc="{level: 2, hot: true}" class="ws-bold">自定义样式 <sup>2.7+</sup></h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 538px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/css.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-page" lay-toc="{level: 2}" class="ws-bold">自定义分页</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-page', done: function(obj){
|
||||
layui.table.resize(this.ID);
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize(this.ID);
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/page.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-search" lay-toc="{level: 2, hot: true}" class="ws-bold">外部搜索</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-search', done: function(obj){
|
||||
obj.render();
|
||||
layui.table.resize(this.ID);
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize(this.ID);
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/search.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-editable" lay-toc="{level: 2, hot: true}" class="ws-bold">编辑的权限控制 <sup>2.7+</sup></h3>
|
||||
|
||||
以下演示一个根据返回数据中某个字段来判断是否开启该行的编辑，*单击对应行*可进入单元格编辑。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/editable.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-editmodes" lay-toc="{level: 2, hot: true}" class="ws-bold">实现多样化编辑</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-editmodes');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/editModes.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-parse" lay-toc="{level: 2, hot: true}" class="ws-bold">转换数据格式</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-parse');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/parse.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-filter" lay-toc="{level: 2}" class="ws-bold">筛选列记忆功能</h3>
|
||||
|
||||
即点击当前表格右上角筛选图标后，对表头进行显示隐藏勾选，再刷新页面依然保留当前筛选状态。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-filter');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/filter.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-setRowChecked" lay-toc="{level: 2, hot: true}" class="ws-bold">选中行操作</h3>
|
||||
|
||||
点击行任意处，通过行事件中执行相关选中方法，实现对整行的状态选中。*如下以「单选」行为例：*
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-setRowChecked');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/setRowChecked.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-theads" lay-toc="{level: 2}" class="ws-bold">多级表头</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
layui.table.init(obj.container.children('table'));
|
||||
}, toolsEvent: function(oi, type){
|
||||
if(type === 'full'){
|
||||
layui.table.resize('ID-table-demo-theads-1');
|
||||
layui.table.resize('ID-table-demo-theads-2');
|
||||
}
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/table/examples/theads.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="more-examples" class="ws-anchor ws-bold">更多示例</h3>
|
||||
|
||||
> - 🎉 不定期分享在 [Gitee Issues](https://gitee.com/layui/layui/issues)
|
||||
181
public/frontend/layui-main/docs/table/detail/options.ajax.md
Executable file
181
public/frontend/layui-main/docs/table/detail/options.ajax.md
Executable file
@@ -0,0 +1,181 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>url</td>
|
||||
<td>
|
||||
|
||||
发送异步请求的 URL。默认会自动传递两个参数：`?page=1&limit=30`（该参数可通过 `request` 属性自定义）
|
||||
<br>`page` 代表当前页码、`limit` 代表每页数据条数。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>method</td>
|
||||
<td>
|
||||
|
||||
请求的方式，默认：`get`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>where</td>
|
||||
<td>
|
||||
|
||||
请求的其他参数。如：`where: {token: 'sasasas', id: 123}`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headers</td>
|
||||
<td>
|
||||
|
||||
请求的数据头参数。如：`headers: {token: 'sasasas'}`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contentType</td>
|
||||
<td>
|
||||
|
||||
请求的内容编码类型。若要发送 `json` 内容，可设置：<br>
|
||||
`contentType: 'application/json'`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>dataType <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
请求的数据类型，默认 `json`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>jsonpCallback <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
设置当 `dataType: 'jsonp'` 时的回调函数名。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>request</td>
|
||||
<td>
|
||||
|
||||
用于对默认的分页相关的请求参数 `page,limit` 重新设定名称。如：
|
||||
|
||||
```
|
||||
request: {
|
||||
pageName: 'curr', // 页码的参数名称，默认：page
|
||||
limitName: 'nums' // 每页数据条数的参数名，默认：limit
|
||||
}
|
||||
```
|
||||
|
||||
那么请求数据时的参数将会变为 `?curr=1&nums=30`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[**parseData**](#options.parseData)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="ws-anchor" id="options.parseData">
|
||||
数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式：
|
||||
</div>
|
||||
|
||||
```
|
||||
{
|
||||
"code": 0,
|
||||
"msg": "",
|
||||
"count": 1000,
|
||||
"data": [{}, {}]
|
||||
}
|
||||
```
|
||||
|
||||
很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：
|
||||
|
||||
```
|
||||
{
|
||||
"status": 0,
|
||||
"message": "",
|
||||
"total": 180,
|
||||
"data": {
|
||||
"item": [{}, {}]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
此时我们可以借助 `parseData` 回调函数将数据解析并转换为默认规定的格式：
|
||||
|
||||
```
|
||||
table.render({
|
||||
elem: '',
|
||||
url: '',
|
||||
parseData: function(res){ // res 即为原始返回的数据
|
||||
return {
|
||||
"code": res.status, // 解析接口状态
|
||||
"msg": res.message, // 解析提示文本
|
||||
"count": res.total, // 解析数据长度
|
||||
"data": res.data.item // 解析数据列表
|
||||
};
|
||||
},
|
||||
// … //其他参数
|
||||
});
|
||||
```
|
||||
|
||||
该函数非常实用
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4 id="data.reserved" class="ws-anchor ws-bold">返回数据中的特定字段</h4>
|
||||
|
||||
在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。
|
||||
|
||||
| 特定字段名 | 描述 | 读写状态 |
|
||||
| --- | --- | --- |
|
||||
| LAY_CHECKED | 当前行的选中状态 | 可读可写 |
|
||||
| LAY_DISABLED | 当前行是否禁止选择 | 可读可写 |
|
||||
| LAY_INDEX | 当前行下标。每页重新从零开始计算 | 只读 |
|
||||
| LAY_NUM | 当前行序号 | 只读 |
|
||||
| LAY_COL | 当前列的表头属性配置项 | 只读 |
|
||||
|
||||
示例一: 在返回的数据中设置特定字段：
|
||||
|
||||
```
|
||||
{
|
||||
"code": 0,
|
||||
"count": 1000,
|
||||
"data": [{},{
|
||||
LAY_DISABLED: true
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
示例二: 在模板中读取特定字段示例：
|
||||
|
||||
{{!
|
||||
```
|
||||
<script type="text/html" id="TPL-demo-xxx">
|
||||
当前行下标: {{= d.LAY_INDEX }}
|
||||
当前列的某个表头属性: {{= d.LAY_COL.field }}
|
||||
</script>
|
||||
```
|
||||
!}}
|
||||
485
public/frontend/layui-main/docs/table/detail/options.cols.md
Executable file
485
public/frontend/layui-main/docs/table/detail/options.cols.md
Executable file
@@ -0,0 +1,485 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>field</td>
|
||||
<td>
|
||||
|
||||
设置字段名。通常是表格数据列的唯一标识
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>
|
||||
|
||||
设置列的标题。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fieldTitle <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置列的字段标题。该属性在筛选列和导出场景中优先级高于 `title` 属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>
|
||||
|
||||
设置列宽。若不填写，则自动分配；若填写，则支持值为：*数字、百分比*。如：
|
||||
`width: 200` / `width: '30%'`
|
||||
|
||||
</td>
|
||||
<td>number/string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>minWidth</td>
|
||||
<td>
|
||||
|
||||
设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的 `cellMinWidth`
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`60`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxWidth <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置当前列的最大宽度。其优先级高于基础属性中的 `cellMaxWidth`
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandedWidth <sup>2.8.15+</sup></td>
|
||||
<td>
|
||||
|
||||
设置单元格被展开后的宽度。若设置的值的小于当前列宽，则展开后的列宽保持不变。注：当 `expandedMode` 属性为默认值时有效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandedMode <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
用于设置所有单元格默认展开方式，可选值有：
|
||||
|
||||
- `tips` 悬浮展开方式
|
||||
- `default` 多行展开方式（默认）
|
||||
|
||||
优先级高于 `cellExpandedMode` 基础属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>
|
||||
|
||||
设置列类型。可选值有：
|
||||
- `normal` 常规列，无需设定
|
||||
- `checkbox` 复选框列
|
||||
- `radio` 单选框列
|
||||
- `numbers` 序号列
|
||||
- `space` 空列
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`normal`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LAY_CHECKED</td>
|
||||
<td>
|
||||
|
||||
设置全选状态，当列设置 `type: 'checkbox'` 时才有效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fixed</td>
|
||||
<td>
|
||||
|
||||
设置固定列，即不跟随 table 横向滚动条而滚动。可选值有：
|
||||
- `left` 固定在左
|
||||
- `right` 固定在右
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[templet](#cols.templet)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div class="ws-anchor" id="cols.templet">
|
||||
设置列的自定义模板，核心属性。模板遵循 <a href="../laytpl/" target="_blank">laytpl</a> 组件语法。
|
||||
</div>
|
||||
|
||||
`templet` 提供了三种使用方式，选择任一用法即可：
|
||||
|
||||
- **设置模版选择器**
|
||||
|
||||
{{!
|
||||
```
|
||||
<script type="text/html" id="TPL-demo-title">
|
||||
<a href="/detail/{{= d.id }}" class="layui-table-link">
|
||||
{{= d.title }}
|
||||
</a>
|
||||
</script>
|
||||
|
||||
<!--
|
||||
模板中的 `d` 不仅包含当前行数据，还包含特定字段，如：
|
||||
{{= d.LAY_INDEX }} {{= d.LAY_COL }} 等
|
||||
-->
|
||||
```
|
||||
|
||||
```
|
||||
table.render({
|
||||
cols: [[
|
||||
{field: 'title', templet: '#TPL-demo-title'}
|
||||
// …
|
||||
]],
|
||||
// …
|
||||
});
|
||||
```
|
||||
!}}
|
||||
|
||||
- **设置模板内容**
|
||||
|
||||
该方式必须在内容中包裹一层 `<div></div>`，否则无法读取模板。
|
||||
|
||||
{{!
|
||||
```
|
||||
table.render({
|
||||
cols: [[
|
||||
{field: 'title', templet: '<div><a href="/detail/{{= d.id }}" class="layui-table-link">{{= d.title }}</a></div>'}
|
||||
// …
|
||||
]],
|
||||
// …
|
||||
});
|
||||
```
|
||||
!}}
|
||||
|
||||
- **设置模板函数**
|
||||
|
||||
函数将返回一个 `d` 参数，包含当前行数据及特定的额外字段。
|
||||
```
|
||||
table.render({
|
||||
cols: [[
|
||||
{field: 'title', templet: function(d){
|
||||
console.log(d); // 得到当前行数据
|
||||
console.log(this); // 得到表头当前列配置项
|
||||
console.log(d.LAY_NUM); // 得到序号。或其他特定字段
|
||||
|
||||
// 返回模板内容
|
||||
return '<a href="/detail/'+ d.id +'" class="layui-table-link">'+ d.title +'</a>'
|
||||
}}
|
||||
// …
|
||||
]],
|
||||
// …
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportTemplet <sup>2.6.9+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
<div class="ws-anchor" id="cols.exportTemplet">
|
||||
|
||||
设置表格导出时的模板，用法同 `templet` 属性。当 `templet` 指向的模板内容较复杂时建议使用，如下以模板存在 `select` 元素为例：
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
exportTemplet: function(d, obj){
|
||||
// 当前 td
|
||||
var td = obj.td(this.field);
|
||||
// 返回 select 选中值
|
||||
return td.find('select').val();
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[totalRow](#cols.totalRow)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div class="ws-anchor" id="cols.totalRow">
|
||||
是否开启该列的自动合计功能，默认不开启。
|
||||
</div>
|
||||
|
||||
- **采用前端合计**
|
||||
|
||||
{{!
|
||||
```
|
||||
// 开启并输出合计行前端合计结果
|
||||
totalRow: true
|
||||
|
||||
// 开启并输出合计行自定义模板。此处 TOTAL_NUMS 即为合计结果的固定特定字段
|
||||
totalRow: '{{= d.TOTAL_NUMS }} 单位'
|
||||
// 取整或其他运算
|
||||
totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
|
||||
```
|
||||
!}}
|
||||
|
||||
注意：*合计行模板仅支持字符写法，不支持函数写法，请勿与 `templet` 用法混淆。*
|
||||
|
||||
- **采用后端合计**
|
||||
|
||||
前端合计的数据有限，因此常需要后端直接返回合计结果，组件将优先读取。数据格式如下：
|
||||
|
||||
```
|
||||
{
|
||||
"code": 0,
|
||||
"totalRow": {
|
||||
"score": "777",
|
||||
"experience": "999"
|
||||
},
|
||||
"data": [{}, {}],
|
||||
"msg": "",
|
||||
"count": 1000
|
||||
}
|
||||
```
|
||||
|
||||
在合计行自定义模板中输出后端返回的合计数据
|
||||
|
||||
{{!
|
||||
```
|
||||
// 获取后端接口返回数据中的统计字段。此处 TOTAL_ROW 即对应返回据中的 totalRow
|
||||
totalRow: '分数：{{= d.TOTAL_ROW.score }}'
|
||||
```
|
||||
!}}
|
||||
|
||||
如上，在 `totalRow` 中返回所需统计的列字段名和值即可。
|
||||
`totalRow` 字段同样可以通过 `parseData` 回调来解析成为 table 组件所规定的数据格式。
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[edit](#cols.edit)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="ws-anchor" id="cols.edit">
|
||||
用于对列所在的单元格开启编辑功能。可选值有：
|
||||
</div>
|
||||
|
||||
- `edit: 'text'` 单行输入模式
|
||||
- `edit: 'textarea'` 多行输入模式 <sup>2.7+</sup>
|
||||
|
||||
**函数写法** <sup>2.7+</sup>
|
||||
|
||||
```
|
||||
edit: function(d){
|
||||
// d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限
|
||||
if(d.editable){ // editable 为任意字段名
|
||||
return 'text'; // 编辑模式
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</td>
|
||||
<td>string<br>function</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>
|
||||
|
||||
是否初始隐藏列
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ignoreExport <sup>2.8.3+</sup></td>
|
||||
<td>
|
||||
|
||||
是否导出时忽略该列。支持以下可选值：
|
||||
|
||||
- `true` : 忽略导出
|
||||
- `false` : 强制导出，对所有列适用
|
||||
- `null` : 只对常规列导出（默认）
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
-
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>escape</td>
|
||||
<td>
|
||||
|
||||
是否对当前列进行内容编码（转义 html），优先级大于基础属性中的 `escape`。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sort</td>
|
||||
<td>
|
||||
|
||||
是否开启列的排序功能。<br>
|
||||
注意：<em>不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序排序计算中</em>，如：`'张三' > '2' > '100'`，这可能并不是你想要的结果，但字典序排列采用的是 `ASCII` 码比对。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>unresize</td>
|
||||
<td>
|
||||
|
||||
是否禁用拖拽列宽。默认情况下会根据列类型 `type` 属性来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>event</td>
|
||||
<td>
|
||||
|
||||
自定义单元格点击事件名，以便在 [单元格工具事件](#on-tool) 中完成对该单元格的事件处理。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>style</td>
|
||||
<td>
|
||||
|
||||
自定义单元格样式。可传入任意的 CSS 内容，如：`style: 'font-size: 13px; color: red;'`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>align</td>
|
||||
<td>
|
||||
|
||||
单元格排列方式。可选值有：`left` | `center` | `right`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`left`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colspan</td>
|
||||
<td>
|
||||
|
||||
单元格所占列数。一般用于多级表头
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowspan</td>
|
||||
<td>
|
||||
|
||||
单元格所占行数。一般用于多级表头
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
484
public/frontend/layui-main/docs/table/detail/options.md
Executable file
484
public/frontend/layui-main/docs/table/detail/options.md
Executable file
@@ -0,0 +1,484 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>绑定原始 table 元素，方法渲染方式必填。</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[url](#options.ajax)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
发送异步请求的 URL。更多异步相关属性见 : [#异步属性](#options.ajax)
|
||||
|
||||
</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[cols](#options.cols)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : [#表头属性](#options.cols)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>
|
||||
|
||||
直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 `url` 属性只能二选一。
|
||||
|
||||
<hr>
|
||||
|
||||
**注**：当设置 `data` 模式时，`count` 的值取 `data.length`，即对一段已知数据进行分页展示。 此时在 `page` 属性中设置 `count` 无效。 若要在同一页显示所有数据，可将 `limit` 设置成 `data.length`，即与 `count` 等同即可，那么默认的分页栏只会显示 1 页，若要自定义分页结构，可通过 `pagebar` 属性结合 `laypage` 组件来重新自定义分页排版。
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 `elem` 属性绑定的原始 table 元素中的 `id` 属性值中获取。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toolbar</td>
|
||||
<td>
|
||||
|
||||
开启表格头部工具栏。支持以下几种值写法：
|
||||
|
||||
- `toolbar: '#template-id'` 自定义工具栏模板选择器
|
||||
- `toolbar: '<div>xxx</div>` 直接传入模板字符
|
||||
- `toolbar: true` 仅开启工具栏右侧，不显示左侧模板
|
||||
- `toolbar: 'default'` 开启工具栏并显示默认模板
|
||||
|
||||
</td>
|
||||
<td>string<br>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>defaultToolbar</td>
|
||||
<td>
|
||||
|
||||
设置头部工具栏右侧图标。值是一个数组，可选成员有: `filter,exports,print` （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：`defaultToolbar: ['filter','print','exports']` <br>支持自定义图标及事件，用法详见示例: [#综合演示](#examples)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>设置容器宽度，默认自适应。</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[height](#options.height)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="ws-anchor" id="options.height">
|
||||
设置表格容器高度，默认自适应。其他可选值的规则如下：
|
||||
</div>
|
||||
|
||||
- `height: 315` 设置固定高度
|
||||
- `height: 'full-30'` 设置自适应高度。这是一个特定的语法格式：`full` 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部*加*表格底部距离页面最底部的“距离和”
|
||||
- `height: '#id-30'` 设置相对父元素的高度自适应，其中 `#id` 即父元素的 ID 选择器，其计算原理和上述 `full` 相同。
|
||||
|
||||
</td>
|
||||
<td>number<br>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxHeight <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置表格容器的最大高度，设置该属性后，`height` 属性将被认定为默认的自适应值。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cellMinWidth</td>
|
||||
<td>
|
||||
|
||||
设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 `minWidth`
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`60`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cellMaxWidth <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置所有普通单元格的最大宽度。其优先级低于表头属性中的 `maxWidth`
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lineStyle <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。<br>示例：`lineStyle: 'height: 95px;'`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>className <sup>2.7+</sup></td>
|
||||
<td>用于给表格主容器追加 css 类名，以便更好地扩展表格样式</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>css <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：`css: '.layui-table-page{text-align: right;}'`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cellExpandedMode <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
用于设置所有单元格默认展开方式，可选值有：
|
||||
|
||||
- `tips` 悬浮展开方式
|
||||
- `default` 多行展开方式（默认）
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cellExpandedWidth <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
用于设置所有单元格默认展开后的宽度。当 `cellExpandedMode` 属性为默认值时有效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`60`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>escape <sup>2.6+</sup></td>
|
||||
<td>是否开启对内容的编码（转义 html）</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>totalRow</td>
|
||||
<td>是否开启合计行区域</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>page</td>
|
||||
<td>
|
||||
|
||||
用于开启分页。<br>
|
||||
支持传入 [laypage](../laypage/#options) 组件的基础属性（jump,elem 除外）
|
||||
|
||||
</td>
|
||||
<td>boolean<br>object</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pagebar <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
用于开启分页区域的自定义模板，用法同 `toolbar` 属性。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limit</td>
|
||||
<td>
|
||||
|
||||
每页显示的条数。值需对应 limits 参数的选项。优先级低于 `page` 属性中的 `limit` 属性。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`10`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limits</td>
|
||||
<td>每页条数的选择项。</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
`[10,…,90]`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>loading</td>
|
||||
<td>
|
||||
|
||||
是否显示加载条。若为 `false`，则在切换分页时，不会出现加载条。必须设置了 `url` 属性才生效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollPos <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
用于设置重载数据或切换分页时的滚动条位置状态。可选值：
|
||||
- `fixed` 重载数据时，保持滚动条位置不变
|
||||
- `reset` 重载数据时，滚动条位置恢复置顶
|
||||
- `default` 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>editTrigger <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
是用于设定单元格编辑的事件触发方式。如双击: `dblclick`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`click`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>定义 table 的大标题（在文件导出等地方会用到）</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>自定义文本，如空数据时的异常提示等。</td>
|
||||
<td>object</td>
|
||||
<td>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{title: 'text 属性默认值'}">
|
||||
查看默认值
|
||||
</button>
|
||||
<div style="display: none;">`text: {none: '无数据'}`</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoSort</td>
|
||||
<td>
|
||||
|
||||
是否由组件自动进行前端排序。若为 `false`，则需自主排序，即由后端直接返回排序好的数据。[#详细用法](#on-sort)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initSort</td>
|
||||
<td>
|
||||
|
||||
初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 `object` 类型的值，包含属性有：
|
||||
- `field` 排序字段。对应 `cols` 设定的各字段名
|
||||
- `type` 排序方式。可选值 : `'asc','desc',null`，即：`升序、降序、默认`
|
||||
|
||||
```
|
||||
initSort: {
|
||||
field: 'id', // 按 id 字段排序
|
||||
type: 'desc' // 降序排序
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>skin</td>
|
||||
<td>
|
||||
|
||||
设置表格边框风格。可选值：`grid`\|`line`\|`row`\|`nob`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`grid`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>
|
||||
|
||||
设置表格其他尺寸。可选值：`sm`\|`md`|`lg`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`md`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>even</td>
|
||||
<td>
|
||||
|
||||
是否开启隔行背景。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[before](#options.before) <sup>2.7+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div class="ws-anchor" id="options.before">
|
||||
数据渲染之前的回调函数。
|
||||
</div>
|
||||
|
||||
```
|
||||
table.render({
|
||||
before: function(options){
|
||||
console.log(options); // 当前实例属性配置项
|
||||
options.where.abc = 123; // 修改或额外追加 where 属性
|
||||
},
|
||||
// … // 其它属性
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[done](#options.done)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div class="ws-anchor" id="options.done">
|
||||
数据渲染完毕的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
table.render({
|
||||
done: function(res, curr, count, origin){
|
||||
console.log(res); // 得到当前渲染的数据
|
||||
console.log(curr); // 得到当前页码
|
||||
console.log(count); // 得到数据总量
|
||||
console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
|
||||
},
|
||||
// … // 其它属性
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>error <sup>2.6+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
数据请求失败的回调函数。返回两个参数：错误对象、内容。
|
||||
|
||||
```
|
||||
error: function(e, msg) {
|
||||
console.log(e, msg)
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in New Issue
Block a user