开发项目的过程中,经常会碰到这样的问题:学生信息管理系统中,学生的专业、性别字段,底层数据库中存储的信息和在页面显示的是不同步的。比如:性别字段数据库中1代表男,0代表女,而界面上需要我们显示男或者女,而不是直接从数据库中取出来的0或者1。这个应该怎么解决呢?
我们将数据库中的性别信息取出来,在前台jsp页面通过JS或者JQuery来处理和转换:
JSP页面:
<div class="col-l">性别要求</div>
<input id="sexRequire" name="sexRequire" type="hidden" value="${job.sexRequire}" readonly />
<div class="col-m col-m-select">
<div class="job-c-l">
<input type="text" id="sexRequireId" value="${job.sexRequire eq 1?'女':''}${job.sexRequire eq 0?'男':''}"
required="required" readonly /></div>
<div class="job-c-r"></div>
<div class="job-c-list">
<p idattr="sexRequire" idValue="0">男</p>
<p idattr="sexRequire" idValue="1">女</p>
</div>
</div>
说明:
1.此处有两个输入框(input标签):
第一个对应的是数据库(type="hidden",是为了更好地交互性);
第二个对应的是用户显示界面,根据数据库中的0和1,来对应显示女和男。
第一个input输入框,对应了form表单,在spring框架中将input框的name设置为model对应的属性名,就能
实现页面和后台之间通过bean来传递信息。
2.下拉列表中的P标签保存了界面性别和数据库性别的对应关系。0对应女,1对应男。
JS和JQuery处理逻辑:
$(".job-c-list").find("p").click(function(){
var pObj=$(this);
var id=pObj.attr("idattr");
if(id=="educationId"){
$("#educationId").val(pObj.attr("idValue"))
}else if(id=="industryId"){
$("#industryId").val(pObj.attr("idValue"))
}else if(id=="sexRequire"){
//设置第一个输入框的值0或者1(对应数据库存储的性别数据)
$("#sexRequire").val(pObj.attr("idValue"))
}
var thisText = pObj.text();
//设置第二个输入框的值男或者女(对应页面显示的性别数据)
var obj=$(this).parents(".col-m-select").find("input[type='text']");
obj.val(thisText);
$(box).css("z-index","");
});
通过这一系列的前台处理,就可以实现数据库和界面展示之间的对应了。希望能给大家一些解决问题的思路