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

 1 public without sharing class GoodsShowStatusController {
 2     
 3     public List<Goods__c> goodsList{get;set;}
 4     
 5     public GoodsShowStatusController() {
 6         initData();
 7     }
 8     
 9     public void initData() {
10         goodsList = [select Id,GoodsName__c,GoodsPrice__c,Status__c from Goods__c limit 10];
11     }
12 }

  1 <apex:page controller="GoodsShowStatusController">
  2 
  3 <style type="text/css">
  4 .steps {
  5     position: relative;
  6     margin-bottom: 30px;
  7     counter-reset: step; 
  8 }
  9 
 10 .steps li {
 11     list-style-type: none;
 12     font-size: 12px;
 13     text-align: center;
 14     width: 15%;
 15     position: relative;
 16     float: left;
 17 }
 18 
 19 
 20 .steps li:before {
 21     display: block;
 22     content: counter(step); 
 23     counter-increment: step; 
 24     width: 32px;
 25     height: 32px;
 26     background-color: #019875;
 27     line-height: 32px;
 28     border-radius: 32px;
 29     font-size: 16px;
 30     color: #fff;
 31     text-align: center;
 32     font-weight: 700;
 33     margin: 0 auto 8px auto;
 34 }
 35 
 36 
 37 .steps li ~ li:after {
 38     content: '';
 39     width: 100%;
 40     height: 2px;
 41     background-color: #019875;
 42     position: absolute;
 43     left: -50%;
 44     top: 15px;
 45     z-index: -1; 
 46 }
 47 
 48 
 49 .steps li.active:after {
 50     background-color: green;
 51 }
 52 
 53 
 54 .steps li.active ~ li:before,.steps li.active ~ li:after {
 55     background-color: gray;
 56 }
 57 
 58 .goodsStatusShow {
 59     line-height: 18px;
 60     position: relative;
 61 }
 62 
 63 .goodsStatusShow div {
 64     display: none;
 65     position: absolute;
 66     left: 0px;
 67     top: 0px;
 68     z-index: 1000;
 69 }
 70 
 71 .goodsStatusShowDetail {
 72     width: 800px;
 73     border: 1px #C3A459 solid;
 74     background-color: #FFFEED;
 75     padding: 5px
 76 }
 77 </style>
 78 
 79     <apex:includeScript value="{!$Resource.JQuery2}" />
 80     <script type="text/javascript">
 81         $(function(){
 82             $('.goodsStatusShow').mouseenter(function(){
 83               $(this).find('div').slideDown("fast");
 84             });
 85             $('.goodsStatusShow').mouseleave(function(){
 86               $(this).find('div').slideUp("fast");
 87             });
 88         });
 89     </script>
 90     <apex:pageBlock >
 91         <apex:pageBlockTable value="{!goodsList}" var="goods">
 92             <apex:column headervalue="流程图查看">
 93             <apex:facet name="header">当前步骤测试样例</apex:facet>
 94                 <div class="goodsStatusShow">
 95                     查看
 96                     <div class="goodsStatusShowDetail">
 97                         <ul class="steps">
 98                             <li class="{!IF(goods.Status__c == '直线经理审批','active','')}">直线经理审批</li>
 99                             <li class="{!IF(goods.Status__c == '部门经理审批','active','')}">部门经理审批</li>
100                             <li class="{!IF(goods.Status__c == '总经理审批','active','')}">总经理审批</li>
101                             <li class="{!IF(goods.Status__c == '审批通过','active','')}">审批通过</li>
102                         </ul>
103                     </div>
104                 </div>
105             </apex:column>
106             <apex:column headervalue="商品名称">
107                 <apex:outputField value="{!goods.GoodsName__c}" />
108             </apex:column>
109             <apex:column headervalue="商品价格">
110                 <apex:outputField value="{!goods.GoodsPrice__c}" />
111             </apex:column>
112             <apex:column headervalue="商品所处审批流程">
113                 <apex:outputField value="{!goods.Status__c}" />
114             </apex:column>
115         </apex:pageBlockTable>
116     </apex:pageBlock>
117 </apex:page>