与REST API可编辑的jQuery网建议(Editable jQuery Grid Recomm

首先，我已经阅读问题“ 的jQuery网建议 ”，但它并没有回答我的问题。

我有一个小用MongoDB的后端REST API只是：

获取所有设备公司：

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

获取设备公司与关键：KEY1

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

添加新的设备公司

PUT /equipements HTTP/1.1  {"_id": "key8", "name": "Test Document 3", "plateforme": "prod"}
HTTP/1.0 200 OK

现在，我需要找到一种简单的方法，让拉姆达用户添加/浏览/删除设备。因此，我认为有一个jQuery UI像一个web界面是最好的。我试着用煎茶休息代理，但我不知道JavaScript和我无法适应的例子。

如何解决我的javascript对我的REST后台？

AND / OR

你可以推荐给煎茶休息代理一个简单的替代方案？ （这与我的REST后端的作品）

答：jqGrid的

AND / OR

什么jQuery的网格，你会推荐我吗？ （这与我的REST后端的作品）

答：jqGrid的

最后一个问题 ：为什么我的电池是不能编辑，双击？

附录

服务器端（编辑：添加梅索德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)

编辑：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>

您可以使用的jqGrid与您问题的REST服务进行通信。 jqGrid的支持树编辑模式：单元格编辑，在线编辑和表单编辑。而且内联编辑可以用不同的方式进行初始化。例如，一个可以调用editRow方法的内部onSelectRow或ondblClickRow回调或使用navGrid添加“删除”的按钮导航工具栏和inlineNav增加“添加”和“编辑”按钮。另一种方法将使用格式：“动作”包括在网格中的一列“编辑”按钮。你可以找到所有的方式正式jqGrid的演示。更多的技术实现细节你可以找到答案。

我发现，你理解的问题的REST服务的web前端使用的另一个重要方面亲自重要。的问题是，标准API REST类型不用于分选，寻呼和数据的任何过滤标准的接口。我试着在下面解释的问题。从那以后，我希望这将是清楚我的建议，与具有额外的参数，以及提供排序，分页和过滤功能的其他方法来扩展当前的标准问题的REST API。

这个问题是很容易理解，如果你有大量的数据集。它没有任何意义的一次例如在网格显示万行数据。用户是无法看到屏幕上的数据，而不scolling或数据的分页。。此外，因为同样的原因，它的意义来实现排序和过滤，甚至数据。因此，它是更实际的在开始时只显示一个数据的页面，给用户一些接口，用于数据分页。在标准寻呼机的jqGrid的，看起来像

用户可以到“下一步”，“上”，“上一页”或“第一”页面或选择页面大小：

此外，用户可以通过新的页面直接输入指定所需的页面，并按下回车键的：

以同样的方式，用户可以在任何列的标题点击由列网格数据进行排序：

另一个非常重要的用户界面元素（从用户的角度看是重要的）可以像一些过滤界面这里例如或类似的搜索界面这里。

我给你举例从jqGrid的，但我觉得这个问题是共同的。 我想强调的是REST类型的服务为您提供了排序，分页和过滤数据没有标准的接口 。

在使用jqGrid的的情况下，问题的REST URL会默认附加参数得到。它是： page ， rows其指定的页码和从服务，被要求在网页大小sidx和sord其指定排序列参数和排序方向和_search和filters （最后是格式），它允许支持过滤。如果使用需要一个可以重命名参数prmNames jqGrid的的选项。

我建议你阅读的答案上被问及的URL编码的问题。我认为，部分_search=false&rows=20&page=1&sidx=&sord=asc是不是属于资源，因此最好将信息发送作为参数，而不是作为URL的一部分。

我想主要是我的回答表达的是纯粹的经典问题的REST API的使用不足以实现良好的用户界面。你必须将接口用于寻呼附加参数，排序和过滤扩展或者您将不能创建高性能和用户友好的Web GUI。