phpMyAdmin-like layout

[hallja3]

Sorry for the bad subject line. I really don't how else to explain it in one line.

 

What I have is a simple table. Now, the original design left function icons on each row, like edit, delete, details, etc.

 

Now, the images are small and bandwidth wouldn't be a big deal on an internal application, which is what this will eventually be, but I think it would be more efficient to have a radio button on each row, and then the icons at the top. Selecting the radio button would then get the ID for that row and reflect to the icons at the top of the table. I can add a screenshot if necessary but the code is below. For a javascript wiz this should be a piece of cake, or this might not even involve JS. I want something simple so if it's easier to code a different way please let me know.

 

To mods: Apologies if this needs to be moved based on how the users respond.

 

One more thing. It would be nice to have the row highlight as well when selected, so they know what has been selected.

 

<?php
require_once("../includes/config.php");
require_once("../includes/Sajax.php");
sajax_init();
sajax_export("buildTable", "deletePC");
sajax_handle_client_request();

require_once("../includes/top.php");

if($_SESSION['username'] !== $ADMINUNAME) {
header("Location: ../login.php");
exit;
}

function getTableHeader($sID, $name) {
global $sortID, $sortDir;

$output = '<th><b>';

if ($sortID == $sID) {
	$output .= '<img src="/sort_'.$sortDir.'.gif" style="padding-right: 3px;" />';
}

$output .= '<a href="#" onClick="sortTable(\''.$sID.'\')">'.$name.'</a></b></th>';

return $output;
}

function buildTable($sID="username", $sDir="ASC") {
global $sortID, $sortDir;
$sortID = $sID; $sortDir = $sDir;

$result = mysql_query("SELECT * FROM pcinfo LEFT JOIN users ON pcinfo.userID = users.userID LEFT JOIN computer_models ON pcinfo.compID = computer_models.compID ORDER BY ".$sortID." ".$sortDir) or die(mysql_error());

$numrows = mysql_num_rows($result);

//row colors
$highlightcolor = "#EEEEEE";
$color1 = "#F8F8FF";         
$color2 = "#FFFFFF";  

$numrows = 0;

//build table
if ($result) {

	$html = '
	<h1 align="center">PC Info</h1>
	[ <a href="add.php" onclick="return hs.htmlExpand(this, { objectType: \'iframe\', width: 300 } )">Add Record</a> ]<br /><br />
	<div align=left><a href="details.php?id='.$getpcID.'" onclick="return hs.htmlExpand(this, { objectType: \'iframe\', width: 700 } )"><img src=../images/details.png border=0></a> - 
	<a href="edit.php?id='.$getpcID.'" onclick="return hs.htmlExpand(this, { objectType: \'iframe\', width: 500 } )"><img src=../images/edit.png border=0></a> - 
	<a href="#"><img src="../images/delete.png" border="0" id="delete'.$getpcID.'" onClick="deletePC('.$getpcID.')"></a> - 
	<a href=mailto:'.$getUsername].'@bpbarber.com><img src=../images/email.png border=0></a></div>
	<table width=950 border=0 cellspacing=2 cellpadding=2>
		<tr>
			<th></th>'.
			getTableHeader("username", "Username").
			getTableHeader("pcName", "Computer Name").
			getTableHeader("compModel", "Computer Type").
			getTableHeader("pcST", "Service Tag").
			getTableHeader("pcESC", "Exp. Serv. Code").
			getTableHeader("pcUpdated", "Last Updated").'
		</tr>';

	while ($myrow = mysql_fetch_array($result)) {

		$rowcolor = ($numrows % 2) ? $color1 : $color2;

		$html.= '
		<tr bgcolor="'.$rowcolor.'" onMouseOver="this.style.backgroundColor=\''.$highlightcolor.'\';" onMouseOut="this.style.backgroundColor=\''.$rowcolor.'\';">
			<td><input type="radio" id="id" name="id" value="'.$myrow[pcID].'"></td>
			<td>'.$myrow["username"].'</td>
			<td>'.$myrow["pcName"].'</td>
			<td>'.$myrow["compModel"].'</td>
			<td>'.$myrow["pcST"].'</td>
			<td>'.$myrow["pcESC"].'</td>
			<td>'.date("m.d.Y", strtotime($myrow["pcUpdated"])).'</td>
		</tr>';	

		$numrows++;
	}

	$html.= '</table>';

	return $html;
}
}

function deletePC($id) {
mysql_query("DELETE FROM pcinfo WHERE pcID='{$id}'");
}

?>

<script type="text/javascript">
var sortDir = "ASC";
var sortID = "username";

function sortTable(id) {
var id = (id == null) ? "username" : id;
if (sortDir == "ASC")
	sortDir = "DESC";
else
	sortDir = "ASC";
sortID = id;
refreshTable();
}

function refreshTable() {
x_buildTable(sortID, sortDir, updateTable);
}

function updateTable(html) {
document.getElementById('pcinfoTable').innerHTML = html;
}

function deletePC(id) {
if(confirmDelete(id)) {
	var deleteID = 'delete' + id;
	var el = document.getElementById(deleteID);
	el.onclick = '';
	el.setAttribute('src', '../images/delete_off.png');
	//call delete function
	x_deletePC(id, null);
	refreshTable();
}
}

function confirmDelete(id) {
return confirm("Do you want to delete this item?")
}

<?php sajax_show_javascript(); ?>

</script>

<?php

echo '<div id="pcinfoTable">'.buildTable().'</div>';
#you must put this at the bottom of every page    
showFooter();

?>