JQgrid with window - jordy33/turbogears_tutorial GitHub Wiki
Change to the following directory:
cd ~/myprojectname/myprojectname/model
Delete the file
rm tables.py
Create a new file tables.py and add the following code:
from sqlalchemy.orm import relation,backref,relationship
from datetime import datetime
from sqlalchemy import ForeignKey
from sqlalchemy import Column, Integer, Unicode, DateTime, Numeric
from myprojectname.model import DeclarativeBase
from datetime import datetime
class Tracker(DeclarativeBase):
__tablename__ = 'tracker'
id = Column(Integer, primary_key=True)
imei = Column(Unicode(16))
ticket = Column(Integer)
name = Column(Unicode(50))
class PhoneBook(DeclarativeBase):
__tablename__ = 'phonebook'
id = Column(Integer, primary_key=True)
name = Column(Unicode(30))
birthday = Column(DateTime, default=datetime.now)
age = Column(Integer)
phone = Column(Unicode(20))
loans = relationship('Loans',cascade="all,delete", backref='phonebook')
class Loans(DeclarativeBase):
__tablename__ = 'loans'
id = Column(Integer, primary_key=True)
amount = Column(Numeric(8,2),default=0)
due_date = Column(DateTime, default=datetime.now)
phonebook_id = Column(Integer, ForeignKey('phonebook.id'))
Deleting the previous database: To do that go to mysql
mysql -u gpsuser -p
Inside execute the following commands:
drop database myprojectname;
create database myprojectname;
exit
Then create the new table in mysql with the following command: Change to the directory:
cd ~/myprojectname
And run
gearbox setup-app -c production.ini
The repository for jquery validation is [HERE]
Execute the following:
cd ~/myprojectname/myprojectname/public/javascript
wget https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip
unzip jquery-validation-1.17.0.zip -d jquery-validation-1.17.0
Change Directory
cd ~/myprojectname/myprojectname/templates
Replace phonebook.mak with 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="${tg.url('/javascript/jquery-validation-1.17.0/dist/jquery.validate.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/')}"></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="dialogForm01" title="Add a Loan">
</table>
<script type="text/javascript">
$(document).ready(
function () {
var grid_name = '#jqGridTable';
var grid_pager= '#listPagerTables';
var update_url='/updatePhoneBook';
var load_url='/loadPhoneBook/';
var header_container='Phone Book';
var addParams = {left: 0,width: window.innerWidth-600,top: 20,height: 220,url: update_url, closeAfterAdd: true,closeAfterEdit: true,closeAfterSearch:true}
var editParams = {left: 0,width: window.innerWidth-400,top: 20,height: 220,url: update_url,closeAfterAdd: true,closeAfterEdit: true,closeAfterSearch:true,modal: true,
width: "500",
editfunc: function (rowid) {
alert('The "Edit" button was clicked with rowid=' + rowid);
}
};
var deleteParams = {left: 0,width: window.innerWidth-700,top: 20,height: 130,url: update_url,closeAfterAdd: true,closeAfterEdit: true,closeAfterSearch:true}
var viewParams = {left: 0,width: window.innerWidth-700,top: 20,height: 130,url: update_url,closeAfterAdd: true,closeAfterEdit: true,closeAfterSearch:true}
var searchParams = {top: 20,height: 130,width: "500",closeAfterAdd: true,closeAfterEdit: true,closeAfterSearch:true,url: update_url,modal: true, };
var grid = jQuery(grid_name);
var rowKey = grid.getGridParam('selrow')
grid.jqGrid({
url: load_url,
datatype: 'json',
mtype: 'GET',
colNames: ['id', 'Name','Birthday','Age','Phone'],
colModel: [
{name: 'id',index: 'id', width: 5,align: 'left',key:true,hidden: true, editable: true,edittype: 'text',editrules: {required: false}},
{name: 'name',index: 'name', width: 25, align: 'right', hidden: false, editable: true, edittype: 'text',editrules: {required: false}},
{name: 'birthday',index: 'birthday', formatter: 'date', width: 10,sortable: false,align: 'right',editable: true, editoptions: {size: 20,maxlengh: 10,
dataInit: function (element) {
$(element).datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: false,
showOn: 'button',
buttonText: '...'
});
}
},
formatoptions: {
newformat: "Y-m-d"
},
},
{name: 'age',index: 'age', width: 5, align: 'right',hidden: false,editable: true, edittype: 'text',editrules: {required: false}},
{name: 'phone', index: 'phone', width: 20,align: 'left',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,
});
grid.jqGrid('navGrid',grid_pager,{edit:true,add:true,del:true, search:true},
editParams,
addParams,
deleteParams,
searchParams,
viewParams);
grid.navButtonAdd(grid_pager,
{
buttonicon: "ui-icon-key",
title: "Loan",
caption: "Loan",
position: "last",
onClickButton: loanButtonClicked
});
});
$.extend($.jgrid.nav,{alerttop:1});
function loanButtonClicked() {
var grid = $("#jqGridTable");
var rowid = grid.jqGrid('getGridParam', 'selrow');
if (!rowid){
alert("Select a row")
}
else
{
var winHeight=Math.round(window.innerHeight*.75)
var winWidth=Math.round(window.innerWidth*.86)
// Setup Jquery Validate
var addFilter01Buttons = {
"Add": function() {
if($("#loanForm").valid()){ // test for validity
var am = $('#amount').val();
var dd = $('#due_date').val();
$.ajax({
type: "GET",
url: "${tg.url('/addLoan')}"+"?phone_id="+rowid+"&amount="+am+"&due_date="+dd,
contentType: "application/json; charset=utf-8",
data: { 'param':'gaugeParameters' },
success: function(data) {
// data.value is the success return json. json string contains key value
$('#jqGridTable').trigger( 'reloadGrid' );
},
error: function() {
//alert("#"+ckbid);
$.alert("Error accessing tables/addFilter01", { autoClose:false,});
return true;
},
complete: function() {
}
});
$('#loanForm')[0].reset();
Dialog01.dialog( "close" );
}
},
"Close": function() {
$('#loanForm')[0].reset();
Dialog01.dialog( "close" );
}
};
// Create Dialog
var Dialog01 = $( "#dialogForm01" ).dialog({
autoOpen: false,
height: winHeight-100,
width: winWidth-200,
modal: true,
buttons: addFilter01Buttons,
close: function() {
$('#loanForm')[0].reset();
//form[ 0 ].reset();
//allFields.removeClass( "ui-state-error" );
}
});
// Append html
$.ajax({
type: "GET",
url: "${tg.url('/loanTemplate')}",
contentType: "application/json; charset=utf-8",
data: { 'param':'gaugeParameters' },
success: function(parameterdata) {
//Insert HTML code
$( "#dialogForm01" ).html(parameterdata.loantemplate);
$( "#loanForm" ).validate({
rules: {
amount: {
required: true,
min: 500,
number: true
},
due_date: {
required: true,
},
}
});
Dialog01.data('rowId',1);
Dialog01.dialog( "open" );
},
error: function() {
alert("Error accessing server /loantemplate")
},
complete: function() {
}
});
}
}
</script>
</body>
</html>
Then create the file loantemplate.mak in the same folder:
<script type="text/javascript">
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
startDate: '-3d'
});
</script>
<form id="loanForm">
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" class="form-control" id="amount" name="amount">
</div>
<div class="form-group">
<label for="due_date">Due Date</label>
<br>
<input class="datepicker" id="due_date" name="due_date" data-date-format="yyyy-mm-dd">
</div>
</form>
Change Directory to:
cd ~/myprojectname/myprojectname/controllers
Add the following at the top to root.py
from tg import render_template
from myprojectname.model.tables import Loans
Add at the bottom of root.py
@expose('json')
def loanTemplate(self, **kw):
list = []
loantemplate = render_template({"list": list}, "mako", 'myprojectname.templates.loantemplate')
return dict(loantemplate=loantemplate)
@expose('json')
def addLoan(self, **kw):
phone_id = kw["phone_id"]
amount = kw["amount"]
due_date = kw["due_date"]
print("phone id:{}".format(phone_id))
print("amount:{}".format(amount))
print("due_date:{}".format(due_date))
query = DBSession.query(PhoneBook).filter_by(id=phone_id).first()
if query is not None:
newLoan = Loans()
newLoan.phone_id=phone_id
newLoan.amount=amount
newLoan.due_date=due_date
query.loans.append(newLoan)
DBSession.add(newLoan)
DBSession.flush()
return dict(ok="ok")
Run server and test the code
cd ~/myprojectname
gearbox serve -c production.ini
Run in chrome
http://sun.dudewhereismy.mx:2000/phonebook
[Back]