js的form.reder()函数渲染table表格中的下拉框数据

妖狐艹你老母 2023-10-05 22:21 8阅读 0赞

**目录**

问题描述

form.reder()函数

简单介绍一下form.reder()

layui官网对于渲染页面的介绍

页面渲染

--------------------

## 问题描述 ##

在我的项目中遇到一个问题在table中添加输入框但是下拉输入框中没有我们的数据

**如图:**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

**看代码 :**

function add(data) {
        data.forEach((item, index) => {
            let a = index + 1
            $('.w100').append(
                "<tr>" +
                "<input type=\"hidden\" id=\"id\" name=\"id" + a + "\" style=\"text-align: center\"value=" + item.id + ">" +
                "<td colspan=" + 2 + "><input class='layui-input input-border' type=\"text\" id=\"personStatus" + a + "\" name=\"personStatus\" style=\"text-align: center;width:100%\" value=" + item.personStatus + "></td>" +
                "<<td colspan=" + 2 + "   style=\"width: 100px;height: 100px;  \">" +
                "                                         <select style='text-align:center' name=\"statusTime\" id=\"statusTime" + a + "\">\n" +
                "                                             <option id=\"in" + index + "\"  value=" + title + ">" + title + '年' + "</option>\n" +
                "                                             <option id=\"befor" + index + "\"   value=" + title + ">" + title + '年以前' + "</option>\n" +
                "                                          </select>" +
                "</td>" +
    "</tr>");
     });
    list = data;
    }

很明显这里我们的方法是用循环读取的方法写的但是在访问页面的时候输入框就没有数据

## form.reder()函数 ##

#### 简单介绍一下form.reder() ####

form.render(); //更新全部表单数据

select 刷新select选择框渲染

checkbox 刷新checkbox复选框（含开关）渲染

radio 刷新radio单选框框渲染

form.render(); //更新全部

form.render(‘select’); //刷新select选择框渲染

### layui官网对于渲染页面的介绍 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 页面渲染 ##

数据读取完成

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ec950a8d06c6464baa7f8cd333214eed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d55c1ded50a44586b75616a3cc246f2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/aae18f2038d74f26a706af3783f42d81.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16