mirror of
https://gitee.com/layui/layui.git
synced 2025-11-24 16:43:14 +08:00
Add docs
This commit is contained in:
贤心
262
docs/transfer/detail/demo.md
Normal file
262
docs/transfer/detail/demo.md
Normal file
@@ -0,0 +1,262 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础效果'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "李白"},
|
||||
{"value": "2", "title": "杜甫"},
|
||||
{"value": "3", "title": "苏轼"},
|
||||
{"value": "4", "title": "李清照"},
|
||||
{"value": "5", "title": "鲁迅", "disabled": true},
|
||||
{"value": "6", "title": "巴金"},
|
||||
{"value": "7", "title": "冰心"},
|
||||
{"value": "8", "title": "矛盾"},
|
||||
{"value": "9", "title": "贤心"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo',
|
||||
data: data
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-title" class="ws-anchor ws-bold">定义标题及数据源</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo-title"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "李白"},
|
||||
{"value": "2", "title": "杜甫"},
|
||||
{"value": "3", "title": "苏轼"},
|
||||
{"value": "4", "title": "李清照"},
|
||||
{"value": "5", "title": "鲁迅", "disabled": true},
|
||||
{"value": "6", "title": "巴金"},
|
||||
{"value": "7", "title": "冰心"},
|
||||
{"value": "8", "title": "矛盾"},
|
||||
{"value": "9", "title": "贤心"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-title',
|
||||
title: ['候选文人', '获奖文人'], //自定义标题
|
||||
data: data,
|
||||
// width: 150, // 定义宽度
|
||||
height: 210 // 定义高度
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-value" class="ws-anchor ws-bold">初始右侧数据</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo-value"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "瓦罐汤"},
|
||||
{"value": "2", "title": "油酥饼"},
|
||||
{"value": "3", "title": "炸酱面"},
|
||||
{"value": "4", "title": "串串香", "disabled": true},
|
||||
{"value": "5", "title": "豆腐脑"},
|
||||
{"value": "6", "title": "驴打滚"},
|
||||
{"value": "7", "title": "北京烤鸭"},
|
||||
{"value": "8", "title": "烤冷面"},
|
||||
{"value": "9", "title": "毛血旺", "disabled": true},
|
||||
{"value": "10", "title": "肉夹馍"},
|
||||
{"value": "11", "title": "臊子面"},
|
||||
{"value": "12", "title": "凉皮"},
|
||||
{"value": "13", "title": "羊肉泡馍"},
|
||||
{"value": "14", "title": "冰糖葫芦", "disabled": true},
|
||||
{"value": "15", "title": "狼牙土豆"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-value',
|
||||
data: data,
|
||||
value: ["1", "3", "5", "7", "9", "11"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-showSearch" class="ws-anchor ws-bold">显示搜索框</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo-showSearch"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "李白"},
|
||||
{"value": "2", "title": "杜甫"},
|
||||
{"value": "3", "title": "苏轼"},
|
||||
{"value": "4", "title": "李清照"},
|
||||
{"value": "5", "title": "鲁迅", "disabled": true},
|
||||
{"value": "6", "title": "巴金"},
|
||||
{"value": "7", "title": "冰心"},
|
||||
{"value": "8", "title": "矛盾"},
|
||||
{"value": "9", "title": "贤心"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-showSearch',
|
||||
data: data,
|
||||
title: ['文本墨客', '获奖文人'],
|
||||
showSearch: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-parseData" class="ws-anchor ws-bold">数据格式解析</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo-parseData"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-parseData',
|
||||
parseData: function(res){
|
||||
return {
|
||||
"value": res.id, // 数据值
|
||||
"title": res.name, // 数据标题
|
||||
"disabled": res.disabled, // 是否禁用
|
||||
"checked": res.checked // 是否选中
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{"id": "1", "name": "李白"},
|
||||
{"id": "2", "name": "杜甫"},
|
||||
{"id": "3", "name": "苏轼"}
|
||||
],
|
||||
height: 150
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-onchange" class="ws-anchor ws-bold">穿梭时的回调</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-transfer-demo-onchange"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "李白"},
|
||||
{"value": "2", "title": "杜甫"},
|
||||
{"value": "3", "title": "苏轼"},
|
||||
{"value": "4", "title": "李清照"},
|
||||
{"value": "5", "title": "鲁迅", "disabled": true},
|
||||
{"value": "6", "title": "巴金"},
|
||||
{"value": "7", "title": "冰心"},
|
||||
{"value": "8", "title": "矛盾"},
|
||||
{"value": "9", "title": "贤心"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-onchange',
|
||||
data: data,
|
||||
onchange: function(obj, index){
|
||||
var arr = ['左边', '右边'];
|
||||
// 查看被穿梭时的数据 -- 仅用于演示
|
||||
layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-inst" class="ws-anchor ws-bold">实例调用</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" lay-on="getData">获取右侧数据</button>
|
||||
<button type="button" class="layui-btn" lay-on="reload">重载实例</button>
|
||||
</div>
|
||||
<div id="ID-transfer-demo-inst"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var transfer = layui.transfer;
|
||||
var util = layui.util;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 数据
|
||||
var data = [
|
||||
{"value": "1", "title": "李白"},
|
||||
{"value": "2", "title": "杜甫"},
|
||||
{"value": "3", "title": "苏轼"},
|
||||
{"value": "4", "title": "李清照"},
|
||||
{"value": "5", "title": "鲁迅", "disabled": true},
|
||||
{"value": "6", "title": "巴金"},
|
||||
{"value": "7", "title": "冰心"},
|
||||
{"value": "8", "title": "矛盾"},
|
||||
{"value": "9", "title": "贤心"}
|
||||
];
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '#ID-transfer-demo-inst',
|
||||
data: data,
|
||||
id: 'demo-inst' // 定义唯一索引
|
||||
});
|
||||
|
||||
// 批量事件
|
||||
util.on('lay-on', {
|
||||
getData: function(othis){
|
||||
var getData = transfer.getData('demo-inst'); // 获取右侧数据
|
||||
layer.alert(JSON.stringify(getData));
|
||||
},
|
||||
reload:function(){
|
||||
//实例重载
|
||||
transfer.reload('demo-inst', {
|
||||
title: ['文人', '喜欢的文人'],
|
||||
value: ['2', '5', '9'],
|
||||
showSearch: true
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
66
docs/transfer/detail/options.data.md
Normal file
66
docs/transfer/detail/options.data.md
Normal file
@@ -0,0 +1,66 @@
|
||||
<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>title</td>
|
||||
<td>
|
||||
|
||||
数据标题
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>
|
||||
|
||||
数据值
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>checked</td>
|
||||
<td>
|
||||
|
||||
是否选中状态
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>
|
||||
|
||||
是否禁用状态
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
202
docs/transfer/detail/options.md
Normal file
202
docs/transfer/detail/options.md
Normal file
@@ -0,0 +1,202 @@
|
||||
<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>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>
|
||||
|
||||
穿梭框左右面板头部标题
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{
|
||||
title: 'title 属性默认值',
|
||||
content: '<div>title: [\'列表一\',\'列表二\']</div>'
|
||||
}">查看默认值</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>
|
||||
|
||||
穿梭框的数据源。格式详见：[#data 格式](#options.data)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>
|
||||
|
||||
初始选中的数据（右侧列表）
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
设置实例唯一索引，用于其他方法传参使用。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showSearch</td>
|
||||
<td>
|
||||
|
||||
是否开启搜索。支持以下可选值：
|
||||
|
||||
- `false` 不开启搜索（默认）
|
||||
- `true` 开启搜索，且匹配时不区分大小写
|
||||
- `cs` 开启搜索，且匹配时区分大小写 <sup>2.7+</sup>
|
||||
|
||||
</td>
|
||||
<td>boolean<br>string</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>
|
||||
|
||||
定义左右穿梭框宽度
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`200`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>
|
||||
|
||||
定义左右穿梭框高度
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`340`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td colspan="3">
|
||||
|
||||
自定义默认文本， `object` 类型。支持以下属性：
|
||||
|
||||
```
|
||||
text: {
|
||||
none: '无数据', // 没有数据时的文案
|
||||
searchNone: '无匹配数据' // 搜索无匹配数据时的文案
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onchange</td>
|
||||
<td>
|
||||
|
||||
左右穿梭时的回调函数。返回的参数如下：
|
||||
|
||||
```
|
||||
onchange: function(data, index){
|
||||
console.log(data); // 得到当前被穿梭的数据
|
||||
console.log(index); // 如果数据来自左边，index 为 0，否则为 1
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[parseData](#options.parseData)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.parseData" class="ws-anchor">
|
||||
数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 <a href="#options.data" style="pointer-events: auto;">data 格式</a>
|
||||
</div>
|
||||
|
||||
```
|
||||
transfer.render({
|
||||
elem: '',
|
||||
data: [ // 任意数据
|
||||
{"id": "1", "name": "李白"}
|
||||
,{"id": "2", "name": "杜甫"}
|
||||
,{"id": "3", "name": "贤心"}
|
||||
],
|
||||
parseData: function(res){ // 解析成规定的 data 格式
|
||||
return {
|
||||
"value": res.id, // 数据值
|
||||
"title": res.name, // 数据标题
|
||||
"disabled": res.disabled, // 是否禁用
|
||||
"checked": res.checked // 是否选中
|
||||
};
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
102
docs/transfer/index.md
Normal file
102
docs/transfer/index.md
Normal file
@@ -0,0 +1,102 @@
|
||||
---
|
||||
title: 穿梭框组件 transfer
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 穿梭框组件
|
||||
|
||||
> 穿梭框组件 `transfer` 以左右栏 `checkbox` 列表为表现形式，可对列表进行选择并移动到另一栏。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/transfer/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var transfer = layui.transfer | 获得 `transfer` 模块。 |
|
||||
| [transfer.render(options)](#render) | transfer 组件渲染，核心方法。 |
|
||||
| [transfer.reload(id, options)](#reload) | 重载实例 |
|
||||
| [transfer.getData(id)](#getData) | 获得右侧数据 |
|
||||
| [transfer.set(options)](#set) | 设定全局默认属性 |
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`transfer.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/transfer/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/transfer/detail/options.data.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
|
||||
|
||||
`transfer.reload(id, options);`
|
||||
|
||||
- 参数 `id` : 对应渲染时定义的 `id` 属性值
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
```
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id 索引
|
||||
// 其他属性 …
|
||||
});
|
||||
// 重载
|
||||
transfer.reload('test', { // options
|
||||
title: ['title 1', 'title 2']
|
||||
});
|
||||
```
|
||||
|
||||
<h3 id="getData" lay-pid="api" class="ws-anchor ws-bold">获得右侧数据</h3>
|
||||
|
||||
`transfer.getData(id);`
|
||||
|
||||
- 参数 `id` : 对应渲染时定义的 `id` 属性值
|
||||
|
||||
穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它，并进行提交等操作。
|
||||
|
||||
```
|
||||
var transfer = layui.transfer;
|
||||
|
||||
// 渲染
|
||||
transfer.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id 索引
|
||||
// 其他属性 …
|
||||
});
|
||||
// 获得右侧数据
|
||||
var getData = transfer.getData('test');
|
||||
```
|
||||
|
||||
|
||||
<h3 id="set" lay-pid="api" class="ws-anchor ws-bold">设置全局默认属性</h3>
|
||||
|
||||
`transfer.set(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法对所有的 `transfer` 实例有效，设置的属性优先级低于 `transfer.render(options)`
|
||||
|
||||
```
|
||||
// 设置 transfer 全局默认属性
|
||||
transfer.set({
|
||||
height: 'auto', // 所有穿梭框默认高度为自动
|
||||
// …
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user