文档章节

Java 用户资料完整度的前端显示(实现)

ForingY
 ForingY
发布于 2015/12/07 15:45
字数 493
阅读 160
收藏 0

正文

前边也说了,我这里采用的是第一种方案,前端使用 Bootstrap 的进度条组件显示百分比,后台读取权重并计算信息完整度,并将计算的结果返回给前端,供页面显示。方案很简单,下面具体来看代码。

前端

CSS

<link href="static/sc/css/bootstrap.min.css" rel="stylesheet">

JS

<script src="static/sc/js/jquery-1.9.1.js"></script>  
<script src="static/sc/js/bootstrap.min.js"></script>  
  
<script language="javascript">  
 $(function() {  
    // 加载页面时,动态读取个人资料完整度  
     $.ajax({  
            async: false,  
            url : 'getInfoDegree.do',  
            type : 'POST',  
            dataType : 'json',  
            data : {},  
            error : function(XmlHttpRequest, textStatus, errorThrown) {  
                alert("服务器错误:" + XmlHttpRequest.status  
                        + " " + XmlHttpRequest.statusText + '!');  
            },  
            success : function(data) {  
                if (!data)  
                    return;  
                if(data.flag == "true"){  
                    $("#showSpan").html(data.degree);  
                    $("#showBar").css("width", data.degree);  
                    $("#showPercent").html(data.degree);  
                }else if(data.flag == "false"){  
                    $("#infodegree").html(data.desc);  
                    return false;  
                }  
            }     
        });  
 });  
</script>

DOM

<p style="color:#666;">个人资料完整度:<span id="showSpan" style="color:#ff9933;font-size:20px;font-weight:bold;"></span></p>  
<div class="progress progress-striped" style="width:210px;height:15px;">  
<span style="white-space:pre">    </span><div id="showBar" class="progress-bar progress-bar-info" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >  
<span style="white-space:pre">        </span><span id="showPercent" class="sr-only"></span>  
<span style="white-space:pre">    </span></div>  
</div>  
<em id="infodegree"></em>

后台

Java(部分代码)

/** 
 * 根据权重计算资料完整度 
 * @param map 
 * @return 
 */  
private String getInfoDegree(List<TScAcntProp> list) {  
    int sum = 0;  
    if (list.size() > 0) {  
        // 遍历权重配置文件,获取权重  
        for (int i = 0; i < list.size(); i++) {  
            int degree = Integer.parseInt(CommonUtil.getProperty(list.get(i).getPLabelName()));  
            sum += degree;  
        }  
    }  
    // 返回计算后的权重  
    return sum + "%";

配置文件

配置文件中存放的是权重,这里就截成图片了。


效果图


结束语

看似唬人的名词,其实也并没有多难,只要理清楚思路,方案就跃然于纸上了,当然,其中会涉及到一些技术问题,这个根据不同的需求会有不同的解决方案,技术搞定后,具体的实现就会水到渠成。最后,要感谢一下小崔童鞋,在这个功能上有一个问题让我很困扰,小崔童鞋给了我很大的帮助,特此表示我的感谢。

© 著作权归作者所有

ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
私信 提问
微服务解决方案Apache ServiceComb(incubating) 发布新版本

近期,微服务解决方案Apache ServiceComb(incubating) 捷报频传,除了LC3大会ServiceComb Workshop成功举办之外,Java-Chassis 1.0.0-m2、Service-Center 1.0.0-m2和Saga 0.2.0版本顺利通过投...

微服务框架
2018/07/12
118
0
微服务解决方案 Apache ServiceComb(incubating) 发布新版本

近期,微服务解决方案Apache ServiceComb(incubating) 捷报频传,除了LC3大会ServiceComb Workshop成功举办之外,Java-Chassis 1.0.0-m2、Service-Center 1.0.0-m2和Saga 0.2.0版本顺利通过投...

业界首个Apache微服务顶级项目
2018/07/12
1K
4
每天花四小时看这些java、python、web前端

干货视频,培训机构 最新java、Python、web前端、人工智能视频(基础班+就业班)。要的留下私信我,一小时之内回复。java的基础学习,全套java教程,以及后期制作项目,来分享给大家java,P...

巴斯光年暴暴龙
2018/08/17
0
0
利用 Jython 与 Ajax 技术构建一个简单的 Web 应用程序

Ajax 是现如今构建互动性强,更为动态的 Web 应用程序的必备技术。而 Jython 是 Python 语言的纯 Java 实现,它结合了二者的优势,使用它可以作为服务器端的实现。本文以一个典型的用户注册应...

红薯
2011/01/16
1K
4
GrapeCity Documents for Excel 文档 API 组件 V2.2 版本发布

GrapeCity Documents for Excel 文档 API 组件 V2.2 正式发布,本次新版本包含诸多重量级产品功能,如:将带有形状的电子表格导出为 PDF、控制分页和电子表格内容、将 Excel 电子表格的特定页...

葡萄城技术团队
07/16
554
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.5K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部