jqgrid Example - jordy33/turbogears_tutorial GitHub Wiki
Change to the directory:
cd ~/myprojectname/myprojectname/templates
Add the file test.mak in the templates folder and paste the following:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-es.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" type="text/css"/>
<meta charset="utf-8" />
<title>jqGrid Loading Data - Million Rows from a REST service</title>
</head>
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
});
</script>
</body>
</html>
Change to the directory:
cd ~/myprojectname/myprojectname/controllers
Open the file root.py and add the following at the end and save the file:
@expose('myprojectname.templates.test')
def test(self):
return dict()
Run Server and test
cd ~/myprojectname
gearbox serve -c production.ini
Go To Chrome and open the following URL
http://sun.dudewhereismy.mx:2000/test
Stop the server with ctrl-c
Change directory
cd ~/myprojectname/myprojectname/templates
Create file telefonica.mak and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-es.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" type="text/css"/>
<script src="${tg.url('/javascript/jquery-validation-1.17.0/dist/jquery.validate.js')}"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data - Million Rows from a REST service</title>
</head>
<body>
<table style="width:100%;overflow:auto;">
<table id="jqGridTable" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="listPagerTables" class="scroll" style="text-align:center;"></div>
<div id="listPsetcols" class="scroll" style="text-align:center;"></div>
<div id="dialogLoanWindow" title="Add a Loan">
</table>
<script type="text/javascript">
$(document).ready(
function () {
var grid_name = '#jqGridTable';
var grid_pager= '#listPagerTables';
var load_url='/loadjqgridtelefonica/';
var header_container='Phone Book';
var grid = jQuery(grid_name);
grid.jqGrid({
url: load_url,
datatype: 'json',
mtype: 'GET',
colNames: ['id', 'ICC','life cicle status'],
colModel: [
{name: 'id',index: 'id', width: 5,align: 'left',key:true,hidden: true, editable: true,edittype: 'text',editrules: {required: false}},
{name: 'icc',index: 'icc', width: 25, align: 'right', hidden: false, editable: true, edittype: 'text',editrules: {required: false}},
{name: 'lifecyclestatus',index: 'lifeciclestatus', width: 5, align: 'right',hidden: false,editable: true, edittype: 'text',editrules: {required: false}},
],
pager: jQuery(grid_pager),
rowNum: 10,
rowList: [10, 50, 100],
sortname: 'name',
sortorder: "asc",
viewrecords: true,
autowidth: true,
height: 250,
ondblClickRow: function(rowId) {
doDoubleClick(rowId)
},
caption: header_container,
});
});
$.extend($.jgrid.nav,{alerttop:1});
</script>
</body>
</html>
Change to the directory:
cd ~/myprojectname/myprojectname/controllers
Add the following code to root.py
@expose('myprojectname.templates.telefonica')
def telefonica(self):
return dict()
@expose('json')
def loadjqgridtelefonica(self,**kw):
for x,y in kw.items():
print("{} {}".format(x,y))
page=kw["page"]
records = []
print(page)
if page=="1":
totalPages=2
selectedpage=1
id="1"
icc="2345897458759"
lifecyclestatus="life1"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
id="2"
icc="3452345235545"
lifecyclestatus="life2"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
totalRecords=len(records)
id="3"
icc="323232323233223"
lifecyclestatus="life3"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
totalRecords=len(records)
id="4"
icc="2345897458759"
lifecyclestatus="life1"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
id="5"
icc="3452345235545"
lifecyclestatus="life2"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
totalRecords=len(records)
if page=="2":
totalPages=2
selectedpage=2
id="6"
icc="323232323233223"
lifecyclestatus="life3"
records.append({'id': id, 'cell': [id,icc,lifecyclestatus]})
totalRecords=len(records)
return dict(total=totalPages, page=selectedpage, records=totalRecords, rows=records)
Change directory to:
cd ~/myprojectname
gearbox serve -c production.ini
Test code
http://sun.dudewhereismy.mx:2000/telefonica
[Back]