有时候在自定义的visualforce页面上，需要实现系统标准的查找样式，当不能使用标准的style的时候，我们只能选择自定义实现，下面分享一个demo，预览效果如下：

实现代码，Visualforce页面

 <!-- 自定义放大镜查找效果 -->
 <apex:page showHeader="false" controller="SelectSystem"  standardStylesheets="false"  sidebar="false" title="产品清单">
 <html>
 <head>
     <link rel="stylesheet" href="{!URLFOR($Resource.StaticResource,'css/animate.css')}"/>
     <link rel="stylesheet" href="{!URLFOR($Resource.StaticResource,'css/bootstrap.min.css')}"/>
     <link rel="stylesheet" href="{!URLFOR($Resource.StaticResource,'css/style.css')}"/>
 </head>
 <apex:form id="form_Id">
 <apex:actionFunction action="{!getProductWithId}" name="getProductWithId" reRender="form_Id">
    <apex:param name="myParam" value=""/>
 </apex:actionFunction>
 <body>
     <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
         <thead>
             <tr>
               <th data-hide="phone">产品</th>
               <th data-hide="phone">描述</th>
               <th data-hide="phone">型号</th>
               <th data-hide="phone">品牌</th>
               <th data-hide="phone">单位</th>
             </tr>
         </thead>
         <tbody>
             <apex:repeat value="{!CustomAddProduct}" var="p" >
               <tr>
                 <td>
                     <apex:inputField id="pro" value="{!p.getProduct__c}" styleClass="lookupInput"  onchange="f3(this);"/>
                 </td>
                 <td>{!p.Description__c}</td>
                 <td>{!p.Model__c}</td>
                 <td>{!p.Brand__c}</td>
                 <td>{!p.Unit__c}</td>
               </tr>
             </apex:repeat>
         </tbody>
     </table>
 </body>
 <script type="text/javascript">
      function f3(obj){
         var objVa = document.getElementById(obj.id+'_lkid').value;
         console.log('get到的产品id是：' + objVa);
         getProductWithId(objVa);
     }
 </script>
 <style type="text/css">
     .lookupInput
     {
         display: inline;
         vertical-align: middle;
         white-space: nowrap;
     }
     .lookupInput img
     {
         background-repeat: no-repeat;
         margin-right: .25em;
         vertical-align: middle;
     }
     .lookupInput .disabled{
         background-color: #ccc;
     }
     .lookupInput .emptyDependentLookup{
         font-style: italic;
     }
     .lookupInput input[readonly]{
         background-color: #e6e6e6;
         border: 2px solid #e6e6e6;
         color: #333;
         cursor: default;
     }
     .lookupInput a.readOnly{
         float: right;
     }
     .lookupInput span.readOnly
     {
         display: block;
         white-space: normal;
     }
     .lookupInput span.totalSummary{
         font-weight: bold;
     }
     .inlineEditRequiredDiv .lookupInput img,.inlineEditDiv .lookupInput img{
         vertical-align: middle;
     }
     .quickCreateModule .lookupInput input {
         max-width: 155px
     }
     .lookupIcon
     {
         background-image: url({!URLFOR($Resource.lookup,'lookup20.gif')});
         background-position: 0 0;
         width: 20px;
         height: 20px;
         background-position: top left
     }
     .lookupIconOn
     {
         background-image: url({!URLFOR($Resource.lookup,'lookup20.gif')});
         background-position: 0 0;
         width: 20px;
         height: 20px;
         background-position: top right
     }
 </style>
 </apex:form>
 </html>
 </apex:page>

后台控制类

 /********
     *
     *  @Author:Ricardo
     *  @Time: 2018-01-26
     *  @Function: 自定义放大镜
     *
     */
 public class SelectSystem{
     public Product__c CustomAddProduct{get;set;}//自定义添加产品

     public void GetProductWithId(){
         string ProductIdParam = Apexpages.currentPage().getParameters().get('myParam');
         System.debug('输出get到的产品id:' + ProductIdParam);
         if((ProductIdParam) != null || (ProductIdParam != '')){
             String sql_new = 'select getProduct__c,Unit__c,Description__c,Brand__c,Model__c,id,Name from Product__c where  id=\'' + ProductIdParam + '\' limit 1';
             System.debug('输出查询语句：' + sql_new);
             CustomAddProduct = Database.Query(sql_new);
             CustomAddProduct.getProduct__c = ProductIdParam;
             System.debug('查询结果：' + CustomAddProduct);
         }
     }
 }

附赠使用的css文件

链接: https://pan.baidu.com/s/1FbR8vSD6iER4ShbuYi_7qQ 密码: 29a3

