jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
public/frontend/layui-main/docs/tree/detail/demo.md Executable file
View File

@@ -0,0 +1,179 @@
<h3 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">综合演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
<button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
<button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
</div>
<div id="ID-tree-demo"></div>
<!-- import layui -->
<script>
layui.use(function(){
var tree = layui.tree;
var layer = layui.layer;
var util = layui.util;
// 模拟数据
var data = [{title:'A-1',id:1,field:'name1',checked:true,spread:true,children:[{title:'B-1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'C-1-1-3',id:23,field:'',children:[{title:'D-1-1-3-1',id:24,field:'',children:[{title:'E-1-1-3-1-1',id:30,field:''},{title:'E-1-1-3-1-2',id:31,field:''}]}]},{title:'C-1-1-1',id:7,field:'',children:[{title:'D-1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'C-1-1-2',id:8,field:'',children:[{title:'D-1-1-2-1',id:32,field:''}]}]},{title:'B-1-2',id:4,spread:true,children:[{title:'C-1-2-1',id:9,field:'',disabled:true},{title:'C-1-2-2',id:10,field:''}]},{title:'B-1-3',id:20,field:'',children:[{title:'C-1-3-1',id:21,field:''},{title:'C-1-3-2',id:22,field:''}]}]},{title:'A-2',id:2,field:'',spread:true,children:[{title:'B-2-1',id:5,field:'',spread:true,children:[{title:'C-2-1-1',id:11,field:''},{title:'C-2-1-2',id:12,field:''}]},{title:'B-2-2',id:6,field:'',children:[{title:'C-2-2-1',id:13,field:''},{title:'C-2-2-2',id:14,field:'',disabled:true}]}]},{title:'A-3',id:16,field:'',children:[{title:'B-3-1',id:17,field:'',fixed:true,children:[{title:'C-3-1-1',id:18,field:''},{title:'C-3-1-2',id:19,field:''}]},{title:'B-3-2',id:27,field:'',children:[{title:'C-3-2-1',id:28,field:''},{title:'C-3-2-2',id:29,field:''}]}]}];
// 渲染
tree.render({
elem: '#ID-tree-demo',
data: data,
showCheckbox: true, // 是否显示复选框
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
id: 'demo-id-1',
isJump: true, // 是否允许点击节点时弹出新窗口跳转
click: function(obj){
var data = obj.data; //获取当前点击的节点数据
layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
}
});
// 按钮事件
util.event('lay-on', {
getChecked: function(othis){
var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据
layer.alert(JSON.stringify(checkedData), {shade:0});
console.log(checkedData);
},
setChecked: function(){
tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
},
reload: function(){
tree.reload('demo-id-1', {}); // 重载实例
}
});
});
</script>
</textarea>
</pre>
<h3 id="demo-showLine" lay-toc="{level: 2}" class="ws-anchor ws-bold">无连接线风格</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-tree-demo-showLine"></div>
<!-- import layui -->
<script>
layui.use(function(){
var tree = layui.tree;
// 模拟数据
var data = [{title:'江西',id:1,children:[{title:'南昌',id:1000,children:[{title:'青山湖区',id:10001},{title:'高新区',id:10002}]},{title:'九江',id:1001},{title:'赣州',id:1002}]},{title:'广西',id:2,children:[{title:'南宁',id:2000},{title:'桂林',id:2001}]},{title:'陕西',id:3,children:[{title:'西安',id:3000},{title:'延安',id:3001}]},{title:'山西',id:3,children:[{title:'太原',id:4000},{title:'长治',id:4001}]}];
// 渲染
tree.render({
elem: '#ID-tree-demo-showLine',
data: data,
showLine: false // 是否开启连接线
});
});
</script>
</textarea>
</pre>
<h3 id="demo-icon-stretch" lay-toc="{level: 2}" class="ws-anchor ws-bold">仅图标控制伸缩</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-tree-demo-onlyIconControl"></div>
<!-- import layui -->
<script>
layui.use(function(){
var tree = layui.tree;
var layer = layui.layer;
// 模拟数据
var data = [{title:'江西',id:1,children:[{title:'南昌',id:1000,children:[{title:'青山湖区',id:10001},{title:'高新区',id:10002}]},{title:'九江',id:1001},{title:'赣州',id:1002}]},{title:'广西',id:2,children:[{title:'南宁',id:2000},{title:'桂林',id:2001}]},{title:'陕西',id:3,children:[{title:'西安',id:3000},{title:'延安',id:3001}]},{title:'山西',id:3,children:[{title:'太原',id:4000},{title:'长治',id:4001}]}];
// 渲染
tree.render({
elem: '#ID-tree-demo-onlyIconControl',
data: data,
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
click: function(obj){
layer.msg(JSON.stringify(obj.data));
}
});
});
</script>
</textarea>
</pre>
<h3 id="demo-accordion" lay-toc="{level: 2}" class="ws-anchor ws-bold">手风琴模式</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-tree-demo-accordion"></div>
<!-- import layui -->
<script>
layui.use(function(){
var tree = layui.tree;
// 渲染
tree.render({
elem: '#ID-tree-demo-accordion',
data: [{
title: '优秀',
children: [{
title: '80 ~ 90'
},{
title: '90 ~ 100'
}]
},{
title: '良好',
children: [{
title: '70 ~ 80'
},{
title: '60 ~ 70'
}]
},{
title: '一般',
children: [{
title: '0 ~ 60'
}]
}],
accordion: true
});
});
</script>
</textarea>
</pre>
<h3 id="demo-checkbox" lay-toc="{level: 2}" class="ws-anchor ws-bold">开启复选框</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
<div id="ID-tree-demo-showCheckbox"></div>
<!-- import layui -->
<script>
layui.use(function(){
var tree = layui.tree;
// 模拟数据
var data = [{title:'早餐',id:1,children:[{title:'拌粉',id:5},{title:'蒸饺',id:6},{title:'豆浆',id:7}]},{title:'午餐',id:2,checked:true,children:[{title:'藜蒿炒腊肉',id:8},{title:'西湖醋鱼',id:9},{title:'小白菜',id:10},{title:'海带排骨汤',id:11}]},{title:'晚餐',id:3,children:[{title:'红烧肉',id:12,fixed:true},{title:'番茄炒蛋',id:13}]},{title:'夜宵',id:4,children:[{title:'小龙虾',id:14,checked:true},{title:'香辣蟹',id:15,disabled:true},{title:'烤鱿鱼',id:16}]}];
// 渲染
tree.render({
elem: '#ID-tree-demo-showCheckbox',
data: data,
showCheckbox: true,
edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
});
});
</script>
</textarea>
</pre>

