16

AJAXをSlickGridで動作させようとしています。与えられた例はDiggのためにハードコードされています。

また、その例ではキャッシュが機能していないと思います。そして、Diggのレート制限のため、それがどのように機能するかを実際に感じるのは難しいです。ページングを使用してデータベースからデータを取得するようにSlickGridを設定するにはどうすればよいですか。

4

4 に答える 4

21

私はちょうどこれを経験したので、ここに私がそれをした方法があります：

  1. example6-ajax-loading.html (SlickGrid ダウンロード内) のコンテンツを html ファイルにコピーします - それを mygrid.html と呼びましょう (または、html を生成するコードに。私の場合は CodeIgniter を使用しているので、mygrid_view にコピーしました.php)。

  2. slick.remotemodel.js を yourRemoteModel.js にコピーします。

  3. 「mygrid.html」で、すべての JavaScript ファイルへのパスが正しいことを確認してください。slick.remotemodel.js を yourRemoteModel.js に変更します。重複するスクリプトを削除します。たとえば、すでに最新バージョンの jQuery をプルしている場合は、jquery-1.4.3.min.js をプルする「mygrid.html」の行を削除します。

  4. 「mygrid.html」で、データベースから表示したいデータに一致するように「columns」変数の初期化を変更します。フィールドのプロパティに注意してください。これは、サーバーからの JSON 応答で返されるプロパティ名と一致する必要があります。(*これについては最後に注記を参照してください)。

  5. yourRemoteModel.js で、サーバーを指すように url 変数を変更し、適切な引数を渡します。私の場合、次のようにページと行のパラメーターをサーバーに渡します。

    var url = myServerUrl+"?page="+fromPage+"&rows="+(((toPage - fromPage) * PAGESIZE) + PAGESIZE);

  6. yourRemoteModel.js で、jsonp 呼び出しを ajax に変更します - このクロスドメインを実行する必要がない限り、その場合は jsonp を使い続ける必要があります。それ以外の場合は、次のように変更できます。

            req = $.ajax({
            url: url,
            dataType: 'json',
            success: onSuccess,
            error: function(){
                onError(fromPage, toPage)
            }
            });

  7. yourRemoteModel.js で、onSuccess() 関数をカスタマイズする必要があります。例のパターンに従って、fromとをデータ レコードへの整数オフセットに設定し、data.length をレコードの総数に設定してから、データ配列を設定します。このコードは、サーバーからの JSON 応答がどのように見えるかに依存します。

  8. ここで、JSON 応答を生成するコードをサーバーに記述します。手順 7 からわかるように、これには、レコード (またはページ) オフセットをデータに含める必要があり、返されるレコードの数と、レコード自体の配列を示す必要があります。各レコードの各フィールドには、列定義の「フィールド」設定と一致するプロパティ名が必要であることに注意してください (上記の手順 4 から)。例として、Digg からの応答を見てみましょう。

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

そして、それはそれを行う必要があります!

*注: 私の場合、帯域幅を使用して、JSON 応答のすべてのレコードで繰り返されるすべてのプロパティ名を返したくなかったので、代わりにレコード値の配列を返します。次に、列の説明 (上記の手順 4) のフィールド プロパティを、この配列への整数オフセットに設定します。したがって、列の説明では、field:'someFieldName" の代わりに field:3 を使用し、リモート モデルでは onSuccess() 関数で data[from+i] = resp.record[i].data ( where .data is a array in the JSON response of the JSON response of the field values in the record). これまでのところ、これはうまく機能しているように見えます (ただし、何か問題が発生した場合はデバッグが難しくなる可能性があります)。

于 2011-08-04T17:30:12.497 に答える
3

このプルリクエストを参照してください。Diggの代わりにHackerNewsを使用する機能的なAJAXデータストアの例。このSlickgridをダウンロードして、example6 -ajax-loadingを見ることができます。

ここに、ページング+ ajax + slickgridに関する重要な所見があります：Googleグループ：SlickGridページ付け+ Ajax + DataView

于 2013-01-22T13:02:29.453 に答える
0
  1. ajaxでバインドしたい列にクラスを追加する
  2. onRenderCompleted イベントを追加する
  3. クラスをセレクターとして使用し、onRenderCompleted 関数内の他の DOM 要素のようなものを追加します
于 2011-07-25T15:21:17.060 に答える