JSP——编辑时的回显

正文

  看到自己写的标题我的关注点会在“回显”上，其实回显小菜早就听过这个词，可是一直没有认真思考过这个词如何用代码实现界面的回显，也或许说以前的小菜根本不知道“回显”，只有自己真正的实践后才知道其词的含义。
  “回显”——就是在键盘上按下一个“键”，如果在电脑上同时显示出你按的内容。而小菜标题的编辑回显则是：一个表格有很多条数据，每条数据有一个“编辑”按钮，点击一条数据的“编辑”按钮会把这条数据显示在一个弹框中。
  下面小菜就记录一些做编辑回显时的一些小问题。

下拉框——不固定的list

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>

下拉框——固定的数字

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>

复选框——数字变文字

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>/>启用
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="status" value="2" <c:if test="${bean.status== 2 }">checked</c:if>/>禁用
    </div>              
</div>

日期控件

<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>

尺寸（□x□）

<!--思路：循环一下刚才controller传来的值，然后在两个input框中间用一个span标签放X-->

   <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>

小结

  小菜还是相信那句话，越努力越幸运。jsp虽然还是有很多不会，不会气馁，慢慢积累练习吧！