項目中，申請者申請某些事項以后，常常需要在申請列表中查看當前申請的記錄所在的審批狀態，動態美觀的顯示狀態可以使UI更符合客戶要求，比如下面這樣。
以Goods__c表為例，申請者申請的一些采購以前需要得到批准，申請者列表需要顯示所有的申請記錄，狀態（Status__c）有以下情況：
直線經理審批;
部門經理審批;
總經理審批;
審批通過。
實現上述方式主要實現思路:首先通過css畫出來審批的步驟圖，沒有到達的灰色顯示，經過或者正在步驟綠色顯示，比如當前步驟為部門經理審批，則直線經理審批和部門經理審批節點為綠色，總經理審批和審批通過節點為灰色。然后通過jquery對'查看'設置onmouseenter以及onmouseleave事件，當onmouseenter時，顯示狀態的div，當onmouseleave時，移出狀態的div。
代碼如下：
1.Controller代碼：初始化數據
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 }
2.VF代碼：顯示數據並且通過jquery和css實現效果
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>
效果展示：
1.流程為部門經理審批的效果圖顯示
2.流程為總經理審批的效果圖顯示
總結：此篇主要在業務上描述如何實現更好的UI效果，主要用到的技術其實是css和jquery的居多，篇中顯示樣式在baidu上copy一些，有需要的可以在此基礎上進行更改，有問題的地方歡迎指正，有問題的歡迎留言。