php数据库获取
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
<script type="text/ecmascript" src=" js/bootstrap-datepicker.js" ></script>
<script type="text/ecmascript" src=" js/bootstrap3-typeahead.js" ></script>
<link rel="stylesheet" type="text/css" media="screen" href= "css/bootstrap-datepicker.css" />
<script >
$ .jgrid. defaults.width = 780;
$ .jgrid. defaults.responsive = true;
$ .jgrid. defaults.styleUI = 'Bootstrap';
</script >
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="js/i18n/grid.locale-en.js" ></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="js/jquery.jqGrid.js" ></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" media="screen" href= "css/ui.jqgrid-bootstrap.css" />
<script type="text/javascript">
$("#jqGrid").jqGrid({
url: 'data.json',
editurl: 'clientArray',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ label: 'Order ID', name: 'OrderID', key: true, width: 75 },
{
label: 'Order Date',
name: 'OrderDate',
width: 150,
editable: true,
edittype:"text",
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
orientation : 'bottom'
});
}
}
},
{
label: 'Customer ID',
name: 'CustomerID',
width: 150,
editable: true,
edittype: "select",
editoptions: {
value: "ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FISSA:FISSA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PARIS:PARIS;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA"
}
},
{
label: 'Freigh',
name: 'Freight',
width: 150,
editable: true,
edittype: "custom",
editoptions: {
custom_value: getFreightElementValue,
custom_element: createFreightEditElement
}
},
{
label: 'Ship Name',
name: 'ShipName',
width: 150,
editable: true,
edittype: "text",
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).attr("autocomplete","off").typeahead({
appendTo : "body",
source: function(query, proxy) {
$.ajax({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletepbs.php?callback=?&acelem=ShipName',
dataType: "jsonp",
data: {term: query},
success : proxy
});
}
});
}
}
}
],
loadonce : true,
viewrecords: true,
height: 250,
rowNum: 10,
pager: "#jqGridPager"
});
$("#jqGrid").navGrid("#jqGridPager",
{ edit: true, add: false, del: false, search: false, refresh: true, view: false, align: "left" },
{ closeAfterEdit: true, focusField : 1 }
);
function createFreightEditElement(value, editOptions) {
var div =$("<div style='margin-bottom:5px;margin-top:-10px;'></div>");
var label = $("<label class='radio-inline'></label>");
var radio = $("<input>", { type: "radio", value: "0", name: "freight", id: "zero", checked: (value != 25 && value != 50 && value != 100) });
label.append(radio).append("0");
var label1 = $("<label class='radio-inline'></label>");
var radio1 = $("<input>", { type: "radio", value: "25", name: "freight", id: "twentyfive", checked: value == 25 });
label1.append(radio1).append("25");
var label2 = $("<label class='radio-inline'></label>");
var radio2 = $("<input>", { type: "radio", value: "50", name: "freight", id: "fifty", checked: value == 50 });
label2.append(radio2).append("50");
var label3 = $("<label class='radio-inline'></label>");
var radio3 = $("<input>", { type: "radio", value: "100", name: "freight", id: "hundred", checked: value == 100 });
label3.append(radio3).append("100");
div.append(label).append(label1).append(label2).append(label3);
return div;
}
// The javascript executed specified by JQGridColumn.EditTypeCustomGetValue when EditType = EditType.Custom
// One parameter passed - the custom element created in JQGridColumn.EditTypeCustomCreateElement
function getFreightElementValue(elem, oper, value) {
if (oper === "set") {
var radioButton = $(elem).find("input:radio[value='" + value + "']");
if (radioButton.length > 0) {
radioButton.prop("checked", true);
}
}
if (oper === "get") {
return $(elem).find("input:radio:checked").val();
}
}
})
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
example.php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password
// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_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','heiyu', '5lWSqk3T') or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db('ceshi') 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;
?>