salesforce 零基础学习（四十六）动态美观显示列表中记录的审批状态

项目中，申请者申请某些事项以后，常常需要在申请列表中查看当前申请的记录所在的审批状态，动态美观的显示状态可以使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一些，有需要的可以在此基础上进行更改，有问题的地方欢迎指正，有问题的欢迎留言。