使用Visualforce Page还原商机查询页面(二)

使用Visualforce Page还原商机查询页面（二）

记得前几天，我们学了一下visualforce page 的标签，其实这篇标签就是为今天的页面编写做准备的，我觉得吧，初学者难免不把vf page 和lightning 弄混淆，刚开始我也是这样的，所以今天，我们用vf page写一下标准页面的查询

首先，我们看一下这是不是你想要的页面

这就是用visualforce page 实现的一个自定义的商机页面查询，康康怎么做的吧👀

• 首先，创建一个page
  
• 然后就是写代码了
  
  我先把代码给你们咯，我再讲解我是怎么实现的

<apex:page standardController="Opportunity" recordSetVar="opportunities" tabStyle="Opportunity" sidebar="false">
	
	<apex:form >
       <!--  <apex:image value="http://bit.ly/17iLknp" styleClass="logo" /> -->

		<apex:pageBlock >

			<apex:pageMessages />

			<apex:pageBlock >

				<apex:panelGrid columns="2" >

					<apex:outputLabel value="业务机会"/>
	
					<apex:selectList value="{!filterId}" size="1">

						<apex:actionSupport event="onchange" rerender="opp_table"/>
						<apex:selectOptions value="{!listviewoptions}"/>
	
					</apex:selectList>
                 
				</apex:panelGrid>

			</apex:pageBlock>
            <apex:detail />
			
			<apex:pageBlockTable styleClass="" value="{!opportunities}" var="opp" id="opp_table">
			  
                <apex:column headerValue="业务机会名">
                    <apex:inputCheckbox />
					<!--<apex:inputField value="{!opp.name}"/>	-->
                     <apex:outputLink value="/{!opp.id}">
                    	<apex:outputText value="{!opp.name}"></apex:outputText>
                    </apex:outputLink>|
			  </apex:column>
			       
 	 	      <apex:column headerValue="客户名">                 	
					<!--<apex:inputField value="{!opp.AccountId}"/>	-->
                  	<apex:outputLink value="/{!opp.accountid}">
                            <apex:outputtext value="{!opp.Account.name}"/>
                    </apex:outputLink>
			  </apex:column>
	       	  <apex:column headerValue="金额">
					<apex:inputField value="{!opp.Amount}"/>	
			  </apex:column>
 	         <apex:column headerValue="结束日期">
					<apex:inputField value="{!opp.closeDate}"/>
			  </apex:column>
			  <apex:column headerValue="阶段">
					<apex:inputField value="{!opp.stageName}"/>	
			  </apex:column>
  	          <apex:column headerValue="业务机会所有人别名">
					<apex:inputField value="{!opp.CreatedById}"/>		
			  </apex:column>

			</apex:pageBlockTable>

		</apex:pageBlock>

	</apex:form>
    
    <style>
    	select{
    		color: black;
        	font-weight: bold;
    	}

    	body .pbBody table.list tr td {
    		color: #0b589c;
    	}

    	input{
    		color: #0b589c;
    		border: 0px;
        	margin-left: 28px;
    	}
        
        select {
    		border: 0px;
    		margin: 20px;
        	margin-top:10px;
        	margin-left:2px;		
    	}
        
        body .pbBody table.list tr.headerRow th {
    		font-size: 2.1em;
    	}
        
   		.bPageBlock .requiredInput .requiredBlock {
        	background-color: rgb(255, 253, 253);
        }
        
        .dateFormat {
    		padding: 0 2px;
    		display: none;
		}
        
        body .secondaryPalette.bPageBlock, body .individualPalette .secondaryPalette.bPageBlock{
        	border: 0;
        }
        
        html body.sfdcBody {
        	background-color: #a2d0f9;
        }
        
        td {
        	margin-top: 72px;
        }
        
		input[type="checkbox" i] {
    		position: relative;
    		top: 0px;
    		z-index: 1;
            margin: 5px 14px 1px 10px;
        }
        
        body .pbBody table.list tr td {
    		    color: rgb(8, 7, 7);
       
		}

        .pbBody, .pbBody a, .pbBody td, .lbBody a, .lbBodyDescription, .list .headerRow .noRowsHeader {
    		color: #1260b1;
        	text-decoration: none;<!--鼠标移动至字体下方出现下划线，移除时隐藏下划线-->
		}
        
        
      
    </style>

</apex:page>

1.我们看见代码的顶部有一个单词：standardController（这个里面呢就填你的页面对象就欧克，比如我现在想查询的是商机，我就写opp…，我想查询客户，我就写account）

2.这里我们设置下拉框的行高

3.对商机进行筛选

4.提供一个save，这行代码我没有复制出来，因为标准页面上是不存在保存这个按钮的，但是在很多的情况下保存键好像必不可少，所以我把这行代码复制给你们

5.显示的字段信息

6.下面就是css样式

7.这里提醒一下各位同学，就是在css样式里面有一个text-decoration这个单词，这个是鼠标移动至字体下方出现下划线，移除时隐藏下划线就像现在这样在鼠标没有移动至某个对象或者客户下面的下划线是没有的，

当我们把鼠标移动至客户下面时，下划线就会出现

欧克，今天的知识就搞定啦。。。