# 关于“table“中更新传参回填form

雨点打透心脏的1/2处 2023-09-29 18:11 4阅读 0赞

## 关于"table"中更新传参回填form ##

#### 一、id查询数据库回填form ####

*  使用阶段：Javaweb/ssm/Springboot
 *  出现场景：jsp页面（el表达式）、thymeleaf页面（thymeleaf表达式，具体使用方法请前往百度）

思路：

点击table中某一行记录的更新按钮，把id传到服务器查询、服务器将查询到的信息、及页面，**通过el表达式或thymeleaf表达式回填form表单**，之后一起渲染（响应）给前端。

缺点：

技术落后，仅新手推荐。

案例1：

*  后端  
    ![在这里插入图片描述][f252e924508c446faf4e056714be31e7.png]
 *  前端使用el回填form表单  
    ![在这里插入图片描述][1266bf6d8c1b45d58cd87998287f1224.png]

案例2，采用ajax：js回填form  
![在这里插入图片描述][dee3a8ed925d44b7b4ac79b8c8e1f869.png]

#### 二、url传参回填form ####

*  传参  
    ![在这里插入图片描述][1dbd804918c44a06ae07d670d3e35ef2.png]
 *  接参，js回填form  
    ![在这里插入图片描述][705cab115a33465f981bb7aa00158ac8.png]

#### 三、json回填form ####

方案：采用js/jquery，将json回填form。

====================================

*  暂时用不上，自行百度

#### 四、框架自身提供传参方案 ####

*  优点：直接前端传参、无需向服务器发请求。推荐！！

###### layui传参回填方案 ######

*  table传参

*  编辑页面接参

// 属性lay-filter="editForm"   editForm，代表需要回填的form表单
    <div class="layui-form layuimini-form" lay-filter="editForm">
    
    </div>

//接参，加载数据
    form.getFormVal = function (rowdata) {
        
        //可以写其他业务请求。
        var data1 = JSON.parse(rowdata);
        // console.log(data1);
        // 数据回填
        form.val("editForm", data1);
    }

![在这里插入图片描述][9f50b76c0855437fb3233b001899d9ce.png]

###### bootstrap传参回填方案 ######

====================================

*  暂时用不上，自行百度/bootstrap官网文档

###### vue.js传参回填方案 ######

// table中点击更新or编辑

<el-table-column label="操作"  width="280" align="center">
      <template slot-scope="scope">
        <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
      </template>
    </el-table-column>

解析：

这里使用的是作用域slot（插槽），数据填充table的时候，table中的中的每一个字段、都会自动填充一个row，这个row包含了一整条记录的所有信息。

*  json解析成js对象，直接回填form。（vue.js的双向绑定优势）

handleEdit(row) {
        
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },

[f252e924508c446faf4e056714be31e7.png]: https://img-blog.csdnimg.cn/f252e924508c446faf4e056714be31e7.png
[1266bf6d8c1b45d58cd87998287f1224.png]: https://img-blog.csdnimg.cn/1266bf6d8c1b45d58cd87998287f1224.png
[dee3a8ed925d44b7b4ac79b8c8e1f869.png]: https://img-blog.csdnimg.cn/dee3a8ed925d44b7b4ac79b8c8e1f869.png
[1dbd804918c44a06ae07d670d3e35ef2.png]: https://img-blog.csdnimg.cn/1dbd804918c44a06ae07d670d3e35ef2.png
[705cab115a33465f981bb7aa00158ac8.png]: https://img-blog.csdnimg.cn/705cab115a33465f981bb7aa00158ac8.png
[9f50b76c0855437fb3233b001899d9ce.png]: https://img-blog.csdnimg.cn/9f50b76c0855437fb3233b001899d9ce.png