表单
### 基础表单模板
```html
<form class="layui-form" id="form">
<div class="layboxn">
<h3 class="laytitle p10 f14">表单标题</h3>
<div class="layui-row pb10 pr15 bline">
<!-- 一行 -->
<div class="layui-col-xs12 layui-col-sm6 mt10 layui-form-item">
<label class="layui-form-label labeltxt">名称：</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item pt10 pb10 myButton">
<button class="layui-btn ml15" lay-submit lay-filter="saveRule" >
提交
</button>
</div>
</div>
</form>
```
### 表单提交
可以使用layui方法, 也可以使用jq, 但为了统一还是使用 layui 方法好
```html
<button class="layui-btn" lay-submit lay-filter="save">提交</button>
```
```javascript
form.on("submit(save)", function (data) {
var submitData = {} // 需要提交的数据
submitData.id = id // 示例, 提交id
onion.ajax.post(url, submitData, function (res) {
if (res.code == onion.networkState.SUCC) {
// 成功操作
} else {
// 失败操作
}
});
return false // 不能漏
})
```
### 表单数据回显
```javascript
function render() {
onion.ajax.post(url, submitData, function (res) {
if (res.code == onion.networkState.SUCC) {
var data = res.data
id = data.id
// 简单的回显, 与表单的name一致
form.val("form", {
id: id
})
editror.html(data.content) // 假设有富文本, editror与富文本最初声明一致
}
else {}
})
}
```
### 时间选择
```html
<input class="layui-input" name="startDate" id="start" autocomplete="off"
placeholder="请输入开始时间" />
```
```javascript
var layDate = onion.laydate;
layDate.render({
elem: "#start",
type: "datetime",
range: false,
trigger: 'click'
});
```
[详细参数见](https://www.layui.com/doc/modules/laydate.html)
### 表单元素监听
select, checkbox, switch, radio, submit 需要监听操作
```html
<select name="name" lay-filter="select"> <!-- lay-filter, 其他元素同 -->
<option value="">请选择</option>
</select>
```
```javascript
form.on('select(select)', function (data) {
console.log(data.value)
})
```
### 只能填写数字
```javascript
lay-verify="required|number"
```
### 表单中的图片上传
#### HTML与CSS模板
```html
<!--form表单内-->
<div class="layboxn mt10">
<h3 class="laytitle p10 f14">证件图片</h3>
<div class="upload p10 bline">
<button type="button" class="layui-btn" id="uploadImg">
<i class="layui-icon"></i>上传图片
</button>
</div>
<div class="ggImglist">
<ul class="layui-row" id="previewList"></ul>
</div>
</div>
```
```css
.ggImglist li{width:150px;float:left;border-bottom:dotted #dfdfdf 1px;border-right:dotted #dfdfdf 1px;}
.ggImglist li .imgdel{top:0;right:0;background-color:#f2f2f2;width:20px;height:20px;display:block;font-size:16px;line-height:20px;text-align: center; }
.ggImglist li .layui-input{width:80px;}
.ggImglist li .imgdel:hover{cursor:pointer;color:#fff;background-color:rgb(0, 150, 136)}
```
#### 触发上传图片按钮
```javascript
onion.upload({elem: '#uploadImg', url: '/common/image/upload', data: {type: 16}}, function (res) {
var res = res[0];
if (res.code == onion.networkState.SUCC) {
$('#previewList').append(renderImg(res.data));
delImg();
form.render();
} else {
onion.layer.tipMsg(res.msg);
}
})
```
#### 渲染图片展示列表
```javascript
function renderImg(data) {
var random = onion.random(8);
// 数据回显
if (data.warehouseId) {
var temp = '<li class="flexbox je-align-center pt10 pb10" id="' + data.warehouseId + '">' +
' <div class="ml10 jepor">' +
' <i class="layui-icon imgdel jepoa" >ဆ</i>' +
' <img data-lePicUrl="' + data.idPicUrl + '" src="' + onion.suffx + (data.idPicUrl) + '" width="100" height="100" alt="">' +
' </div>' +
' </li>';
} else { // 新增
var temp = '<li class="flexbox je-align-center pt10 pb10" id="' + data.warehouseId + '">' +
' <div class="ml10 jepor">' +
' <i class="layui-icon imgdel jepoa" >ဆ</i>' +
' <img data-lePicUrl="' + data.url + '" src="' + onion.suffx + (data.url || data.idPicUrl) + '" width="100" height="100" alt="">' +
' </div>' +
' </li>';
}
return temp;
}
```
#### 获取图片数据, 以实际接口内容为准
```javascript
getProductDetail(id);
function getProductDetail(id) {
onion.ajax.post('/goods/warehouse/uploadInfo?id='+id,
function (res) {
if (res.code == onion.networkState.SUCC) {
var data = res.data;
renderSpecal(data);
}
}
})
}
```
#### 渲染上传图片
```javascript
function renderSpecal(data) {
var idPicUrls = data;
for (var i = 0; i < idPicUrls.length; i++) {
$('#previewList').append(renderImg(idPicUrls[i]));
delImg();
}
}
```
#### 图片删除操作
```javascript
function delImg() {
$('#previewList .imgdel').on('click', function () {
$(this).parent().parent().remove();
})
}
```
#### 通过表单, 上传图片内容
```javascript
// 写在提交form.on 内
var idPicUrls = [];
var imgs = $('#previewList').find('img') ;
imgs.each(function(idx, each){
idPicUrls.push($(each).attr('data-lePicUrl'))
})
if(idPicUrls.length == 0 ){
onion.layer.tipMsg('请添加图片');
return false;
}
```
### 动态获取下拉框选项
#### HTML 模板
```html
<select name="warehouseCode" id="warehouseList"></select>
```
#### JS 模板
在获取所需数据成功后,**使用html()赋值, 但是要记得使用form.render()重新渲染表单**
```javascript
var warehouseSelectStr = '<option value="">请选择仓库</option>'
for (var key in res.data) {
warehouseSelectStr += '<option value="'
+ res.data[key].code + '">'
+ res.data[key].name + '</option>'
}
$('#warehouseList').html(warehouseSelectStr)
form.render('select')
```
### 可搜索下拉框
#### HTML模板
需要引入组件
```html
<link rel="stylesheet" href="../../../../css/formSelects-v4.css" media="all" />
<script type="text/javascript" src="../../../js/formSelects-v4.js"></script>
```
HTML 代码, 以搜索权限为例
```html
<div class="layui-col-xs12 layui-col-sm6 pt10 linb-fa linf-fa pb10 pl15 pr15">
<label class="layui-form-label labeltxt g9">
权限：
</label>
<div class="layui-input-block">
<select id="authlist" xm-select="authlist" xm-select-search="" xm-select- direction="down" xm-select-search-type="dl">
</select>
</div>
</div>
```
#### JS 代码
##### 需要先引入必要的依赖, 以及数据初始化
```javascript
var formSelects = layui.formSelects;
formSelects.render('authlist');
```
##### 获取数据
```javascript
function getRoleList(callback){
onion.ajax.get('/system/user/find_role', function (res) {
callback && callback(res);
})
}
```
##### 调用函数
```javascript
getRoleList(function (res) {
if(res.code ==onion.networkState.SUCC){
var arr = res.data;
var str = '';
for(var i = 0; i < arr.length; i++){
// 拼接html
str += '<option value="'+arr[i].sysRoleId+'">'+ arr[i].sysRoleName +'</option>'
}
$('#authlist').html(str); // 写入页面
formSelects.render('authlist'); // 再次重新渲染数据
});
```
##### 数据回显
重新渲染 HTML 后, 调用接口, 在获取数据后使用 value() 方法给组件赋值
```javascript
// result.sysRoleIds为接口返回的对应数据
formSelects.value('authlist', result.sysRoleIds);
```
[相关文档见](https://hnzzmsf.github.io/example/example_v4.html)
### 表单检验
使用在需要 `仅输入数字` 等场景
```html
<input type="text" name="memberId" placeholder="" lay-verify="nonNumber">
```
可在 `form.verify` 里面写方法进行判断, **不要在标签内直接写正则表达式**
```JavaScript
form.verify({
nonNumber: function (value, item) {
if (!onion.help.isEmpty(value)
&& !new RegExp("^[0-9]*$").test(value)) {
return '只能填写整数';
}
}
});
```
[相关文档见](https://www.layui.com/doc/modules/form.html#verif)
### 选择区域按钮
```html
<div class="layui-input jew30 bg-f8 area flexbox je-align-center" onclick="onion.selectSection(this)">
请选择配送区域
</div>
<div class="pt8 pb8 g6 citys"> </div>
```
```JavaScript
onion.selectSection = function (that) {
var me = that;
}
```
#### 如果是修改, 则需要初始化配送区域列表, 取出后端传来的已有数据
```javascript
var cityIdArr = [];
var cityIdCurrent = [];
$(me).parent().find('span').each(function (t, v) {
cityIdCurrent.push($(v).attr('id'))
})
$('.citys').find('span').each(function (i, item) {
cityIdArr.push($(item).attr('id'))
})
for (var i = 0; i < cityIdArr.length; i++) {
for (var t = 0; t < cityIdCurrent.length; t++) {
if (cityIdArr[i] == cityIdCurrent[t]) {
cityIdArr.splice(i, 1)
}
}
}
```
#### 打开选择页面
```javascript
selectNodes = null
layer.open({
type: 2,
title: ['选择区域', "color:blue"],
area: ["40%", "70%"],
scrollbar: true,
maxmin: true,
btn: ["保存", "取消"],
content: ['./section.html?idArr=' + cityIdCurrent + '&cityId=' + cityIdArr],
yes: function (index, layero) {
// 触发子页面的保存方法
layero.find("iframe").contents().find("#save").trigger("click");
// selectNodes 由子页面赋值
var showSelectNode = selectNodes.filter(function (item) {
return item.parentId !== null
});
var result = '';
showSelectNode.forEach(function (item) {
// 拼接每一个城市标签的html
result += renderSingleSection(item);
});
// 渲染至标签
$(me).parent().find('.citys').html(result);
}
})
```
#### 在子页面中的保存方法
```javascript
$('#save').on('click', function () {
// 获取已选择的树节点
zTreeOnCheck()
selectedNode = nodes.map(function (item) {
return {
'id': item.id,
'name': item.name,
'parentId': item.parentId
}
});
parent.selectNodes = selectedNode; // 赋值给父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
})
```