This example show two new methods:
1. hideCol(colname) - hide a column with a given colname and
2. showCol(colname) - show a column with a given colname.
3. We can hide a column when the grid is initialized using a new property 'hidden' in colModel
Example: {name:'invdate',index:'invdate', width:90, hidden:true} will hide a column Date
Known Bugs
1. In Safari header column does not disappear when hideCol is executed
2. IE has bad behavior when column is resizable and hideCol is executed. Cursor position of the resizable column does not change.
Hide column Tax
Show column Tax
HTML
<![CDATA[
...
<table id="list17" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager17" class="scroll" style="text-align:center;"></div>
<a href="javascript:void(0)" id="hc">Hide column Tax</a><br/>
<a href="javascript:void(0)" id="sc">Show column Tax</a>
]]>
Java Scrpt code
<![CDATA[
...
jQuery("#list17").jqGrid({
url:'server.php?q=2&nd='+new Date().getTime(),
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager17'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Dynamic hide/show columns"
}).navGrid("#pager17",{edit:false,add:false,del:false});
jQuery("#hc").click( function() {
jQuery("#list17").hideCol("tax");
});
jQuery("#sc").click( function() {
jQuery("#list17").showCol("tax");
});
]]>
PHP with MySQL
<![CDATA[
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
echo json_encode($responce);
...
]]>