Sometime we need to create table in visual force page with html elements with same look and feel as standard pageblocktable. So we did not need to add extra style class in html table. We can do it with the standard style classes.
the data to the pageblocktable will be queried from the javascript using sforce.execute.query
the data to the pageblocktable will be queried from the javascript using sforce.execute.query
We need to do a little work to search the standard class name from pageblockTable and add those classes to custom html table:
As I have taken a simple example to show how to use the standard style class:
Visual Force page code:
<style>
tr.dataRow {
background-color:white;
}
tr.dataRow:hover {
background-color: #e3f3ff;
};
</style>
<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="../../soap/ajax/31.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = setupPage;
function setupPage() {
sforce.connection.query("Select Id,Name,BillingCity,BillingState from Account 1000",
{onSuccess : layoutResults,
onFailure : queryFailed,
source : {
output : document.getElementById("output"),
startTime : new Date().getTime()
}
});
}
function queryFailed(error, source) {
source.output.innerHTML = "<font color 'red'>An error has occurred: </font> <p>" + error;
}
function layoutResults(queryResult, source) {
if (queryResult.size > 0) {
var output = "<table class='list' border='0' cellpadding='0' cellspacing='0'><tr class='headerRow'>";
output +="<th class='headerRow'> Account Name</th><th class='headerRow'> Billing City </th><th class='headerRow'> Billing Country</th>";
//get the records array
var records = queryResult.getArray('records');
//loop through the records and construct html string
for (var i = 0; i < records.length; i++) {
var account = records[i];
output += "<tr class='dataRow'><td class='dataCell'>"+ account.Name + "</td><td class='dataCell'>" + account.BillingCity +
"</td><td class='dataCell'>" + account.BillingState + "</td></tr>";
}
output =output+"</td></tr></table>"
//render the generated html string
source.output.innerHTML = output;
}
}
</script>
<apex:pageBlock >
<div id="output" ></div>
</apex:pageBlock>
</apex:page>
No comments :
Post a Comment