jQWidgets의 jqxGrid
홈페이지 예제를 보면 "Bind jQuery Grid to MySql Database using PHP"라는 예제가 있는데 DB가 mysql이어서 postgresql을 사용하는 사람으로서 약간의 연습이 필요해 보였다. 약간의 코드 수정이 있어서 남긴다.
먼저 connect.php
<?php# FileName="connect.php"
# for postgresql$conn_string = "host=localhost dbname=northwind user=postgres password=qwerty"
# for mysql#$hostname = "localhost";#$database = "northwind";#$username = "postgres";#$password = "12345678";
?>
그리고 data.php
<?php
#Include the connect.php file
include ('connect.php');
// Connect to the database
$dbconn = pg_connect($conn_string) or die('Could not connect: ' . pg_last_error());
// Performing SQL query
$query = "SELECT CompanyName, ContactName, ContactTitle, Address, City FROM customers";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
//echo var_dump($line);
$customers[] = array(
'CompanyName' => $line["companyname"],
'ContactName' => $line["contactname"],
'ContactTitle' => $line["contacttitle"],
'Address' => $line["address"],
'City' => $line["city"]
);
}
//echo var_dump($customers);
echo json_encode($customers);
// Free resultset
pg_free_result($result);
// Closing connection
pg_close($dbconn);
?>
마지막으로 jqxGrid_01.html
<!DOCTYPE html>
<html>
<head>
<title>jqxGrid 01</title>
<!-- add one of the jQWidgets styles -->
<link rel="stylesheet" href="/jqwidgets-ver5.3.2/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/jqwidgets-ver5.3.2/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
<link rel="stylesheet" href="/jqwidgets-ver5.3.2/jqwidgets/styles/jqx.classic.css" type="text/css" />
<!-- add the jQuery script -->
<script type="text/javascript" src="/jqwidgets-ver5.3.2/scripts/jquery-1.11.1.min.js"></script>
<!-- add the jQWidgets framework -->
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxcore.js"></script>
<!-- add one or more widgets -->
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxgrid.selection.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source ={
datatype: "json",
datafields: [ { name: 'CompanyName' },
{ name: 'ContactName' },
{ name: 'ContactTitle' },
{ name: 'Address' },
{ name: 'City' },],
url: 'data.php'
};
$("#jqxgrid").jqxGrid({
source: source,
theme: 'classic',
columns: [ { text: 'Company Name', datafield: 'CompanyName', width: 250 },
{ text: 'ContactName', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'Address', datafield: 'Address', width: 200 },
{ text: 'City', datafield: 'City', width: 120 }]
});
});
</script>
<div id="jqxgrid"></div>
</body>
</html>
브라우저에서 jqxgrid_01.html을 불러오면 다음과 같다.
northwind database를 만들 때 컬럼 네임에 겹 따옴표가 되어 있어서 나중에 문제가 생겼다. 다음은 겹 따옴표를 없앤 northwind database를 만드는 스크립트. 참 외국 사람들은 별 걸 다 만들어서 웹에 공개하네.
'ETC' 카테고리의 다른 글
| jqWidgets의 jqxGrid : server side sorting (0) | 2017.10.29 |
|---|---|
| jqWidgets의 jqxGrid : server side sorting and paging (0) | 2017.10.28 |
| 윈도우에 Apache, PHP, PostgreSQL의 설치 3 (0) | 2015.11.27 |
| 윈도우에 Apache, PHP, PostgreSQL의 설치 2 (0) | 2015.11.27 |
| 윈도우에 Apache, PHP, PostgreSQL의 설치 1 (0) | 2015.11.24 |