docs: update wg-basic/page-unit
This commit is contained in:
John Smith
parent
b872283f69
commit
fbe64786e1
@ -2,13 +2,14 @@
|
||||
title: 页面组件
|
||||
description: 页面上使用的组件
|
||||
published: true
|
||||
date: 2021-11-01T03:38:24.581Z
|
||||
date: 2021-11-11T07:02:04.098Z
|
||||
tags: wg-basic
|
||||
editor: markdown
|
||||
dateCreated: 2021-09-08T06:41:19.351Z
|
||||
---
|
||||
|
||||
# 1. 表单下拉列表
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
@ -23,6 +24,7 @@ dateCreated: 2021-09-08T06:41:19.351Z
|
||||
```
|
||||
|
||||
# 2. 表单下拉联动
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">1级区域</label>
|
||||
@ -50,7 +52,9 @@ dateCreated: 2021-09-08T06:41:19.351Z
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
初始化
|
||||
|
||||
```javascript
|
||||
// 统一渲染方法
|
||||
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
|
||||
@ -99,19 +103,25 @@ function initArea2Select(area1, selectValue) {
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
赋值初始化
|
||||
|
||||
```javascript
|
||||
initArea1Select(data['area1']);
|
||||
initArea2Select(data['area1'], data['area2']);
|
||||
```
|
||||
|
||||
联动
|
||||
|
||||
```javascript
|
||||
// area1 选择事件，多级联动继续添加
|
||||
form.on('select(area1)', function(data) {
|
||||
initArea2Select(data.value);
|
||||
});
|
||||
```
|
||||
|
||||
# 3. 表单单选
|
||||
|
||||
```html
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">名称</label>
|
||||
@ -121,7 +131,9 @@ form.on('select(area1)', function(data) {
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# 4. 表单多选
|
||||
|
||||
```html
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">授权模式 *</label>
|
||||
@ -134,12 +146,16 @@ form.on('select(area1)', function(data) {
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
处理多选结果
|
||||
|
||||
```javascript
|
||||
var authorizedGrantTypes = top.restAjax.checkBoxToString(formData.field, 'authorizedGrantTypes');
|
||||
formData.field.authorizedGrantTypes = authorizedGrantTypes;
|
||||
```
|
||||
|
||||
赋值多选结果
|
||||
|
||||
```javascript
|
||||
var authorizedGrantTypes = data.authorizedGrantTypes.split(',');
|
||||
var formObj = {};
|
||||
@ -149,7 +165,9 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
|
||||
}
|
||||
form.render(null, 'dataForm');
|
||||
```
|
||||
|
||||
# 5. 表单下拉、单选、复选统一处理
|
||||
|
||||
```javascript
|
||||
// 初始化选择框、单选、复选模板
|
||||
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
|
||||
@ -164,6 +182,7 @@ function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callba
|
||||
```
|
||||
|
||||
# 6. viewer，具体是用参考官方API
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||
@ -173,6 +192,7 @@ new Viewer(document.getElementById('boxId'), {navbar: true});
|
||||
```
|
||||
|
||||
# 7. 列表按钮
|
||||
|
||||
```javascript
|
||||
// 单按钮
|
||||
templet: function(item) {
|
||||
@ -203,17 +223,22 @@ table.on('tool(dataTable)', function(obj) {
|
||||
```
|
||||
|
||||
# 8. 选择人员（表格）
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
# 9. 文件上传（图片示例）
|
||||
|
||||
依赖
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||
```
|
||||
|
||||
表单代码
|
||||
|
||||
```html
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">厂区大门</label>
|
||||
@ -248,6 +273,7 @@ table.on('tool(dataTable)', function(obj) {
|
||||
```
|
||||
|
||||
js代码
|
||||
|
||||
```js
|
||||
var viewerObj = {};
|
||||
|
||||
@ -341,6 +367,7 @@ function initFactoryGateUploadFile() {
|
||||
代码以厂区图片为例，实际只需要替换对应的内容即可：模板名称、模板BOX名称
|
||||
|
||||
使用layui
|
||||
|
||||
```js
|
||||
// 初始化健康码图片上传
|
||||
function initHealthCodeUploadFile() {
|
||||
@ -396,6 +423,7 @@ function initHealthCodeUploadFile() {
|
||||
```
|
||||
|
||||
# 10. 选择用户
|
||||
|
||||
```javascript
|
||||
top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
|
||||
top.dialog.open({
|
||||
@ -411,11 +439,13 @@ top.dialog.open({
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
说明：
|
||||
1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
|
||||
2. 返回的列表中可以获取：userId，userName
|
||||
|
||||
# 11. 选择地区
|
||||
|
||||
```html
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label layui-form-label-up">选择地区</label>
|
||||
@ -425,6 +455,7 @@ top.dialog.open({
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
top.dialog.open({
|
||||
title: '选择地区',
|
||||
@ -449,6 +480,7 @@ top.dialog.open({
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
说明：
|
||||
1. 打开页面时的参数 **areaName** 用于回显，可以不传。
|
||||
2. 返回的列表中可以获取：areaId，areaName，areaCode
|
||||
@ -460,6 +492,7 @@ top.dialog.open({
|
||||
引入：`var form = layui.form`
|
||||
|
||||
1. 固定
|
||||
|
||||
```html
|
||||
<div class="layui-inline layui-form search-item">
|
||||
<select id="type" name="type" lay-filter="typeFilter">
|
||||
@ -486,6 +519,7 @@ top.dialog.open({
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
function initQuestionTypeSelect() {
|
||||
top.restAjax.get(top.restAjax.path('api/data/listbyparentid/a7d1ab3d-fbd2-48ca-bfb8-353cad9f3eba', []), {}, null, function(code, data, args) {
|
||||
@ -499,6 +533,7 @@ function initQuestionTypeSelect() {
|
||||
}
|
||||
```
|
||||
3. 下拉选择事件
|
||||
|
||||
```javascript
|
||||
form.on('select(typeFilter)', function(data) {
|
||||
$('#choiceType').val('')
|
||||
@ -508,17 +543,21 @@ form.on('select(typeFilter)', function(data) {
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
# 13.url中query参数集合对象
|
||||
|
||||
```javascript
|
||||
var params = top.restAjax.params(window.location.href);
|
||||
var xxx = params.xxx;
|
||||
```
|
||||
|
||||
# 14.列表选择
|
||||
|
||||
> 这里只是示例，具体的参数、变量需根据实际情况修改
|
||||
{.is-warning}
|
||||
|
||||
html：列表页面
|
||||
|
||||
```html
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
@ -535,6 +574,7 @@ html：列表页面
|
||||
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
layui.config({
|
||||
base: 'assets/layuiadmin/'
|
||||
@ -734,7 +774,9 @@ layui.config({
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
调用方式：其他页面
|
||||
|
||||
```javascript
|
||||
// 这里的列表数据格式根据实际情况变化
|
||||
top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user