3

Fuel UXデータグリッドを使用して、データベースから取得しているデータを表示したいと思います。このページは、RubyonRailsサーバーから提供されます。

データオブジェクトを構築するためのjavascriptサンプルコード：

        var dataSource = new StaticDataSource({
            columns: [{
                property: 'toponymName',
                label: 'Name',
                sortable: true
            }, {
                property: 'countrycode',
                label: 'Country',
                sortable: true
            }, {
                property: 'population',
                label: 'Population',
                sortable: true
            }, {
                property: 'fcodeName',
                label: 'Type',
                sortable: true
            }],
            data: sampleData.geonames,
            delay: 250
        });

        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

        $('#datagrid-reload').on('click', function () {
            $('#MyGrid').datagrid('reload');
        });

コードを理解している場合は、dataSource変数内のcolumnsオブジェクトで列といくつかの属性を定義し、データオブジェクトはsampleData.geonamesによって読み込まれます。

sampleDataはこちら

railsの規則を使用してsampleData.geonamesを置き換えるにはどうすればよいですか？Railsオブジェクトをここにロードするために、これをいくつかの方法で調整してみました。

たとえば、ユーザーモデルの一部のプロパティに対応するように、列のプロパティフィールドを変更しました。交換してみました

data: sampleData.geonames,

に

data: <%= @users.to_json %>,

現在Rails2.3を使用しているため、gemとバージョンに少し制限があります。

助けてくれてありがとう。

4

1 に答える 1

1

データグリッドでバックグラウンド AJAX リクエストを作成してアプリからデータをロードする場合は、次のチュートリアルを参照してください。必要なものに近いものになります。

http://dailyjs.com/2012/10/29/fuel-ux

これには、即時のページ読み込みとそれに続くデータの非同期読み込みという利点があります。

StaticDataSource アプローチに固執する場合は、次のような小さなスクリプトをページに埋め込むだけです。

<script>
  var myData = { ... };
</script>

次に、それをロードします：

var dataSource = new StaticDataSource({
  columns: [ ... ],
  data: myData,
  delay: 250
});
于 2013-02-14T21:14:04.787 に答える