Salesforce 开发整理（十一） 自定义放大镜查找效果的更多相关文章

  1. Salesforce 开发整理（八）PDF打印相关

    一:基础设置 Salesforce中的PDF页面本质上还是Visualforce[简称VF]页面,所以只需要给VF页面加上一个属性[renderAs="pdf"] 即可生成一个PD ...

  2. Salesforce 开发整理（五）代码开发最佳实践

    在Salesforce项目实施过程中,对项目代码的维护可以说占据极大的精力,无论是因为项目的迭代,还是需求的变更,甚至是项目组成员的变动,都不可避免的需要维护之前的老代码,而事实上,几乎没有任何一个项 ...

  3. Salesforce 开发整理（九） 开发中使用的一些小技巧汇总[持续更新]

    1.查询一个对象下所有字段 当需要查询一个对象所有字段进行复制或其他操作,可以使用一段拼接的语句来查询 String query = 'select '; for(String fieldApi : ...

  4. Salesforce 开发整理（二）报表开发学习

    Salesforce提供了强大的报表功能,支持表格.摘要.矩阵以及结合共四种形式,本文探讨在站在开发的角度要如何理解报表. 一:查询报表基本信息报表在Sales force中是Report对象,基本的 ...

  5. Salesforce 开发整理（一）测试类最佳实践

    在Sales force开发中完善测试类是开发者必经的一个环节,代码的部署需要保证至少75%的覆盖率,那么该如何写好测试类呢. 测试类定义格式如下: @isTest private class MyT ...

  6. Salesforce 开发整理（十）项目部署总结

    项目部署顺序 全局值集 小组 自定义字段-对象-设置(SF1 紧凑布局要和记录类型在这里要一起部署) 邮件模板-静态资源 角色 工作流-流定义(包含进程生成器) 批准过程 开发部署<Apex类, ...

  7. Salesforce 开发整理（七）配置审批流

    salesforce提供了比较强大的可配置审批流功能,在系统中翻译为“批准过程”.所以需要配置审批时,选择创建 ——>  工作流和批准 ——> 批准过程,然后选择管理批准过程,选择需要配置 ...

  8. Salesforce 开发整理（六） Visualforce分页

    分页的实现总体上分真分页和假分页. 所谓真分页指页面上列出来的数据就是实际查询的数据,假分页则是无论页面上一次显示多少条记录,实际上后台已经加载了所有的记录,分页只是为了展示给用户查看.今天分享一个V ...

  9. Salesforce 开发整理（四）记录锁定

    如果一个对象的记录在满足某个条件的情况下,希望能对其进行锁定,即普通用户没有权限对其进行编辑操作,记录页面显示如下图 一般会在提交审批,或者项目进行到某个阶段的情况下,由后台进行判断要不要锁定记录,或 ...

随机推荐

  1. 【EasyExcel】使用easyExcel过程中，项目报错的解决集合

    报错:Can not close IO [ERROR] 2019-11-02 13:51:21.210 [ProExportSkuDataJob-1455-TaskThread-1] [com.dma ...

  2. Wine添加路径PATH办法

    使用wine运行某些程序时,可能会提示某些DLL找不到,需要手动把这些DLL的路径添加进去.添加方法是:wine regedit打开注册表工具:添加一个键HKEY_CURRENT_USER/Envir ...

  3. OpenCV.Net基于傅里叶变换进行文本的旋转校正

    本文描述一种利用OpenCV及傅里叶变换识别图片中文本旋转角度并自动校正的方法,由于对C#比较熟,因此本文将使用OpenCVSharp. 文章参考了http://johnhany.net/2013/1 ...

  4. Codeforces 1256A 1257A

    题目链接:https://codeforces.com/problemset/problem/1256/A A. Payment Without Change time limit per test ...

  5. xshell使用zmodem拖拽上传

    一.目的 windows向centos_linux服务器上传文件可以用ftp上传,但是没zmodem方便,zmodem拖拽上传,可以上传到指定的目录下. 二.安装使用 执行下面的命令安装后就可以使用了 ...

  6. win10自动休眠解决方法

    win10使用外接显示器时,总是过2分钟自动睡眠. 这是系统无人值守时睡眠时间的设定,默认是两分钟. 解决方法: 1.运行注册表管理器,win+r ,输入regedit.exe 2.定位到HKEY_L ...

  7. JavaScript prototype原型用法

    JavaScript对象原型 所有JavaScript对象都从原型继承属性和方法. <!DOCTYPE html> <html> <meta charset=" ...

  8. 腾讯WeTest亮相—腾讯全球数字生态大会现场

    2019年5月21-23日腾讯全球数字生态大会在云南昆明滇池国际会展中心顺利召开. 此次大会上万人到场参与,大会由主峰会.分论坛.数字生态专题展会以及腾讯数字生态人物颁奖盛典四大板块构成.作为腾讯战略 ...

  9. 新手入门必看：VectorDraw 常见问题整理大全（二）

    VectorDraw Developer Framework(VDF)是一个用于应用程序可视化的图形引擎库.有了VDF提供的功能,您可以轻松地创建.编辑.管理.输出.输入和打印2D和3D图形文件.该库 ...

  10. Linux下压缩工具gzip和归档工具tar及其实战shell应用

    Linux下压缩工具gzip和归档工具tar及其实战shell应用       第一章:gzip的使用技巧 gzip [option]... file... -d: 解压缩,相当于gunzip; -# ...