docs: update wg-basic/page-unit
This commit is contained in:
John Smith
parent
c28e111f43
commit
f3cc08a5a1
@ -2,13 +2,13 @@
|
||||
title: 页面组件
|
||||
description: 页面上使用的组件
|
||||
published: true
|
||||
date: 2022-01-17T04:25:26.729Z
|
||||
date: 2022-02-11T03:00:14.821Z
|
||||
tags: wg-basic
|
||||
editor: markdown
|
||||
dateCreated: 2021-09-08T06:41:19.351Z
|
||||
---
|
||||
|
||||
# 1. 表单下拉列表
|
||||
# 表单下拉列表
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
@ -23,7 +23,7 @@ dateCreated: 2021-09-08T06:41:19.351Z
|
||||
</div>
|
||||
```
|
||||
|
||||
# 2. 表单下拉联动
|
||||
# 表单下拉联动
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
@ -120,7 +120,7 @@ form.on('select(area1)', function(data) {
|
||||
});
|
||||
```
|
||||
|
||||
# 3. 表单单选
|
||||
# 表单单选
|
||||
|
||||
```html
|
||||
<div class="layui-form-item" pane>
|
||||
@ -132,7 +132,7 @@ form.on('select(area1)', function(data) {
|
||||
</div>
|
||||
```
|
||||
|
||||
# 4. 表单多选
|
||||
# 表单多选
|
||||
|
||||
```html
|
||||
<div class="layui-form-item" pane>
|
||||
@ -166,7 +166,7 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
|
||||
form.render(null, 'dataForm');
|
||||
```
|
||||
|
||||
# 5. 表单下拉、单选、复选统一处理
|
||||
# 表单下拉、单选、复选统一处理
|
||||
|
||||
```javascript
|
||||
// 初始化选择框、单选、复选模板
|
||||
@ -181,7 +181,7 @@ function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callba
|
||||
}
|
||||
```
|
||||
|
||||
# 6. viewer，具体是用参考官方API
|
||||
# viewer，具体是用参考官方API
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
@ -191,7 +191,7 @@ new Viewer(document.getElementById('boxId'), {navbar: true});
|
||||
</script>
|
||||
```
|
||||
|
||||
# 7. 列表按钮
|
||||
# 列表按钮
|
||||
|
||||
```javascript
|
||||
// 单按钮
|
||||
@ -222,13 +222,13 @@ table.on('tool(dataTable)', function(obj) {
|
||||
});
|
||||
```
|
||||
|
||||
# 8. 选择人员（表格）
|
||||
# 选择人员（表格）
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
# 9. 文件上传（图片示例）
|
||||
# 文件上传（图片示例）
|
||||
|
||||
依赖
|
||||
|
||||
@ -422,7 +422,7 @@ function initHealthCodeUploadFile() {
|
||||
}
|
||||
```
|
||||
|
||||
# 10. 选择用户
|
||||
# 选择用户
|
||||
|
||||
```javascript
|
||||
top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
|
||||
@ -444,7 +444,7 @@ top.dialog.open({
|
||||
1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
|
||||
2. 返回的列表中可以获取：userId，userName
|
||||
|
||||
# 11. 选择地区
|
||||
# 选择地区
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
@ -485,7 +485,68 @@ top.dialog.open({
|
||||
1. 打开页面时的参数 **areaName** 用于回显，可以不传。
|
||||
2. 返回的列表中可以获取：areaId，areaName，areaCode
|
||||
|
||||
# 12.列表下拉选择
|
||||
# 选择地区（带按钮）
|
||||
|
||||
样式可根据实际情况调整
|
||||
|
||||
```html
|
||||
<style>
|
||||
.table-select-area {position: relative; width: 200px;}
|
||||
.table-select-area #areaName {width: 64%}
|
||||
.table-select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
|
||||
</style>
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="layui-inline table-select-area">
|
||||
<input type="hidden" id="areaCode">
|
||||
<input type="text" id="areaName" class="layui-input search-item search-item-width-300" placeholder="选择地区" readonly>
|
||||
<div class="layui-btn-group select-btn">
|
||||
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</button>
|
||||
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
(function() {
|
||||
$(document).on('click', '#areaSelectBtn', function() {
|
||||
top.dialog.open({
|
||||
title: '选择地区',
|
||||
url: top.restAjax.path('route/area/get-select', []),
|
||||
width: '600px',
|
||||
height: '225px',
|
||||
onClose: function() {
|
||||
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
|
||||
var areaCode = '';
|
||||
var areaName = '';
|
||||
if(selectedAreaArray.length > 0) {
|
||||
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
|
||||
for(var i = 0, item; item = selectedAreaArray[i++];) {
|
||||
if(areaName) {
|
||||
areaName += ',';
|
||||
}
|
||||
areaName += item.areaName;
|
||||
}
|
||||
$('#areaCode').val(areaCode);
|
||||
$('#areaName').val(areaName);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
$(document).on('click', '#areaCleanBtn', function () {
|
||||
$('#areaCode').val('');
|
||||
$('#areaName').val('');
|
||||
})
|
||||
})()
|
||||
```
|
||||
|
||||
|
||||
# 列表下拉选择
|
||||
|
||||
位置：`<div class="test-table-reload-btn"></div>` 里
|
||||
|
||||
@ -544,14 +605,14 @@ form.on('select(typeFilter)', function(data) {
|
||||
});
|
||||
```
|
||||
|
||||
# 13.url中query参数集合对象
|
||||
# url中query参数集合对象
|
||||
|
||||
```javascript
|
||||
var params = top.restAjax.params(window.location.href);
|
||||
var xxx = params.xxx;
|
||||
```
|
||||
|
||||
# 14.列表选择
|
||||
# 列表选择
|
||||
|
||||
> 这里只是示例，具体的参数、变量需根据实际情况修改
|
||||
{.is-warning}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user