---
title: 页面组件
description: 页面上使用的组件
published: true
date: 2021-09-08T06:45:19.292Z
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>    
    <div class="layui-input-block">        
        <select id="type" name="type" lay-filter="typeFilter">            
            <option value="1">舆情收集</option>            
            <option value="2">政法干警监督举报</option>            
            <option value="3">执法、司法监督举报</option>        
        </select>    
    </div>
</div>
```

# 2. 表单下拉联动
```html
<div class="layui-form-item">    
    <label class="layui-form-label">1级区域</label>    
    <div class="layui-input-block layui-form" id="area1SelectTemplateBox" lay-filter="area1SelectTemplateBox"></div>
    <script id="area1SelectTemplate" type="text/html">        
        <select id="area1" name="area1" lay-filter="area1" disabled>            
            <option value="">暂无1级区域</option>            
            {{# for(var i = 0, item; item = d[i++];) { }}            
            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
            {{# } }}        
        </select>    
    </script>
</div>

<div class="layui-form-item">    
    <label class="layui-form-label">2级区域</label>    
    <div class="layui-input-block layui-form" id="area2SelectTemplateBox" lay-filter="area2SelectTemplateBox"></div>    
    <script id="area2SelectTemplate" type="text/html">        
        <select id="area2" name="area2" lay-filter="area2" disabled>            
            <option value="">暂无2级区域</option>            
            {{# for(var i = 0, item; item = d[i++];) { }}            
            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
            {{# } }}        
        </select>    
    </script>
</div>
```
初始化
```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
<div class="layui-form-item" pane>    
    <label class="layui-form-label">名称</label>    
    <div class="layui-input-block">        
        <input type="radio" name="isLogOff" value="0" title="否" checked>        
        <input type="radio" name="isLogOff" value="1" title="是">    
    </div>
</div>
```
# 4. 表单多选
```html
<div class="layui-form-item" pane>    
    <label class="layui-form-label">授权模式 *</label>
    <div class="layui-input-block">    
        <input type="checkbox" name="authorizedGrantTypes[authorization_code]" title="授权码模式" checked>    
        <input type="checkbox" name="authorizedGrantTypes[password]" title="密码模式">    
        <input type="checkbox" name="authorizedGrantTypes[client_credentials]" title="客户端模式" checked>    
        <input type="checkbox" name="authorizedGrantTypes[implicit]" title="简单模式">    
        <input type="checkbox" name="authorizedGrantTypes[refresh_token]" title="刷新" checked>
    </div>
</div>
```
处理多选结果
```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');
```