4

dojox.grid.LazyTreeGrid で QueryReadStore (または他のストア) を使用する方法の例を探していますか?

大きな構造を表示して、必要なデータだけをサーバーから読み込めるようにしたい。開いているノードの子のみを専用サーバー スクリプトからロードする必要があります。

私はすでにdojox.grid.DataGridでQueryReadStoreを使用していますが、うまく機能します:)

助けて、ありがとう。

4

2 に答える 2

1

これは、私が現在行っているいくつかのことに基づいた、長ったらしい説明/サンプルです。これは、Dojo 1.7 スタイルのパッケージが基本的に快適であることを前提としています (たとえば、デフォルトの Dojo パッケージが正しくセットアップされていることを前提としています)。

クライアント側 (js ファイル)

require(["dojo/ready",
    "dojox/grid/LazyTreeGridStoreModel",
    "dojox/data/QueryReadStore",
    "dojox/grid/LazyTreeGrid"], function(ready, LazyTreeGridStoreModel, QueryReadStore, LazyTreeGrid) {
        ready(function() {
            var cellLayout = [
                {name: 'Name of fruit', field: 'name', width: '300px', defaultValue: ""},
                {name: 'Color of fruit', field: 'color', width: '100px', defaultValue: ""},
                {name: 'Size of fruit', field: 'size', width: '100px', defaultValue: ""}
            ];

            // This is the url on which your server will listen for GET requests
            var dataStore = new QueryReadStore({url: "url/to/load/rows"});
            var treeModel = new LazyTreeGridStoreModel({store: dataStore, childrenAttrs: ['children'], serverStore: true});

            var grid = new LazyTreeGrid({
                treeModel: treeModel,
                structure: cellLayout,
                autoHeight: 20}, "gridContainerId"); // you need to have a DOM element by that id
            grid.startup();
        }
    });

サーバ側：

で GET 要求をリッスンするサーバー側ハンドラーが必要ですurl/to/load/rows。これらのリクエストには、最大 3 つのパラメーターがあります。

start    - 0-based index of the first item to return
count    - number of items to return
parentId - Id of the parent of the children items that are requested.
           Optional, not present for 1st call (because 1st-level objects have no parents).

そのハンドラーは、好みのサーバー側言語 (ASP.Net MVC を使用した C#、Ruby など) で記述できます。

サーバー ハンドラーの仕事は、次の 3 つの属性を含む json 構造を返すことです。

items       - Array containing the items you want to display.
              Each item represents a row in the grid. Each item should
              have at least some of the fields you specified in your layout
              and must have the 2 following characteristics:
                - Must have a "children" attribute. That is a bool value.
                  If true, the row is assumed to have children and will have
                  an expando left of it. The grid query the server for children when you expand it.
                  If false, the row is considered terminal, no expando is shown.

                - Must have a unique id. This will be the id that will be set in the "parentId"
                  param when querying the server for the children of that row. It must be stored
                  in the field referred to by the "identifier" attribute (see below).

identifier  - The name of the attribute of each item that contains its unique id.
numRows     - The number of total items existing on this level (not just the number of items you sent back).
              This is used to set the grid & scrollbar size and other UI things.

クライアント/サーバー通信

前の例に基づいて構築するには、グリッドが起動するとすぐに (クライアント側)、次のようなリクエストを行います。

GET url/to/load/rows?start=0&count=25

サーバーは以下を返します。

{
    "items":[
        {"name": "apple", "color": "red", "size": "small", "uniqueId":"a1", "children": true},
        {"name": "watermelon", "color": "green", "size": "big", "uniqueId":"b1", "children": false}
    ],
    "identifier": "uniqueId",
    "numRows":2
}

グリッドには 2 つの果物が表示されます。appleexpando がありますが、ありませんwatermelon(children属性のため)。ユーザーがappleexpando をクリックしたとします。グリッドはその子をリクエストします:

GET url/to/load/rows?parentId=a1&start=0&count=25

サーバーは次のようなものを返す可能性があります。

{
    "items":[
        {"name": "mcintosh", "color": "red-green", "size": "small", "uniqueId":"a2", "children": false}
    ],
    "identifier": "uniqueId",
    "numRows":1
}

appleグリッドは、行の下に 1 つの子を表示します。

于 2012-07-27T19:13:41.030 に答える
0

私はあなたが探しているものをここに持っていると思います。dojox.grid.LazyTreeGrid で QueryReadStore を使用する際の優れたサンプル コードがいくつかあり、ステップごとに完全に説明されています。

ここを参照してください: http://livedocs.dojotoolkit.org/dojox/grid/LazyTreeGrid

これがあなたの仕事を前進させ、あなたが目標を達成できることを願っています。

よろしく

フランク。

于 2012-02-12T14:29:16.960 に答える