---
title: 页面组件
description: 页面上使用的组件
published: true
date: 2021-09-08T06:49:20.397Z
tags: wg-basic
editor: markdown
dateCreated: 2021-09-08T06:41:19.351Z
---
# 1. 表单下拉列表
```html
```
# 2. 表单下拉联动
```html
```
初始化
```javascript
// 统一渲染方法
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {
document.getElementById(templateBoxId).innerHTML = html;
});
form.render('select', templateBoxId);
if(callback) {
callback();
}
}
// 初始化1级区域下拉选择
function initArea1Select(selectValue) {
top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/81583ade-5466-49aa-b7b6-c643c131ea34', []), {
}, null, function(code, data, args) {
initSelectRadioCheckboxTemplate('area1SelectTemplate', 'area1SelectTemplateBox', data, function() {
var selectObj = {};
selectObj['area1'] = selectValue;
form.val('dataForm', selectObj);
});
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化2级区域下拉选择
function initArea2Select(area1, selectValue) {
if(!area1) {
initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', [], function() {
var selectObj = {};
selectObj['area2'] = selectValue;
form.val('dataForm', selectObj);
});
return;
}
top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/{area1}', [area1]), {
}, null, function(code, data, args) {
initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', data, function() {
var selectObj = {};
selectObj['area2'] = selectValue;
form.val('dataForm', selectObj);
});
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
```
赋值初始化
```javascript
initArea1Select(data['area1']);
initArea2Select(data['area1'], data['area2']);
```
联动
```javascript
// area1 选择事件，多级联动继续添加
form.on('select(area1)', function(data) {
initArea2Select(data.value);
});
```
# 3. 表单单选
```html
```
# 4. 表单多选
```html
```
处理多选结果
```javascript
var authorizedGrantTypes = top.restAjax.checkBoxToString(formData.field, 'authorizedGrantTypes');
formData.field.authorizedGrantTypes = authorizedGrantTypes;
```
赋值多选结果
```javascript
var authorizedGrantTypes = data.authorizedGrantTypes.split(',');
var formObj = {};
for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];) {
formObj['authorizedGrantTypes['+ item +']'] = true;
form.val('dataForm', formObj);
}
form.render(null, 'dataForm');
```
# 5. 表单下拉、单选、复选统一处理
```javascript
// 初始化选择框、单选、复选模板
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {
document.getElementById(templateBoxId).innerHTML = html;
});
form.render('select', templateBoxId);
if(callback) {
callback();
}
}
```
# 6. viewer，具体是用参考官方API
```html
```
# 7. 列表按钮
```javascript
// 列表模板
templet: function(item) {
return '';
}
// 事件处理
table.on('tool(dataTable)', function(obj) {
var layEvent = obj.event;
var data = obj.data;
if(layEvent === 'resetPasswordEvent') {
top.dialog.open({
url: top.restAjax.path('route/system/user/update-rest-password.html?userId={userId}', [data.userId]),
title: '【'+ data.userName +'】重置密码',
width: '320px',
height: '280px',
onClose: function() {
reloadTable();
}
});
}
});
```
# 8. 选择人员（表格）
```javascript
top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
top.dialog.open({
url: 'route/common/listselectuser?selectType=checkbox(radio)',
title: '选择用户',
width: '1000px',
height: '500px',
onClose: function() {
var newSelectedUserList = top.dialog.dialogData.newSelectedUserList;
if(newSelectedUserList.length != 0) {
// newSelectedUserList[0].userId;
// newSelectedUserList[0].userName;
}
top.dialog.dialogData.oldSelectedUserList = [];
}
});
```
# 9. 文件上传