数据回显
## render
### 1. 功能
在表单中回显后台得来的数据
### 2. 使用场景
修改数据时使用
### 3. 如何使用
#### 3.1 基本使用
```js
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 {}
})
}
```
#### 3.2 回显下拉菜单
```js
//请求数据，渲染下拉框
onion.ajax.post(url, submitData, function(res) {
var data= res.data
var html = '<option value="">请选择</option>';
data.forEach(function(item) {
html1 += '<option value="' + item.id + '">' + item.name + '</option>'
})
$('select[name="selectName"]').append(html );
// 记得要重新渲染表单
form.render('select');
})
```
#### 3.3 可搜索下拉菜单
##### 3.3.1 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>
```
##### 3.3.2 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)
#### 3.4 选择区域按钮
##### 3.4.1 代码模板
```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)
}
}
}
```
##### 3.4.2 打开选择页面
```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);
}
})
```
##### 3.4.3 在子页面中的保存方法
```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);
})
```
### 4. api定义
``` javascript
onion.api = function(){
}
```