Geek Answers Handbook

Editable JQuery Grid Recommendations with REST API

Firstly, I already read the question " jQuery Grid Recommendations ", but it does not answer my question.

I have a small REST API with the MongoDB website :

Get all the equipment:

GET /equipements HTTP/1.1 {{_id:key1, name:Test Document 1, plateforme:prod}, {_id:key2, name:Test Document 2, plateforme:prod}, ...}

Get keyfob: key1

 GET /equipements/key1 HTTP/1.1 {"_id": "key1", "name": "Test Document 1", "plateforme": "prod"}

Add new equipment

 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 the lambda user to add / view / supplement equipment. So, I think the web interface with jQuery as a user interface is the best. I tried with Sencha Rest Proxy , but I do not know javascript, and I can not adapt this example.

How to fix my javascript for my REST server?

AND / OR

Can you recommend a simpler alternative to the Sencha Rest proxy? (which works with my REST database)

Answer: jqGrid

AND / OR

In which jQuery Grid would you recommend me? (which works with my REST backend)

Answer: jqGrid

The final question . Why are my cells not being edited with a double click?

Applications

Server Side (EDIT: Add POST Method)

 #!/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>
+7
source share
1 answer

You can use jqGrid to communicate with the RESTfull service. jqGrid supports tree editing modes: cell editing, inline editing and form editing. In addition, inline editing can be initialized in many ways. For example, you can call the editRow method inside the onSelectRow or ondblClickRow or use navGrid to add the Delete button in the navigator toolbar and inlineNav to add the Add and Change buttons. Another way would be to use the formatter: “actions” to enable the “editing” of buttons in a single grid column. You can find all the official jqGrid demo . You can find more information about technical implementation in the answer .

I consider it important that you understand another important aspect of using RESTfull services in the web interface. The problem is that the standard RESTfull API does not have any standard interface for sorting, swapping and filtering data. I will try to explain the problem below. After this, I hope that it will be clear that my recommendation is to extend the existing standard RESTfull API with additional methods that have additional parameters and which provide sorting, swapping and filtering functions.

The problem is very easy to understand if you have a large data set. It makes no sense to display, for example, 10,000 rows of data at the same time. The user cannot see the data on the screen without searching or swapping data. Moreover, for the same reasons, it makes sense to sort and even filter data. Therefore, it is much more practical to display only one page of data at the beginning and provide the user with some interface for swapping data. In the standard pager jqGrid, which looks like

enter image description here

the user can go to the "Next", "Last", "Previous" or "First" pages or select the page size:

enter image description here

Additionally, the user can specify the desired page by directly entering a new page and pressing Enter :

enter image description here

In the same way, the user can click the header of any column to sort the grid data by column:

enter image description here

Another very important element of the user interface (important from the point of view of users) may be some filtering interface, for example here or a search interface for example here .

I will give you an example from jqGrid, but I find the problem common. I want to emphasize that the RESTfull service does not provide a standard interface for sorting, swapping and filtering data .

When using jqGrid URL, RESTfull will receive additional parameters by default. These are: page , rows , which determine the page number and page size that will be set in the service parameters, sidx and sord , which specify the sort column and sort direction, and _search and filters (the latter is in the format ), which allows filtering. If necessary, you can rename the parameters using the prmNames jqGrid option.

I recommend that you read the answer to the question that is asked regarding URL encoding. I think that the part _search=false&rows=20&page=1&sidx=&sord=asc does not belong to the resource and therefore it is better to send information as parameters, and not as part of the URL.

Basically, I wanted to express in my answer that using a pure classic RESTfull API is not enough to implement a good user interface. You will have to expand the interface with additional parameters used for swapping, sorting and filtering, or you will not be able to create a convenient and convenient web interface.

+7
source

More articles:


All Articles