JSP——编辑时的回显

野性酷女 2022-05-20 07:57 417阅读 0赞

“回显”——就是在键盘上按下一个“键”，如果在电脑上同时显示出你按的内容。而标题的编辑回显则是：一个表格有很多条数据，每条数据有一个“编辑”按钮，点击一条数据的“编辑”按钮会把这条数据显示在一个弹框中。  
  下面小菜就记录一些做编辑回显时的一些小问题。

## <table>   <tbody>    <tr>     <td><font>下拉框——不固定的list</font></td>    </tr>   </tbody>  </table> ##

1.需求

广告表中有一个外键（广告位id），广告管理界面需要用到广告位来进行筛选，将广告位做成下拉框  
2.解决  
  ◆在controller中往前台传数据

//1、Ads是广告实体，往前台传的bean就是广告
        //2、AdsPosition是广告位实体，往前台传的adsPositionList 是广告位
        @RequestMapping("/to_edit")
    	public String toEdit(Ads bean, HttpServletRequest request, HttpServletResponse response, ModelMap model) {
    		List<AdsPosition> adsPositionList = adsPositionService.selectByParam(null);
    		model.addAttribute("adsPositionList",adsPositionList);
    		if(StringUtils.isNotEmpty(bean.getId())){
    			bean=this.service.selectById(bean.getId());
    			model.addAttribute("bean",bean);
    		}
    		return getTheme() +"/.../.../edit";
    	}

◆jsp用el表达式循环controller传来的值

<label class="form-label col-3"><span class="c-red">*</span>广告位名称：</label>
    <select name="adsPositionId" style="width:200px;height: 30px;">
    	<c:forEach items="${adsPositionList}" varStatus="adsPositionList">
    		<c:set var="adsPosition" value="${adsPositionList.current}"/>
    		<option <c:if test="${bean.adsPositionId==adsPosition.id }">selected</c:if>value="${adsPosition.id}">
    		      ${adsPosition.name}
    		</option>
    	</c:forEach>
    </select>

## <table>   <tbody>    <tr>     <td><font>下拉框——固定的数字</font></td>    </tr>   </tbody>  </table> ##

1.需求

因为类型一共就4种，所以在库中是int类型，1234分别代表一种固定的类型，界面需要用下拉框显示出这四种类型而且是中文，编辑时还要回显  
2.jsp代码

<label class="form-label col-3"><span class="c-red">*</span>类型：</label>
    <select name="type" class="select" id="type">
    	<option value=''>全部</option>
    	<option value="1" <c:if test="${bean.type==1 }">selected</c:if>>类型1</option>
    	<option value="2" <c:if test="${bean.type==2 }">selected</c:if>>类型2</option>
    	<option value="3" <c:if test="${bean.type==3 }">selected</c:if>>类型3</option>
    	<option value="4" <c:if test="${bean.type==4 }">selected</c:if>>类型4</option>
    </select>

## <table>   <tbody>    <tr>     <td><font>复选框——数字变文字</font></td>    </tr>   </tbody>  </table> ##

1.需求

状态字段在数据库中是个int类型，总共两种状态，1表示启用，2表示禁用，界面需要把状态字段用复选框表示而且是中文。

2.jsp代码

//复选框：把input的type改成radio，别忘了写checked
    //数字变中文：用el表达式判断一下
    <div class="row cl">
    	<label class="form-label col-3"><span class="c-red">*</span>状态：</label>
    	<div class="formControls col-5">
    		<input type="radio" name="status" value="1" <c:if test="${bean.status== 1 }">checked</c:if>/>启用
    		           
    		<input type="radio" name="status" value="2" <c:if test="${bean.status== 2 }">checked</c:if>/>禁用
    	</div>				
    </div>

## <table>   <tbody>    <tr>     <td><font>日期控件</font></td>    </tr>   </tbody>  </table> ##

<div class="row cl">
       <label class="form-label col-3"><span class="c-red">*</span>结束时间：</label>
       <div class="formControls col-5">
          <input type="text" onfocus="WdatePicker()" id="endTenancy" placeholder="选择结束时间" name="endTime"
                value="<fmt:formatDate value="${bean.endTime}" pattern="yyyy-MM-dd"/>"
                class="input-text Wdate w-150">
       </div>
    </div>

## <table>   <tbody>    <tr>     <td><font>尺寸（□x□）</font></td>    </tr>   </tbody>  </table> ##

<label class="form-label col-3"><span class="c-red">*</span>广告尺寸：</label>
       <div class="formControls col-5">
          <c:forEach items="${adsPositionList}" var="adsPositionList">
             <c:if test="${bean.adsPositionId==adsPositionList.id}">
                <input type="text" class="input-text" placeholder="" name="width" id="width" value="${adsPositionList.width}" style="width: 60px;">
                <span>X</span>
                <input type="text" class="input-text" placeholder="" name="height" id="height" value="${adsPositionList.height}" style="width: 60px;">
             </c:if>
          </c:forEach>
       </div>