精华内容
下载资源
问答
  • 表单回显
    2022-05-31 18:20:01

    一、利用initialValue(适用于初始化固定的值)

    Form 的 initialValues 与 Item 的 initialValue 区别?

    在大部分场景下,我们总是推荐优先使用 Form 的 initialValues。只有存在动态字段时你才应该使用 Item 的 initialValue。默认值遵循以下规则:

    1、Form 的 initialValues 拥有最高优先级

    2、Field 的 initialValue 次之 *. 多个同 name Item 都设置 initialValue 时,则 Item 的
    initialValue 不生效 被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或
    valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form
    接管,这会导致以下结果:

    	1、你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange), 但还是可以继续监听 onChange 事件。
    	2、你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
        3、你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。
    

    如果说我们需要回显某一条数据的动态值,需要使用下面的方式⬇️

    2 使用setFieldsValue

    setFieldsValue是form实例的一个方法,可以用来设置表单的值,其参数为k-v格式的对象,其中k对应form表单中的name,v表示你想设置的值。

    form.setFieldsValue({
    	userName:'shine',
    	passWord:'xxx'
    })
    
    更多相关内容
  • 表单回显

    2018-12-27 19:10:27
    点击用户信息修改的时候,我们希望该账号信息可以显示出来,给用户更好的使用体验 因此,点击用户信息修改时... //servlet层代码 protected void doGet(HttpServletRequest req, HttpServletResponse resp) thr...

    点击用户信息修改的时候,我们希望该账号信息可以显示出来,给用户更好的使用体验

    因此,点击用户信息修改时,我们先不跳转到modifyuserinfo.jsp,而是根据页面的账号id查找该用户信息,传到修改页面,如下:

    //servlet层代码
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    	req.setCharacterEncoding("UTF-8");
    	String id = req.getParameter("id");
    	List<User> userList = service.findUserById(id);
    	req.setAttribute("user", userList.get(0));
    	req.getRequestDispatcher("/modifyuserinfo.jsp").forward(req, resp);
    }

    modifyuserinfo.jsp

    <form action="${PageContext.request.contextPath }/bookStore/servlet/modifyUserInfoServlet?id=${user.id}" method="post" style="width: 50%;
    background-color: ghostwhite;border: double;">
    	<h1>修改信息</h1>
    	<table>
    		<tr>
    			<td >姓名</td>
    			<td><input type="text" name="name" value="${user.name }"/></td>
    		</tr>
    		<tr>
    			<td >会员邮箱</td>
    			<td><input type="text" name="mailBox" value="${user.mailBox }"/></td>
    		</tr>
    		<tr>
    			<td >年龄</td>
    			<td><input type="text" name="age" value="${user.age }"/></td>
    		</tr>
    		<tr>
    			<td >密码</td>
    			<td><input type="password" name="password" value="${user.password }"/></td>
    		</tr>
    		<tr>
    			<td >重复密码</td>
    			<td><input type="password" name="repeatpassword" value="${user.password }"/></td>
    		</tr>
    		<tr>
    			<td >性别</td>
    			<td>
    				男<input name="sex" type="radio" value="male" ${user.sex.equals('male')? "checked='checked'":"''"}/>
    				女<input name="sex" type="radio" value="female"/>
    			</td>
    		</tr>
    		<tr>
    			<td >联系电话</td>
    			<td><input type="text" name="tel" value="${user.tel }"/></td>
    		</tr>
    		<tr>
    			<td >个人介绍</td>
    			<td ><textarea cols="22" rows="3" name="intro">${user.intro }</textarea></td>
    		</tr>
    	</table>
    	<hr/>
    	<input type="submit" value="提交"><br><br>
    </form>

    servlet传来的user,可直接用el表达式${user.id }显示

    展开全文
  • antdv动态表单回显

    千次阅读 2021-08-09 17:22:22
    本文介绍Ant Design of Vue 的动态表单回显。 比如新增时添加了两行动态表单,在第二次编辑时需要进行回显。 下面是表单的HTML代码 <a-row :gutter='20' v-for="(k, index) in form.getFieldValue('keys')" ...

    在项目中经常遇到动态表单的业务。在编辑动态表单时需要回显新增后的内容。本文介绍Ant Design of Vue 的动态表单回显。

    在这里插入图片描述
    比如新增时添加了两行动态表单,在第二次编辑时需要进行回显。
    下面是表单的HTML代码

          <a-row
            :gutter='20'
            v-for="(k, index) in form.getFieldValue('keys')"
            :key="k"
            v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
            :label="index === 0 ? 'Passengers' : ''"
            :required="false"
          >
            <a-col :span='1'></a-col>
            <a-col :span="11">
              <a-form-item v-bind="formItemLayout" label="参数名称">
                <a-input
                  v-decorator="[
                    `param[${k}]`,
                    {
                      validateTrigger: ['change', 'blur'],
                      initialValue: account && account.param,
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入参数名称',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item v-bind="formItemLayout" label="参数描述">
                <a-input
                  v-decorator="[
                    `paramDescription[${k}]`,
                    {
                      validateTrigger: ['change', 'blur'],
                      initialValue: account && account.paramDescription,
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入参数描述',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span='1'>
              <a-icon
                v-if="form.getFieldValue('keys').length > 1"
                class="dynamic-delete-button"
                type="minus-circle-o"
                :disabled="form.getFieldValue('keys').length === 1"
                @click="() => remove(k)"
              />
            </a-col>
          </a-row>
          <a-row :gutter='20'>
            <a-col :span="24">
              <a-form-item v-bind="formItemLayoutWithOutLabel">
                <a-button type="dashed" style="width: 90%" @click="add">
                  <a-icon type="plus" /> 添加参数
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
    

    表单编辑的回显逻辑,通过setFieldsValue进行回显

      beforeCreate () {
        this.form = this.$form.createForm(this)
        // this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true })
      },
      watch: {
        async visible (val) {
          if (this.account) {
            this.form.getFieldDecorator('keys', { initialValue: this.keys, preserve: true })
            let params = {
              indexOrder: 'ASC',
              indexOrderKey: 'id',
              currentPage: 0,
              numberPerPage: 10
            }
            const res = await getAbilityParams(this.account.id, params)
            if (res.success) {
              let data = res.data.rows
              let param = []
              let paramDescription = []
              this.keys = []
              data.forEach((item, index) => {
                this.keys.push(index)
                param.push(item.param)
                paramDescription.push(item.description)
              })
              this.form.setFieldsValue({
                keys: this.keys
              })
              this.$nextTick(() => {
                this.form.setFieldsValue({
                  param: param,
                  paramDescription: paramDescription
                })
              })
            } else {
              this.$message.error(res.desc)
            }
          } else {
            this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true })
          }
        }
      },
    

    添加一行和删除一行逻辑

        remove (k) {
          const { form } = this
          const keys = form.getFieldValue('keys')
          if (keys.length === 1) {
            return
          }
          form.setFieldsValue({
            keys: keys.filter(key => key !== k)
          })
        },
        // 动态项增加
        add () {
          const { form } = this
          const keys = form.getFieldValue('keys')
          let length = keys.length
          const nextKeys = keys.concat(keys[length - 1] + 1)
          form.setFieldsValue({
            keys: nextKeys
          })
        }
    

    打开编辑模态框后。新增的数据会回显,同时可以进行删除和添加一行的操作,下面是打开编辑的模态框,参数名称和参数描述完成了回显。
    在这里插入图片描述

    展开全文
  • JSP的表单回显实现

    千次阅读 2022-04-26 14:28:58
    于是查找一些资料后自己用以下代码实现了表单回显功能,不一定是最简洁的实现,如果有需要改进的欢迎各位评论赐教~ 什么是表单回显 所谓“表单回显”就是说在进入一个新界面时,会将后端已有的数据显示到界面上。...

    起源

    在要实现管理员对学员的修改时,点击“修改”进入修改界面后,修改界面中如果和注册界面就需要让用户把不需要修改的信息也重新再写一遍,很麻烦也很容易出错,因此就思考能否在进入界面之后就显示已注册全部信息,这样就只需要修改用户想要修改的界面就可以了。于是查找一些资料后自己用以下代码实现了表单回显功能,不一定是最简洁的实现,如果有需要改进的欢迎各位评论赐教~

    什么是表单回显

    所谓“表单回显”就是说在进入一个新界面时,会将后端已有的数据显示到界面上。比如需要修改用户信息时,点击修改按钮后跳转到修改界面,修改界面中的用户信息会显示在界面上,这个就是表单回显

    实现表单回显思想

    点击功能按键后–>获取对应用户的信息返回给后端(增设一个转发servlet)–>转发servlet中将获取到的用户数据封装之后转发到功能界面–>功能界面中获取转发而来的数据后显示从而实现回显功能
    (删除线中太麻烦了~受到自己是根据姓名查询的影响,没有想到可以直接用学号查询当前学生得到所有信息,之后在修改表单界面直接显示即可)
    点击功能按键后–>将当前要修改的学生学号作为信息(url中一部分)交给一个转发servlet–>转发servlet中将获取到的学号转发到功能界面(如update.jsp)–>update.jsp中通过service层对象调用dao层中根据学号查询学生的方法–>查询到学生,将学生各部分信息分别对应显示到表单中即可实现表单回显功能
    之所以想到可以直接在jsp中搜索学员后直接显示是因为当后面要在修改之后转发回update.jsp页面会导致出现空指针异常,原因在于之前为了回显的request.getAttribute()会“失效”从而为null。而且采用直接搜索回显的方式,相比最开始的方式,也可以在修改之后马上就能在修改界面看到修改之后的结果,而不是停留在修改之前的信息

    具体实现jsp直接查询回显版

    修改功能按键所在界面
    在这里插入图片描述

    <%@ page import="com.lagou.bean.Manager" %>
    <%@ page import="com.lagou.service.ManagerService" %>
    <%@ page import="com.lagou.bean.Student" %>
    <%@ page import="java.util.Set" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ page errorPage="error.jsp" %>
    <html>
    <head>
        <title>管理员界面</title>
        <link rel="stylesheet" href="./WebContent/css/bootstrap.min.css">
    
        <script>
            function deleteConfirm(sNum) {
                console.log(sNum);
                if (window.confirm("确定要删除吗?")) {
                    location.href="deleteStu?sNum=" + sNum;
                }
            }
        </script>
    </head>
    <body>
    <h1 align="center">登录成功,欢迎<%= ((Manager)session.getAttribute("manager")).getUsername() %>使用学生管理系统</h1>
    <%
        //获取当前登录的管理员id
        int mid = ((Manager) session.getAttribute("manager")).getMid();
        //登录成功之后该管理员信息将是在整个服务器上所有用户(servlet)之间共享
        application.setAttribute("mid", mid);
    %>
    <div style="float: left">
        <form action="search", method="get">
            <div align="center">
                请输入要查询的学生姓名:<input type="text" name="username">
                <input type="submit" value="查询" class="btn btn-primary">
            </div>
        </form>
    </div>
    
    <div style="float: left">
        &nbsp; &nbsp;
        <a href="insert.jsp"><button class="btn btn-success">添加</button></a>
    </div>
    
    <table class="table table-hover table-responsive">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%
                //获取管理员的id并发送给servlet
                ManagerService managerService = new ManagerService();
                //执行查询全部学生
                Set<Student> studentsAll = managerService.searchAllStudent(mid);
    //            System.out.println("studentsAll:" + studentsAll);
                //执行根据姓名查询学生
                Set<Student> students = (Set<Student>) request.getAttribute("students");
                System.out.println(students);
                //判断是否为搜索单个学生
                if (students != null) {
                    for (Student s : students) {
                        out.print("<tr>" + "<td>" + s.getsNum() + "</td>" +
                                "<td>" + s.getStuName() + "</td>" +
                                "<td>" + s.getGender() + "</td>" +
                                "<td>" + s.getBirthday() + "</td>" +
                                "<td>" + s.getEmail() + "</td>" +
                                "<td>" + s.getRemark() + "</td>" +
                                "<td>" +
                                "<a href=\"updateTransfer?sNum=" + s.getsNum()  //就是这边直接传学号到转发servlet即可
                                + "\" class=\"btn btn-warning\">修改</a> &nbsp; &nbsp;" +
                                "<a class=\"btn btn-danger\"  οnclick=\"deleteConfirm(" + s.getsNum() +")\">删除</a>" +
                                "</td>" +
                                "</tr>");
                    }
                } else {
                    for (Student s : studentsAll) {
                        out.print("<tr>" + "<td>" + s.getsNum() + "</td>" +
                                "<td>" + s.getStuName() + "</td>" +
                                "<td>" + s.getGender() + "</td>" +
                                "<td>" + s.getBirthday() + "</td>" +
                                "<td>" + s.getEmail() + "</td>" +
                                "<td>" + s.getRemark() + "</td>" +
                                "<td>" +
                                "<a href=\"updateTransfer?sNum=" + s.getsNum()  //就是这边直接传学号到转发servlet即可
                                + "\" class=\"btn btn-warning\">修改</a> &nbsp; &nbsp;" +
                                "<a class=\"btn btn-danger\" οnclick=\"deleteConfirm(" + s.getsNum() + ")\">删除</a>" +
                                "</td>" +
                                "</tr>");
                    }
                }
            %>
        </tbody>
    </table>
    </body>
    </html>
    

    点击对应学员修改按键后,跳转到一个转发servlet

    package com.lagou.servlet;
    
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet(name = "UpdateTransferServlet", urlPatterns = "/updateTransfer")
    public class UpdateTransferServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        }
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1、获取前端传来的学号(只获取学号转发即可以根据学号查询学员信息)
            int sNum = Integer.parseInt(request.getParameter("sNum"));
            System.out.println("前端传来的学号:" + sNum);
            request.getSession().setAttribute("sNum", sNum);
            //2、转发到修改学员jsp
            RequestDispatcher requestDispatcher = request.getRequestDispatcher("update.jsp");
            requestDispatcher.forward(request, response);
        }
    }
    

    跳转到update.jsp界面,update.jsp界面中获取学员数据信息,实现回显功能
    在这里插入图片描述

    <%@ page import="com.lagou.bean.Student" %>
    <%@ page import="java.util.Date" %>
    <%@ page import="java.text.SimpleDateFormat" %>
    <%@ page import="com.lagou.dao.ManagerDao" %>
    <%@ page import="com.lagou.service.ManagerService" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>修改学员信息主页</title>
        <link rel="stylesheet" href="./WebContent/css/bootstrap.min.css">
        <script src="./WebContent/js/jquery-3.4.1.min.js"></script>
    </head>
    <body style="padding: 100px">
    <h1 align="center">请输入要修改的学员信息</h1>
    <h2 align="center" style="color: red">
        <%
        String updateResult = ((String)request.getAttribute("updateResult"));
        System.out.println("updateResult:" + updateResult);
        if (updateResult == null) {
            out.print("");
        } else {
            out.print(updateResult);
        }
    %>
    </h2>
    <%
    	//这里根据学号查询学员信息是为了实现回显功能!!!
        //1、从转发得到学号
        int sNum = (int) request.getSession().getAttribute("sNum");
        //2、调用dao层方法查询学生
        ManagerService managerService = new ManagerService();
        Student student = managerService.searchStuByNum(sNum);
        //之后就在表单中显示学生student对象中对应内容实现表单回显功能
    %>
    <form action="updateStu" method="get">
        <div class="form-group" style="align-content: center; width: 30%">
            <label>姓名</label>
            <input type="text" name="stuName" class="form-control" placeholder="请输入姓名" value="<%= student.getStuName() %>" required="required">
        </div>
        <div class="form-group" style="align-content: center">
            <label>性别</label><br>
            <input type="radio" name="gender" value="男" <%if(student.getGender().equals("男")) {%> checked="checked" <%}%> required="required"><input type="radio" name="gender" value="女" <%if(student.getGender().equals("女")) {%> checked="checked" <%}%>></div>
        <div class="form-group" style="align-content: center">
            <label>出生日期</label><br>
            <%--注意:date类型的input要想显示出来,格式必须是yyyy-MM-dd,就连2019-4-1这样都不行,必须是2019-04-01,否则没有效果--%>
            <%
                Date birth = student.getBirthday();
                //将Date类型转换为String类型就可以变成yyyy-MM-dd的格式
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                String birthday = sdf.format(birth);
                System.out.println("update.jsp中转换后的生日:" + birthday);
            %>
            <input type="date" id="date" name="birthday" placeholder="请输入出生日期" value="<%= birthday %>" required="required">
        </div>
        <div class="form-group" style="align-content: center">
            <label>邮箱</label><br>
            <input type="email" name="email" placeholder="请输入邮箱" value="<%= student.getEmail() %>" required="required">
        </div>
        <div class="form-group" style="align-content: center">
            <label>备注</label><br>
            <textarea name="remark" placeholder="请输入备注" cols="30" rows="5"><%= student.getRemark() %></textarea>
        </div>
        <input type="reset" class="btn btn-danger" value="重置">
        <input type="submit" class="btn btn-success" value="提交">
    </form>
    
    </body>
    </html>
    

    之后就是表单提交数据到后端进行更新修改,修改结束将修改结果在表单界面显示出来

    package com.lagou.servlet;
    
    import com.lagou.bean.Student;
    import com.lagou.service.ManagerService;
    
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    @WebServlet(name = "UpdateStuServlet", urlPatterns = "/updateStu")
    public class UpdateStuServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        }
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1、获取UpdateTransferServlet设置好的学号以及前端传送来的信息
            int sNum = (int) request.getSession().getAttribute("sNum");
            System.out.println("获取到的学号:" + sNum);
            String stuName = request.getParameter("stuName");
            System.out.println("修改后的姓名:" + stuName);
            String gender = request.getParameter("gender");
            System.out.println("修改后的性别:" + gender);
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            Date birthday = null;
            try {
                birthday = sdf.parse(request.getParameter("birthday"));
            } catch (ParseException e) {
                e.printStackTrace();
            }
            System.out.println("修改后的生日:" + birthday);
            String email = request.getParameter("email");
            System.out.println("修改后的邮箱:" + email);
            String remark = request.getParameter("remark");
            System.out.println("修改后的备注:" + remark);
            //2、将获取到的数据封装
            Student student = new Student(sNum, stuName, gender, birthday, email, remark);
            //3、创建ManagerService类对象并调用方法实现更新操作
            ManagerService managerService = new ManagerService();
            boolean b = managerService.updateStudent(student);
            if (b) {
                System.out.println("更新成功!");
                request.setAttribute("updateResult", "更新成功,请点击<a href=\"main.jsp\" class=\"btn btn-primary\">返回主界面</a>");
                RequestDispatcher requestDispatcher = request.getRequestDispatcher("update.jsp");
                requestDispatcher.forward(request, response);
            } else {
                System.out.println("更新失败!");
                request.setAttribute("updateResult", "更新失败,请重新输入");
                RequestDispatcher requestDispatcher = request.getRequestDispatcher("update.jsp");
                requestDispatcher.forward(request, response);
            }
        }
    }
    

    -------------------------------我是分割线-------------------------------------------------------------------------------------------------------

    具体实现原始版(以修改用户信息功能为例)

    修改功能按键所在界面
    在这里插入图片描述

    <%@ page import="com.lagou.bean.Manager" %>
    <%@ page import="com.lagou.service.ManagerService" %>
    <%@ page import="com.lagou.bean.Student" %>
    <%@ page import="java.util.Set" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ page errorPage="error.jsp" %>
    <html>
    <head>
        <title>管理员界面</title>
        <link rel="stylesheet" href="./WebContent/css/bootstrap.min.css">
    </head>
    <body>
    <h1 align="center">登录成功,欢迎<%= ((Manager)session.getAttribute("manager")).getUsername() %>使用学生管理系统</h1>
    <%
        //获取当前登录的管理员id
        int mid = ((Manager) session.getAttribute("manager")).getMid();
        //登录成功之后该管理员信息将是在整个服务器上所有用户(servlet)之间共享
        application.setAttribute("mid", mid);
    %>
    <div style="float: left">
        <form action="search", method="get">
            <div align="center">
                请输入要查询的学生姓名:<input type="text" name="username">
                <input type="submit" value="查询" class="btn btn-primary">
            </div>
        </form>
    </div>
    
    <div style="float: left">
        &nbsp; &nbsp;
        <a href="insert.jsp"><button class="btn btn-success">添加</button></a>
    </div>
    
    <table class="table table-hover table-responsive">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%
                //获取管理员的id并发送给servlet
                ManagerService managerService = new ManagerService();
                //执行查询全部学生
                Set<Student> studentsAll = managerService.searchAllStudent(mid);
    //            System.out.println("studentsAll:" + studentsAll);
                //执行根据姓名查询学生
                Set<Student> students = (Set<Student>) request.getAttribute("students");
                System.out.println(students);
                //判断是否为搜索单个学生
                if (students != null) {
                    for (Student s : students) {
                        out.print("<tr>" + "<td>" + s.getsNum() + "</td>" +
                                "<td>" + s.getStuName() + "</td>" +
                                "<td>" + s.getGender() + "</td>" +
                                "<td>" + s.getBirthday() + "</td>" +
                                "<td>" + s.getEmail() + "</td>" +
                                "<td>" + s.getRemark() + "</td>" +
                                "<td>" +
                                "<a href=\"updateTransfer?sNum="
                                + s.getsNum() + "&stuName=" + s.getStuName() + "&gender=" + s.getGender() + "&birthday=" + s.getBirthday()
                                + "&email=" + s.getEmail() + "&remark=" + s.getRemark()
                                + "\" class=\"btn btn-warning\">修改</a> &nbsp; &nbsp;" +
                                "<a href=\"deleteStu?sNum=" + s.getsNum() + "\" class=\"btn btn-danger\">删除</a>" +
                                "</td>" +
                                "</tr>");
                    }
                } else {
                    for (Student s : studentsAll) {
                        out.print("<tr>" + "<td>" + s.getsNum() + "</td>" +
                                "<td>" + s.getStuName() + "</td>" +
                                "<td>" + s.getGender() + "</td>" +
                                "<td>" + s.getBirthday() + "</td>" +
                                "<td>" + s.getEmail() + "</td>" +
                                "<td>" + s.getRemark() + "</td>" +
                                "<td>" +
                                "<a href=\"updateTransfer?sNum="
                                + s.getsNum() + "&stuName=" + s.getStuName() + "&gender=" + s.getGender() + "&birthday=" + s.getBirthday()
                                + "&email=" + s.getEmail() + "&remark=" + s.getRemark()
                                + "\" class=\"btn btn-warning\">修改</a> &nbsp; &nbsp;" +
                                "<a href=\"deleteStu?sNum=" + s.getsNum() + "\" class=\"btn btn-danger\">删除</a>" +
                                "</td>" +
                                "</tr>");
                    }
                }
            %>
        </tbody>
    </table>
    </body>
    </html>
    

    点击对应学员修改按键后,跳转到一个转发servlet

    "<a href=\"updateTransfer?sNum="
    + s.getsNum() + "&stuName=" + s.getStuName() + "&gender=" + s.getGender() + "&birthday=" + s.getBirthday()
    + "&email=" + s.getEmail() + "&remark=" + s.getRemark()
    + "\" class=\"btn btn-warning\">修改</a>
    

    转发servlet代码

    import com.lagou.bean.Student;
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    @WebServlet(name = "UpdateTransferServlet", urlPatterns = "/updateTransfer")
    public class UpdateTransferServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        }
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1、获取前端传来的学号
            int sNum = Integer.parseInt(request.getParameter("sNum"));
            System.out.println("前端传来的学号:" + sNum);
            String stuName = request.getParameter("stuName");
            System.out.println("前端传来的姓名:" + stuName);
            String gender = request.getParameter("gender");
            System.out.println("前端传来的性别:" + gender);
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            Date birthday = null;
            try {
                birthday = sdf.parse(request.getParameter("birthday"));
            } catch (ParseException e) {
                e.printStackTrace();
            }
            System.out.println("前端传来的生日:" + birthday);
            String email = request.getParameter("email");
            System.out.println("前端传来的邮箱:" + email);
            String remark = request.getParameter("remark");
            System.out.println("前端传来的备注:" + remark);
            //2、将信息封装到对象中
            Student student = new Student(sNum, stuName, gender, birthday, email, remark);
            //2、转发到修改学员jsp
            request.setAttribute("student", student);
            RequestDispatcher requestDispatcher = request.getRequestDispatcher("update.jsp");
            requestDispatcher.forward(request, response);
        }
    }
    

    跳转到update.jsp界面,update.jsp界面中获取学员数据信息,实现回显功能
    在这里插入图片描述

    <%@ page import="com.lagou.bean.Student" %>
    <%@ page import="java.util.Date" %>
    <%@ page import="java.text.SimpleDateFormat" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>修改学员信息主页</title>
        <link rel="stylesheet" href="./WebContent/css/bootstrap.min.css">
        <script src="./WebContent/js/jquery-3.4.1.min.js"></script>
    </head>
    <body style="padding: 100px">
    <h1 align="center">请输入修改后的学员信息</h1>
    <form action="updateStu" method="get">
        <%
            int sNum = ((Student) request.getAttribute("student")).getsNum();
            request.setAttribute("sNum", sNum);
        %>
        <div class="form-group" style="align-content: center; width: 30%">
            <label>姓名</label>
            <input type="text" name="stuName" class="form-control" placeholder="请输入姓名" value="<%= ((Student)request.getAttribute("student")).getStuName() %>">
        </div>
        <div class="form-group" style="align-content: center">
            <label>性别</label><br>
            <%
                //获取当前学员的性别后在对应性别选项上设置checked
                String gender = ((Student) request.getAttribute("student")).getGender();
                System.out.println("update.jsp中的性别:" + gender);
            %>
            <input type="radio" name="gender" value="男" <%if(gender.equals("男")) {%> checked="checked" <%}%> ><input type="radio" name="gender" value="女" <%if(gender.equals("女")) {%> checked="checked" <%}%>></div>
        <div class="form-group" style="align-content: center">
            <label>出生日期</label><br>
            <%--注意:date类型的input要想显示出来,格式必须是yyyy-MM-dd,就连2019-4-1这样都不行,必须是2019-04-01,否则没有效果--%>
            <%
                Date birth = ((Student) request.getAttribute("student")).getBirthday();
                //将Date类型转换为String类型就可以变成yyyy-MM-dd的格式
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                String birthday = sdf.format(birth);
                System.out.println("update.jsp中转换后的生日:" + birthday);
            %>
            <input type="date" id="date" name="birthday" placeholder="请输入出生日期" value="<%= birthday %>">
        </div>
        <div class="form-group" style="align-content: center">
            <label>邮箱</label><br>
            <input type="email" name="email" placeholder="请输入邮箱" value="<%= ((Student)request.getAttribute("student")).getEmail() %>">
        </div>
        <div class="form-group" style="align-content: center">
            <label>备注</label><br>
            <textarea name="remark" placeholder="请输入备注" cols="30" rows="5"><%= ((Student)request.getAttribute("student")).getRemark() %></textarea>
        </div>
        <input type="reset" class="btn btn-danger" value="重置">
        <input type="submit" class="btn btn-success" value="提交">
    </form>
    </body>
    </html>
    

    之后就是表单提交数据到后端进行更新修改,略

    实现过程一些注意点

    • 主要要注意一下表单回显获取数据时不同类型的input怎么显示数据的问题
      1. type为text、email、password等文本类标签直接将获取到的数据放入value属性中即可
      2. type为radio、checkbox或者<select>标签等选择样式:要结合判断语句对获取数据进行判断,根据获取数据的值设置对应选项为选中效果。如:
    <div class="form-group" style="align-content: center">
            <label>性别</label><br>
            <%
                //获取当前学员的性别后在对应性别选项上设置checked
                String gender = ((Student) request.getAttribute("student")).getGender();
                System.out.println("update.jsp中的性别:" + gender);
            %>
            <input type="radio" name="gender" value="男" <%if(gender.equals("男")) {%> checked="checked" <%}%> ><input type="radio" name="gender" value="女" <%if(gender.equals("女")) {%> checked="checked" <%}%>></div>
    

    3.type为date:一定要注意格式

    date类型的input要想显示出来,格式必须是yyyy-MM-dd,就连2019-4-1这样都不行,必须是2019-04-01,否则没有效果

    所以必须要将获取到的数据转为yyyy-MM-dd格式才行。如:

    <div class="form-group" style="align-content: center">
            <label>出生日期</label><br>
            <%--注意:date类型的input要想显示出来,格式必须是yyyy-MM-dd,就连2019-4-1这样都不行,必须是2019-04-01,否则没有效果--%>
            <%
                Date birth = ((Student) request.getAttribute("student")).getBirthday();
                //将Date类型转换为String类型就可以变成yyyy-MM-dd的格式
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                String birthday = sdf.format(birth);
                System.out.println("update.jsp中转换后的生日:" + birthday);
            %>
            <input type="date" id="date" name="birthday" placeholder="请输入出生日期" value="<%= birthday %>">
    </div>
    
    展开全文
  • select,radio 表单回显避免使用jquery载入赋值 注意事项: 代码如下: <html> <body> <form method=”post” action=””> <!– 如果表单中使用重置功能时,不推荐使用如下代码 –> <input ...
  • 在弹窗里显示一个表单,并进行回显,涉及到的组件有,简单的input框,inputNumber框,select,此处前端懒得让后端写接口点击自己获取到form表单里的数据,方法也不难 在链接处添加点击事件 代码如下(简单记录) ...
  • //回显头像 model.addAttribute("headImg", request.getContextPath() // +"/"+dirs+"/"+user.getHeadImg()); } model.addAttribute("headImgExist",headImgExist); } return "editUI"; } 3.回显页面 ;charset=UTF-...
  • LayUI编辑表单回显简单实现

    千次阅读 2021-05-16 22:56:44
    LayUI编辑表单回显简单实现 在网上看了好多文章实现的都太复杂,在b站看视频发现一个简单的实现方法。 LayUI官网文档说明 事件监听的时候其实控制台是拿到数据的,所以我们只要根据lay-filter属性输出就行。 监听...
  • 这次我们就来完成表单回显的功能。 修改所有.html为.jsp 只有把静态页面改为动态页面,才能完成表单回显的功能,因此第一步我们先将所有 .html 页面 改为 .jsp 页面。 将 .html 页面改为 .jsp 页面只需要如下两个...
  • jsp 表单回显

    2019-10-06 15:11:19
    1、在表单各个字段中添加value属性,如:value="${user.reloginpass }" 2、在表单提交对应的servlet中封装数据到uer中,如:req....//为了回显; 转载于:https://www.cnblogs.com/amibandoufu/p/5066148.html...
  • 1.信息回显 回显就是计算机能够返回已经注册好的信息,在只修改已经注册好的信息,其他依旧保持不变输出 客户端: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&...
  • 再看看这条数据的结构和回显的方法 是不是感觉没啥子问题? 当我对row.userTime打印两次发现,第一次有值,第二次没有了,而关掉弹框的时候我对this.ruleForm.useTime进行了初始化,导致这个值被清除了。这就涉及到...
  • Struts2表单回显

    2018-12-26 20:20:09
    struts2表单回显 问题提出:Struts2是如何帮助我们进行表单回显的? 问题解决: 首先写一个简单的测试程序 1)JSP页面主要内容如下(JSP页面名称为form-tag.jsp): &lt;s:debug&gt;&lt;/s:debug&...
  • 今天小编就为大家分享一篇vue组件表单数据回显验证及提交的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue表单回显上一次数据问题.表单缓存问题。深拷贝的使用方法
  • JavaWeb中实现表单回显

    2022-04-01 18:31:38
    实现表单回显 需求: 当用户输入用户名称和密码错误之后,还是返回到这个页面,同时上面需要提示用户信息,提示用户是什么原因导致登录失败,提示信息。 登录失败之后用户名称的输入框里面仍然保留上次输入的信息。 ...
  • js中表单回显

    千次阅读 2019-06-01 16:41:36
    以下是关于js中表单回显的代码,涉及普通input标签,单选框,多选框,下拉框的回显操作: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...
  • thymeleaf表单回显数据

    千次阅读 2019-11-14 07:11:52
    input标签要用th:value,而textarea标签要用th:text来实现
  • 文章目录第三阶段(对第一第二阶段的代码进行优化)把HTML页面jsp动态化抽取页面中相同的内容动态显示登陆失败时的错误信息登陆失败页面设置注册...工具类第四阶段(使用EL修改修改表单回显)修改登陆页面修改注册页面...
  • 前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一、问题截图二、代码展示编辑按钮@click...
  • elementui 表单回显表格selection选中项

    千次阅读 2021-12-20 15:43:51
    表单编辑功能,根据选中的数据项的id回显选中的项 需要处理的问题: 1.根据编辑数据的id,找到对应项,添加上选中状态 获取列表数据里: if (this.$parent.dialogFormStatus === "update" ) { let target= this....
  • js实现form表单自动回显功能
  • form标签简介 srpingmvc中的form标签只是restful...就是所谓的回显功能。 使用步骤 1、引入标签库(在JSP中): <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 2、网页显示...
  • JSON重新格式化之前Form Generator自定义表单生成组件的表单回显介绍新的改变其他功能项目链接 介绍 Form Generator JSON格式重写前的自定义表单回显组件,适配JSON格式还为更新前的框架数据 开发时遇到一个情况,...
  • 通过Model方式 如果使用对象去接收客户端传来的数据,那么对象默认会被自动放到model中,在前端页面可以直接使用对象中的数据。 @ModelAttribute(“stu”)是给这个需要回传的对象取别名,如果不使用,则以该对象名...
  • 遇到个坑,使用vant的表单组件van-form,回显之后,发现无法在输入框定义文字 解决方案:必须在data中定义的表单所绑定的modal(不可以吧modal定义成{}) 一.template中引入 <van-field v-model="formData....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,862
精华内容 8,744
关键字:

表单回显