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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玩转全栈

flutter开发技巧汇总[持续更新]

1、你应该会碰到initState会被多次执行的问题,通常发生在tabView的切换时,此时你可能要了解一下这个接口了。

2836
来自专栏calvin

Quill编辑器介绍及扩展

从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内...

652
来自专栏码神联盟

【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?

不是说下大雨吗?玩儿呐?搁哪呢?大雨搁哪呢?下丢啦?哗啦到海里去啦?让五娃给吞啦?南方整的那老大,看不起副中心咋的?还能不能 雨~露~均~沾~?你说我小...

3316
来自专栏Windows Community

UWP 创建动画的极简方式 — LottieUWP

提到 UWP 中创建动画,第一个想到的大多都是 StoryBoard。因为 UWP 和 WPF 的界面都是基于 XAML 语言的,所以实现 StoryBoard...

2827
来自专栏HTML5学堂

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现...

43411
来自专栏QQ音乐技术团队的专栏

Unity For Android Cardboard App ( 1 ):基础入门

本文针对的 VR 设备是 Cardboard,主要阐述的是如何在 Unity 环境下开发 VR 场景,实现视线与物体的简单交互。

2380
来自专栏施炯的IoT开发专栏

用本地代码实现屏幕方向自适应的Windows Mobile程序

    在Windows Mobile平台的应用程序开发过程中,如何处理屏幕方向改变对程序带来的影响是一个重要的问题。Allen Lee的文章《WM有约(四):...

2067
来自专栏张善友的专栏

Windows Phone 7实战 第一天 设计启动页面和应用程序图标

每一个 Windows Phone 7 应用程序在启动时多少会花上一些时间,在这个等待的时刻经常都会摆放一些启动画面 (Splash screen) 先来充充场...

1939
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

4895
来自专栏*坤的Blog

博客园特效简单添加

1514

扫码关注云+社区