-
Notifications
You must be signed in to change notification settings - Fork 0
/
autowidth.html
142 lines (136 loc) · 4.53 KB
/
autowidth.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<div style="font-size:12px;" >
In this example we demonstarte two new options in jqGrid autowidth and rownumbers. <br/>
When autowidth is set to true the grid fits to the width of the parent container.<br/>
This option does not resize the grid when the width of the parent container changes. <br/>
In order to do that a method setGridWidth should be used again with binding a event to the container <br/>
The optin rownumbers add additional column which count the rows <br/><br/>
</div>
<table id="lista1"></table>
<div id="pagera1"></div>
<br/>
<br/>
<div id="acc_list1">
<div>
<h3><a href="#">HTML and Java script </a></h3>
<div style="font-size:12px;">
<XMP>
<html>
...
<table id="lista1"></table>
<div id="pagera1"></div>
...
</html>
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#lista1").jqGrid({
url:'server.php?q=1',
datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', 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,
autowidth: true,
rownumbers: true,
rowList:[10,20,30],
pager: '#pagera1',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"XML Example"
});
jQuery("#lista1").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
</script>
</XMP>
</div>
</div>
<div>
<h3><a href="#">PHP Code</a></h3>
<div style="font-size:12px;">
<XMP>
<?php
$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());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8"); } else {
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row[id]."'>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[invdate]."</cell>";
echo "<cell><![CDATA[". $row[name]."]]></cell>";
echo "<cell>". $row[amount]."</cell>";
echo "<cell>". $row[tax]."</cell>";
echo "<cell>". $row[total]."</cell>";
echo "<cell><![CDATA[". $row[note]."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>
</XMP>
</div>
</div>
</div>
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#lista1").jqGrid({
url:'server.php?q=1',
datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', 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,
rownumbers: true,
autowidth: true,
gridview: true,
rowList:[10,20,30],
pager: '#pagera1',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Auto Numbering and autowidth"
});
jQuery("#lista1").jqGrid('navGrid','#pagera1',{edit:false,add:false,del:false});
});
</script>