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一些，有需要的可以在此基础上进行更改，有问题的地方欢迎指正，有问题的欢迎留言。