netpumber on Search with select method and data from a xml file.

Wed, 02 Nov 2011 21:23:06 +0200

Hello.. I was reading the jqgrid documentation today and i have create a simple table that gets its data from a mysql database with the help of PHP.

Here is the code :

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

$(function(){

mygrid = $("#list");

mygrid.jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[
      {name:'invid', index:'invid', width:55},
      {name:'invdate', index:'invdate', width:90},
      {name:'amount', index:'amount', width:80, align:'right', edittype:'select', search:true , stype:'select',
      searchoptions:{value:':All;8:8.00;6:6.00'}},
      {name:'tax', index:'tax', width:80, align:'right'},
      {name:'total', index:'total', width:80, align:'right', sortable:true},
      {name:'note', index:'note', width:150, sortable:false, align:'center'}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'tax',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'My first grid'
});
// Search toolbar.
mygrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "bw"});

});
</script>

</head>
<body>

</body>
</html>

example.php

<?php
$page = 1; //$_GET['page'];

// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = 9; //$_GET['rows'];

// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = 'invid'; //$_GET['sidx'];

// sorting order - at first time sortorder
$sord = 'invid' ;//$_GET['sord'];

// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;

// connect to the MySQL database server
$db = mysql_connect('localhost', 'user', 'user123') or die("Connection Error: " . mysql_error());
$database = 'test';
// select the database
mysql_select_db($database) or die("Error connecting to db.");

// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}

// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;

// calculate the starting position of the rows
$start = $limit*$page - $limit;

// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;

// the actual query for the grid data
$SQL = "SELECT invid, invdate, amount, tax, total, note FROM invheader ORDER BY $sidx , $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());

// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");

$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";

// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $s .= "<row id='". $row['invid']."'>";
    $s .= "<cell>". $row['invid']."</cell>";
    $s .= "<cell>". $row['invdate']."</cell>";
    $s .= "<cell>". $row['amount']."</cell>";
    $s .= "<cell>". $row['tax']."</cell>";
    $s .= "<cell>". $row['total']."</cell>";
    $s .= "<cell><![CDATA[". $row['note']."]]></cell>";
    $s .= "</row>";
}
$s .= "</rows>";

echo $s;

As you can see i have add in the third column (Amount) the abbility to be searched with e select menu.

The column amount has only this values (6.00 and 8.00). The problem is that i cannot make the select menu work.

I believe that xml file is responsible for this.

Does anyone know how can i make it work ?

Thanks in advance.

jQuery Grid Plugin - jqGrid - Topic: Search with select method and data from a xml file.

netpumber on Search with select method and data from a xml file.