效果
实现
jsp页面代码
<dd class="fl rel ml_05em text_12em">
接货确认
<span id="orderComfirmRed" class="abs pl_05em pr_05em mt_05em top_0 right_0 c_white bor_rad_05em minus_mr_1em line_h_14em text_al_c bg_red-orange " style="display:none"></span>
</dd>
页面通过一个隐藏的span标签实现,其中span标签的大小 通过class属性来控制,这里不是原生jquery的class的属性,不要全部复使用。
记住span的id。
jquery代码
实现思想是:
当页面加载完之后,通过ajax提交后台去查询数据,将查到的消息数传回前段,如果为0,则不显示span,如果不为0,则显示span,并将消息数量作为span的内容。
在js中:
$(function(){
var url = "${ctx}/front/tbOnPurchaseAction/waitReceived";
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,
data :{dsType:'sysDs'},
dataType:"json",
success : function(data) {
if(data.data==0){
$("#orderComfirmRed").hide();
}else{
$("#orderComfirmRed").css("display","block");
$("#orderComfirmRed").text(data.data);
}
}
});
});
后台action代码
@ResponseBody
@RequestMapping("/waitReceived" )
public Json waitReceived(@QueryParam("dsType") @DefaultValue("sysDs") String dsType) {
Json jsonResult = new Json();
jsonResult.setTitle("红点");
Integer count=0;
String num=null;
Map<String, Object>map=new HashMap<String,Object>();
List<orderComfirm> data = new ArrayList<>();
try {
String code=SubjectUtil.getCurrentUser().getOrgCode();
map.put("code", code);
data = tbComfirmService.queryOrderComfirm(map);
if (data.size()>0) {
count=data.size();
}
if(count>=100) {
num="99+";
}else {
num=count.toString();
}
jsonResult.setData(num);
jsonResult.setStatus(true);
jsonResult.setMessage("接口访问成功!");
} catch (Exception ex) {
LogService.getInstance(this).error("获取数据失败:" + ex.getMessage(), ex);
}
return jsonResult;
}