110
public/frontend/layui-main/docs/tree/detail/options.data.md Executable file
View File

@@ -0,0 +1,110 @@
<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>id</td>
<td>
节点唯一索引值，用于对指定节点进行各类操作
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>field</td>
<td>
节点字段名
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>children</td>
<td>
子节点。支持设定属性选项同父节点
</td>
<td>array</td>
<td>-</td>
</tr>
<tr>
<td>href</td>
<td>
点击节点弹出新窗口对应的 url。需开启 isJump 基础属性才有效。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>spread</td>
<td>
节点是否初始展开
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>checked</td>
<td>
节点是否初始为选中状态。需开启 `showCheckbox` 基础属性时有效。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>disabled</td>
<td>
节点是否为禁用状态
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
</tbody>
</table>

246
public/frontend/layui-main/docs/tree/detail/options.md Executable file
View File

@@ -0,0 +1,246 @@
<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>
绑定元素选择器
</td>
<td>string/DOM</td>
<td>-</td>
</tr>
<tr>
<td>data</td>
<td>
`tree` 的数据源。其格式详见：[#data 格式](#options.data)
</td>
<td>array</td>
<td>-</td>
</tr>
<tr>
<td>id</td>
<td>
设置实例唯一索引，用于其他方法传参使用。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>showCheckbox</td>
<td>
是否显示复选框
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>edit</td>
<td>
是否开启节点的右侧操作图标。支持以下可选值：
- 若为 `true`，则默认显示「改删」图标
- 若为 数组，则可自由配置操作图标，如：`edit:['add', 'update', 'del']` ，且图标将按照数组的顺序显示。
</td>
<td>boolean<br>array</td>
<td>
`false`
</td>
</tr>
<tr>
<td>accordion</td>
<td>
是否开启手风琴模式
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>onlyIconControl</td>
<td>
是否仅允许节点左侧图标控制展开伸缩。
- 默认为 `false`，即点击节点本身也可控制伸缩
- 若值为 `true`，则只能通过节点左侧图标来展开收缩
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>isJump</td>
<td>
是否允许点击节点时弹出新窗口跳转。若为 `true`，则需在对应的 data 中设定 href 属性（url 格式）
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>showLine</td>
<td>
是否开启节点连接线。若设为 `false`，则节点左侧出现三角图标。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>
[customName](#options.customName) <sup>2.8.14+</sup>
</td>
<td>
自定义 `data` 数据源中常用的字段名称。
</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>text</td>
<td colspan="3">
自定义默认文本，`object` 类型。支持以下属性：
```
text: {
defaultNodeName: '未命名', // 节点默认名称
none: '无数据' // 数据为空时的提示文本
}
```
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
</div>
</td>
</tr>
<tr>
<td>click</td>
<td colspan="3">
<div id="options.click" lay-pid="options" class="ws-anchor">
节点被点击的回调函数。返回的参数如下：
</div>
```
click: function(obj){
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.state); // 得到当前节点的展开状态：open、close、normal
console.log(obj.elem); // 得到当前节点元素
console.log(obj.data.children); // 当前节点下是否有子节点
}
```
</td>
</tr>
<tr>
<td>oncheck</td>
<td colspan="3">
<div id="options.oncheck" lay-pid="options" class="ws-anchor">
点击复选框时的回调函数，返回的参数如下：
</div>
```
oncheck: function(obj){
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.checked); // 节点是否被选中
console.log(obj.elem); // 得到当前节点元素
}
```
</td>
</tr>
<tr>
<td>operate</td>
<td colspan="3">
<div id="options.operate" lay-pid="options" class="ws-anchor">
点击节点的右侧操作图标的回调函数，返回的参数如下：
</div>
```
operate: function(obj){
var type = obj.type; // 得到操作类型：add、edit、del
var data = obj.data; // 得到当前节点的数据
var elem = obj.elem; // 得到当前节点元素
// Ajax 操作
var id = data.id; // 得到节点索引
if(type === 'add'){ // 增加节点
//返回 key 值
return 123;
} else if(type === 'update'){ // 修改节点
console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
} else if(type === 'del'){ // 删除节点
// …
};
}
```
</td>
</tr>
</tbody>
</table>

128
public/frontend/layui-main/docs/tree/index.md Executable file
View File

@@ -0,0 +1,128 @@
---
title: 树组件 tree
toc: true
---
# 树组件
> 树组件 `tree` 是以树形为结构的菜单伸缩型组件，*当前版本中，`tree`主要用于树菜单展示，交互性相对较弱。*
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("/tree/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{hot: true}">API</h2>
| API | 描述 |
| --- | --- |
| var tree = layui.tree | 获得 `tree` 模块。 |
| [tree.render(options)](#render) | tree 组件渲染，核心方法。 |
| [tree.getChecked(id)](#getChecked) | 获取选中的节点数据 |
| [tree.setChecked(id, idArr)](#setChecked) | 设置对应 id 的节点选中 |
| [tree.reload(id, options)](#reload) | tree 实例重载 |
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
`tree.render(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("/tree/detail/options.md") }}
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
{{- d.include("/tree/detail/options.data.md") }}
</div>
<div id="options.customName" class="ws-anchor">
您可以对上述 `data` 中常用的字段进行自定义名称 <sup>2.8.14+</sup> :
</div>
```
var tree = layui.tree;
// 渲染
tree.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
data: [], // 数据源
customName: { // 自定义 data 字段名 --- 2.8.14+
id: 'id',
title: 'title',
children: 'children'
},
// 其他属性 …
});
```
<h3 id="getChecked" lay-pid="api" class="ws-anchor">获取选中的节点数据</h3>
`tree.getChecked(id);`
- 参数 `id` : 对应 tree 渲染时定义的 id 属性值
```
var tree = layui.tree;
// 渲染
tree.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
// 其他属性 …
});
// 获取选中的节点数据
var checkData = tree.getChecked('test');
```
<h3 id="setChecked" lay-pid="api" class="ws-anchor">设置对应 id 的节点选中</h3>
`tree.setChecked(id, idArr);`
- 参数 `id` : 对应 tree 渲染时定义的 id 属性值
- 参数 `idArr` : 对应 tree 渲染时的 data 中的 id 属性值。数组格式，可设置多个。
```
var tree = layui.tree;
// 渲染
tree.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
// 其他属性 …
});
// 设置对应 id 的节点选中
tree.setChecked('test', [1, 3]); // 批量勾选 id 为 1,3 的节点
```
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
`tree.reload(id, idArr);`
- 参数 `id` : 对应 tree 渲染时定义的 id 属性值
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
```
var tree = layui.tree;
// 渲染
tree.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
// 其他属性 …
});
// 重载
tree.reload('test', { // options
data: []
});
```