First, i already read the question "jQuery Grid Recommendations" but it doesn't answer to my question.
I have a small REST API with MongoDB Backend just :
Get all equipements :
GET /equipements HTTP/1.1
{{_id:key1, name:Test Document 1, plateforme:prod}, {_id:key2, name:Test Document 2, plateforme:prod}, ...}
Get equipement with the key : key1
GET /equipements/key1 HTTP/1.1
{"_id": "key1", "name": "Test Document 1", "plateforme": "prod"}
Add new equipement
PUT /equipements HTTP/1.1 {"_id": "key8", "name": "Test Document 3", "plateforme": "prod"}
HTTP/1.0 200 OK
Now, I need to find an easy way to allow lambda user to add/view/del equipments. So i think a web interface with a jQuery like UI is the best. I tried with Sencha Rest Proxy but I do not know javascript and I fails to adapt the example.
How fix my javascript for my REST backend?
AND/OR
Can you recommend a simpler alternative to Sencha Rest Proxy? (which works with my REST backend)
Answer : jqGrid
AND/OR
What jQuery Grid would you recommend me? (which works with my REST backend)
Answer : jqGrid
Final question : Why my cells are not editable with double click ?
Appendices
Server Side (EDIT : Add methode POST)
#!/usr/bin/python
import json
import bottle
from bottle import static_file, route, run, request, abort, response
import simplejson
import pymongo
from pymongo import Connection
import datetime
class MongoEncoder(simplejson.JSONEncoder):
def default(self, obj):
# convert all iterables to lists
if hasattr(obj, '__iter__'):
return list(obj)
# convert cursors to lists
elif isinstance(obj, pymongo.cursor.Cursor):
return list(obj)
# convert ObjectId to string
elif isinstance(obj, pymongo.objectid.ObjectId):
return unicode(obj)
# dereference DBRef
elif isinstance(obj, pymongo.dbref.DBRef):
return db.dereference(obj)
# convert dates to strings
elif isinstance(obj, datetime.datetime) or isinstance(obj, datetime.date) or isinstance(obj, datetime.time):
return unicode(obj)
return simplejson.JSONEncoder.default(self, obj)
connection = Connection('localhost', 27017)
db = connection.mydatabase
@route('/static/<filename:path>')
def send_static(filename):
return static_file(filename, root='/home/igs/restlite/static')
@route('/')
def send_static():
return static_file('index.html',root='/home/igs/restlite/static/')
@route('/equipements', method='PUT')
def put_equipement():
data = request.body.readline()
if not data:
abort(400, 'No data received')
entity = json.loads(data)
if not entity.has_key('_id'):
abort(400,'No _id specified')
try:
db['equipements'].save(entity)
except ValidationError as ve:
abort(400, str(ve))
@route('/equipements', method='POST')
def post_equipement():
data = request.forms
if not data:
abort(400, 'No data received')
entity = {}
for k,v in data.items():
entity[k]=v
if not entity.has_key('_id'):
abort(400,'No _id specified')
try:
db['equipements'].save(entity)
except ValidationError as ve:
abort(400, str(ve))
@route('/equipements/:id', methodd='GET')
def get_equipement(id):
entity = db['equipements'].find_one({'_id':id})
if not entity:
abort(404, 'No equipement with id %s' % id)
return entity
@route('/equipements', methodd='GET')
def get_equipements():
entity = db['equipements'].find({})
if not entity:
abort(404, 'No equipement')
response.content_type = 'application/json'
entries = [entry for entry in entity]
return MongoEncoder().encode(entries)
run(host='0.0.0.0', port=80)
EDIT : JQGrid :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rest Proxy Example</title>
<link rel="stylesheet" type="text/css" href="/static/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="/static/css/jquery-ui-1.8.20.custom.css" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/static/js/grid.locale-fr.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var lastsel;
jQuery("#list2").jqGrid({
url:'equipements',
datatype: "json",
colNames:['Id','Name', 'Plateforme'],
colModel:[
{name:'_id',index:'_id', width:50, editable:true},
{name:'name',index:'_id', width:300, editable:true},
{name:'plateforme',index:'total', width:200,align:"right", editable:true},
],
rowNum:30,
rowList:[10,20,30],
pager:'pager2',
sortname: '_id',
viewrecords: true,
width: 600,
height: "100%",
sortorder: "desc",
onSelectRow: function(_id){
if(_id && _id!==lastsel){
jQuery('#liste2').jqGrid('restoreRow',lastsel);
jQuery('#liste2').jqGrid('editRow',_id,true);
lastsel=_id;
}
},
jsonReader: {
repeatitems: false,
id: "_id",
root: function (obj) { return obj; },
records: function (obj) { return obj.length; },
page: function (obj) { return 1; },
total: function (obj) { return 1; }
},
editurl:'equipements',
caption:"Equipements"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
});
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
<br />
</body>
</html>
