自定义forEach标签&&select标签实现回显数据

本文介绍了如何自定义JSP标签`forEach`和`select`,通过创建标签类,配置TLD文件,并进行实际测试,实现数据遍历和选择框的便捷使用。文章详细讲解了每个步骤,简化了原本需要多行代码实现的功能。
摘要由CSDN通过智能技术生成

目录

一、前言

二、自定义forEach标签

三、自定义可遍历数据的select标签


一、前言

1.1 前言:

上上次文章我们一起探索了如何自定义Jsp标签,并且还一起实践了if、set以及out标签的制作;

而相信对于看了上上篇文章的伙伴们对于自定义标签已经是有了一些的了解跟实践,而Leaf今天这篇文章也就是想接着和大家一起来自定义两个标签:forEach&select,逐渐学会了自定义标签并且融洽实践后会对我们以后的开发中带来不小的帮助,可以节约不少的开发时间,好了,话不多说,开展我们的代码探索之旅吧!        


二、自定义forEah标签 

2.1 建立ForEachTag标签类,继承BodyTagSupport类

package com.leaf.tag;

import javax.servlet.jsp.tagext.BodyTagSupport;

/**
 * ForEach标签
 * @author Leaf
 *
 * 2022年6月21日 上午8:37:51
 */
public class ForEachTag extends BodyTagSupport {
    
}

2.2 分析ForEachTag标签的属性

/**
 * ForEach标签
 * <c:forEach items="${stus }" var="s">
 * 分析会有两个属性:
 * items:List<Object>
 * var:String
 * 分析线路返回值:
 * 第二条:eval_body_include
 * 第三条:eval_body_again
 * @author Leaf
 *
 * 2022年6月21日 上午8:37:51
 */

2.3 编写ForEachTag标签类

根据forEach标签的特性,我们使用迭代器来进行遍历;

ForEachTag标签类完整代码:

package com.leaf.tag;

import java.util.Iterator;
import java.util.List;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.BodyTagSupport;

/**
 * ForEach标签
 * <c:forEach items="${stus }" var="s">
 * 分析会有两个属性:
 * items:List<Object>
 * var:String
 * 分析线路返回值:
 * 第二条:eval_body_include
 * 第三条:eval_body_again
 * @author Leaf
 *
 * 2022年6月21日 上午8:37:51
 */
public class ForEachTag extends BodyTagSupport {
	
	private List<Object> items;//数据源
	private String var;//代表数据源的每一个对象
	
	public List<Object> getItems() {
		return items;
	}
	public void setItems(List<Object> items) {
		this.items = items;
	}
	public String getVar() {
		return var;
	}
	public void setVar(String var) {
		this.var = var;
	}
	
	//开始标签
	@Override
	public int doStartTag() throws JspException {
		//迭代器
		Iterator<Object> it = items.iterator();
		//为了保留迭代时指针现有位置
		pageContext.setAttribute("it", it);
		return EVAL_BODY_INCLUDE
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在vue2 select中进行远程搜索数据回显,需要使用v-model来实现数据的双向绑定。 首先,在vue组件的data中定义一个数组来存储选中的数据: ``` data() { return { selectedData: [] } } ``` 然后,在vue2 select中使用v-model绑定该数组: ``` <template> <v-select v-model="selectedData" :items="items" :search-input.sync="search" label="name" item-value="id" item-text="name" :loading="loading" @search="searchData"></v-select> </template> ``` 在上面的代码中,items表示从远程获取的数据,search表示搜索关键字,loading表示数据是否正在加载。@search是vue2 select的一个事件,可以在搜索框输入内容时触发,我们可以在这里进行远程搜索。 最后,在searchData方法中,我们可以通过远程接口获取数据,并将已选中的数据回显到vue2 select中: ``` methods: { async searchData() { this.loading = true; // 调用远程接口获取数据 const res = await axios.get(`/api/search?keyword=${this.search}`); this.items = res.data; this.loading = false; // 将已选中的数据回显到vue2 select中 this.selectedData.forEach((item) => { const index = this.items.findIndex((i) => i.id === item.id); if (index !== -1) { this.$set(this.items[index], 'selected', true); } }); } } ``` 在上面的代码中,我们首先调用远程接口获取数据,并将数据存储到items数组中。然后,遍历已选中的数据,通过findIndex方法找到对应的数据在items数组中的索引,然后使用$set方法将selected属性设置为true,从而实现回显。 完整的代码示例: ``` <template> <v-select v-model="selectedData" :items="items" :search-input.sync="search" label="name" item-value="id" item-text="name" :loading="loading" @search="searchData"></v-select> </template> <script> import axios from 'axios'; export default { data() { return { items: [], search: '', loading: false, selectedData: [] } }, methods: { async searchData() { this.loading = true; // 调用远程接口获取数据 const res = await axios.get(`/api/search?keyword=${this.search}`); this.items = res.data; this.loading = false; // 将已选中的数据回显到vue2 select中 this.selectedData.forEach((item) => { const index = this.items.findIndex((i) => i.id === item.id); if (index !== -1) { this.$set(this.items[index], 'selected', true); } }); } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_Leaf1217

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值