前端动态增加和删除输入框,后端怎么接收,及实现CRUD操作,easyui+ssm实现,数据库操作采用mybatis动态sql
时间: 2024-03-19 12:45:47 浏览: 70
前端动态增加和删除输入框的实现可以使用 jQuery 或者原生 JavaScript,通过 DOM 操作来实现。具体可以参考以下代码:
```
// 添加输入框
$("#addBtn").click(function() {
var inputHtml = '<input type="text" name="inputs[]" />';
$("#inputContainer").append(inputHtml);
});
// 删除输入框
$("#delBtn").click(function() {
$("#inputContainer input:last-child").remove();
});
```
其中,`#addBtn` 和 `#delBtn` 分别是添加和删除按钮的 ID,`#inputContainer` 是存放输入框的容器的 ID。
后端接收动态增加的输入框数据可以通过 Spring MVC 的 @RequestParam 注解来实现。具体代码如下:
```
@RequestMapping(value = "/submit", method = RequestMethod.POST)
public String submit(@RequestParam("inputs[]") List<String> inputs, Model model) {
// 处理数据
model.addAttribute("result", "success");
return "result";
}
```
其中 `@RequestParam("inputs[]")` 表示接收名为 `inputs[]` 的数组参数,对应前端动态增加的输入框的 name 属性。
实现 CRUD 操作可以使用 MyBatis 动态 SQL 实现。具体可以参考以下代码:
```
// 查询数据
List<Data> dataList = dataMapper.selectAll();
// 新增数据
Data data = new Data();
data.setName("test");
dataMapper.insert(data);
// 修改数据
Data data = dataMapper.selectById(1);
data.setName("test2");
dataMapper.update(data);
// 删除数据
dataMapper.deleteById(1);
```
其中,`Data` 是数据实体类,`dataMapper` 是对应的 Mapper 接口,可以使用 MyBatis Generator 自动生成。
在使用 MyBatis 动态 SQL 时,可以使用 `<if>` 标签来实现条件判断,例如:
```
<select id="selectByCondition" parameterType="map" resultMap="BaseResultMap">
select * from data
<where>
<if test="name != null">
and name = #{name}
</if>
<if test="status != null">
and status = #{status}
</if>
</where>
</select>
```
以上代码中,`<if>` 标签中的 test 属性表示条件判断表达式,如果为 true,则包含该条件;否则不包含该条件。这样就可以根据前端传递过来的条件来动态构建 SQL 语句,实现查询操作。其他操作也可以使用类似的方式实现。
阅读全文