项目中，申请者申请某些事项以后，常常需要在申请列表中查看当前申请的记录所在的审批状态，动态美观的显示状态可以使UI更符合客户要求，比如下面这样。
以Goods__c表为例，申请者申请的一些采购以前需要得到批准，申请者列表需要显示所有的申请记录，状态（Status__c）有以下情况：
直线经理审批;
部门经理审批;
总经理审批;
审批通过。
实现上述方式主要实现思路:首先通过css画出来审批的步骤图，没有到达的灰色显示，经过或者正在步骤绿色显示，比如当前步骤为部门经理审批，则直线经理审批和部门经理审批节点为绿色，总经理审批和审批通过节点为灰色。然后通过jquery对'查看'设置onmouseenter以及onmouseleave事件，当onmouseenter时，显示状态的div，当onmouseleave时，移出状态的div。
代码如下：
1.Controller代码：初始化数据
public without sharing class GoodsShowStatusController {
public List<Goods__c> goodsList{get;set;}
public GoodsShowStatusController() {
initData();
}
public void initData() {
goodsList = [select Id,GoodsName__c,GoodsPrice__c,Status__c from Goods__c limit 10];
}
}
2.VF代码：显示数据并且通过jquery和css实现效果
<apex:page controller="GoodsShowStatusController"> <style type="text/css">
.steps {
position: relative;
margin-bottom: 30px;
counter-reset: step;
} .steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 15%;
position: relative;
float: left;
} .steps li:before {
display: block;
content: counter(step);
counter-increment: step;
width: 32px;
height: 32px;
background-color: #019875;
line-height: 32px;
border-radius: 32px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 700;
margin: 0 auto 8px auto;
} .steps li ~ li:after {
content: '';
width: 100%;
height: 2px;
background-color: #019875;
position: absolute;
left: -50%;
top: 15px;
z-index: -1;
} .steps li.active:after {
background-color: green;
} .steps li.active ~ li:before,.steps li.active ~ li:after {
background-color: gray;
} .goodsStatusShow {
line-height: 18px;
position: relative;
} .goodsStatusShow div {
display: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
} .goodsStatusShowDetail {
width: 800px;
border: 1px #C3A459 solid;
background-color: #FFFEED;
padding: 5px
}
</style> <apex:includeScript value="{!$Resource.JQuery2}" />
<script type="text/javascript">
$(function(){
$('.goodsStatusShow').mouseenter(function(){
$(this).find('div').slideDown("fast");
});
$('.goodsStatusShow').mouseleave(function(){
$(this).find('div').slideUp("fast");
});
});
</script>
<apex:pageBlock >
<apex:pageBlockTable value="{!goodsList}" var="goods">
<apex:column headervalue="流程图查看">
<apex:facet name="header">当前步骤测试样例</apex:facet>
<div class="goodsStatusShow">
查看
<div class="goodsStatusShowDetail">
<ul class="steps">
<li class="{!IF(goods.Status__c == '直线经理审批','active','')}">直线经理审批</li>
<li class="{!IF(goods.Status__c == '部门经理审批','active','')}">部门经理审批</li>
<li class="{!IF(goods.Status__c == '总经理审批','active','')}">总经理审批</li>
<li class="{!IF(goods.Status__c == '审批通过','active','')}">审批通过</li>
</ul>
</div>
</div>
</apex:column>
<apex:column headervalue="商品名称">
<apex:outputField value="{!goods.GoodsName__c}" />
</apex:column>
<apex:column headervalue="商品价格">
<apex:outputField value="{!goods.GoodsPrice__c}" />
</apex:column>
<apex:column headervalue="商品所处审批流程">
<apex:outputField value="{!goods.Status__c}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
效果展示：
1.流程为部门经理审批的效果图显示
2.流程为总经理审批的效果图显示
总结：此篇主要在业务上描述如何实现更好的UI效果，主要用到的技术其实是css和jquery的居多，篇中显示样式在baidu上copy一些，有需要的可以在此基础上进行更改，有问题的地方欢迎指正，有问题的欢迎留言。
