7

まず、「jQuery Grid Recommendations」という質問を既に読みましたが、私の質問には答えていません。

私は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 インターフェイスが最適だと思います。Sencha Rest Proxy試し てみましたが、javascript がわからず、例を適応させることができませんでした。

REST バックエンドの JavaScript を修正するにはどうすればよいですか?

および/または

Sencha Rest Proxy のよりシンプルな代替案をお勧めできますか? (これは私の REST バックエンドで動作します)

答え: jqGrid

および/または

どの jQuery Grid をお勧めしますか? (これは私の REST バックエンドで動作します)

答え: jqGrid

最後の質問: ダブルクリックでセルを編集できないのはなぜですか?

付録

サーバー側 (EDIT : 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)

編集: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>
4

1 に答える 1

7

jqGrid を使用して、RESTfull サービスと通信できます。jqGrid は、ツリー編集モード (セル編集、インライン編集、フォーム編集) をサポートしています。さらに、インライン編集はさまざまな方法で初期化できます。たとえば、またはコールバック内でeditRowメソッドを呼び出すか、 navGridを使用してナビゲーターツールバーに「削除」ボタンを追加し、 inlineNavを使用して「追加」ボタンと「編集」ボタンを追加できます。別の方法は、formatter: "actions"を使用して、グリッドの 1 つの列に "editing" ボタンを含めることです。公式の jqGrid デモですべての方法を見つけることができます。answerで見つけることができる、より技術的な実装の詳細。onSelectRowondblClickRow

個人的には、Web フロントエンドで RESTfull サービスを使用する際のもう 1 つの重要な側面を理解しておくことが重要だと思います。問題は、標準の RESTfull API が、データの並べ替え、ページング、およびフィルター処理のための標準インターフェイスを備えていないことです。私は以下の問題を説明しようとします。その後、現在の標準 RESTfull API を、追加のパラメーターを持ち、並べ替え、ページング、およびフィルター機能を提供する追加のメソッドで拡張するという私の推奨事項が明確になることを願っています。

大規模なデータセットがある場合、問題は非常に理解しやすいものです。たとえば、一度に 10000 行のデータをグリッドに表示しても意味がありません。ユーザーは、データのスクロールまたはページングなしでは画面上のデータを見ることができません。さらに、同じ理由で、データの並べ替えフィルタリングを実装することにも意味があります。したがって、最初に 1 ページのデータのみを表示し、データをページングするためのインターフェイスをユーザーに提供する方がはるかに実用的です。次のようなjqGridの標準ページャーで

ここに画像の説明を入力

ユーザーは「次」、「最後」、「前」、または「最初」のページに移動するか、ページ サイズを選択できます。

ここに画像の説明を入力

さらに、ユーザーは新しいページを直接入力して を押すことで、目的のページを指定できますEnter

ここに画像の説明を入力

同様に、ユーザーは任意の列のヘッダーをクリックして、グリッド データを列で並べ替えることができます。

ここに画像の説明を入力

もう 1 つの非常に重要なユーザー インターフェイス要素 (ユーザーの観点から重要) は、たとえばここのようなフィルター インターフェイスや、ここのような検索インターフェイスです。

jqGrid の例を示しますが、この問題はよくあることだと思います。RESTfull サービスでは、データの並べ替え、ページング、およびフィルター処理のための標準インターフェイスが提供されないことを強調したいと思います

jqGrid を使用する場合、RESTfull URL はデフォルトで追加のパラメーターを取得します。サービスから要求されるページ番号とページ サイズを指定する とpage、並べ替え列と並べ替え方向を指定するパラメーター、および(最後はの形式で) フィルタリングをサポートできるようにします。必要に応じて、jqGrid のprmNamesオプションを使用してパラメーターの名前を変更できます。rowssidxsord_searchfilters

URL のエンコーディングについて尋ねられる質問の回答を読むことをお勧めします。_search=false&rows=20&page=1&sidx=&sord=ascこの部分はリソースに属さないと思いますので、URLの一部としてではなく、パラメーターとして情報を送信する方が良いでしょう。

私の回答で主に表現したかったのは、純粋な古典的な RESTfull API の使用は、優れたユーザー インターフェイスを実装するのに十分ではないということです。ページング、並べ替え、およびフィルタリングに使用される追加のパラメーターを使用してインターフェイスを拡張する必要があります。そうしないと、パフォーマンスが高くユーザー フレンドリーな Web GUI を作成できなくなります。

于 2012-05-29T12:48:08.587 に答える