Last active
August 29, 2015 13:56
-
-
Save tyoshikawa1106/9167971 to your computer and use it in GitHub Desktop.
VisualforceページでAngularJSをつかった検索
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page showHeader="true" sidebar="false"> | |
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" /> | |
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"/> | |
<c:RemoteTK /> | |
<style type="text/css"> | |
#vf-page .webparkList input { | |
background-color: transparent; | |
border-style: none; | |
} | |
#vf-page table.webparkList { | |
border-spacing: 0; | |
font-size:12px; | |
} | |
#vf-page table.webparkList th { | |
color: #fff; | |
padding: 8px 15px; | |
background: #258; | |
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%); | |
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9))); | |
font-weight: bold; | |
border-left:1px solid #258; | |
border-top:1px solid #258; | |
border-bottom:1px solid #258; | |
line-height: 120%; | |
text-align: center; | |
} | |
#vf-page table.webparkList tr td { | |
padding: 8px 15px; | |
border-bottom: 1px solid #84b2e0; | |
border-left: 1px solid #84b2e0; | |
} | |
#vf-page table.webparkList tr { | |
background: #fff; | |
} | |
#vf-page table.webparkList tr:nth-child(2n+1) { | |
background: #f1f6fc; | |
} | |
#vf-page table.webparkList tr:last-child td { | |
box-shadow: 2px 2px 1px rgba(0,0,0,0.1); | |
} | |
#vf-page table.webparkList tr:hover { | |
background: #bbd4ee; | |
} | |
</style> | |
<div id="vf-page" class="ng-app"> | |
<div ng-controller="mainCtrl"> | |
<apex:pageBlock title="{!$ObjectType.ApexPage.Label}"> | |
<input class="form-control" type="text" placeholder="Search" ng-model="query" style="width:300px;padding:5px;" /> | |
<table class="webparkList" style="width:100%;"> | |
<thead> | |
<tr> | |
<th style="width:300px;"> | |
<apex:outputText value="{!$ObjectType.ApexPage.Fields.Name.Label}" /> | |
</th> | |
<th> | |
<apex:outputText value="{!$ObjectType.ApexPage.Fields.Description.Label}" /> | |
</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="item in lists|filter:query"> | |
<td> | |
<apex:outputLink value="/{{item.Id}}"> | |
<apex:outputText value="{{item.Name}}" /> | |
</apex:outputLink> | |
</td> | |
<td> | |
<apex:outputText value="{{item.Description}}" /> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</apex:pageBlock> | |
</div> | |
</div> | |
<script> | |
function mainCtrl($scope){ | |
var force = new remotetk.Client(); | |
var soql = "SELECT Id, Name, MasterLabel,Description FROM ApexPage ORDER BY Name ASC LIMIT 1000"; | |
force.query( | |
soql, | |
function(result){ | |
$scope.lists = result.records; | |
$scope.$apply(); | |
}, | |
function(result){ | |
console.log('Exception = ' + result); | |
} | |
); | |
} | |
</script> | |
</apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment