0

私は自分のASP.NET MVC 3Webアプリケーションでデータテーブルを使用していますが、これまでのところ非常にうまくいっています。データベースに接続しSQL Server 2008、ストアドプロシージャを使用してデータを返します。IE8と最新バージョンのFirefoxを使用しています。のバージョンはYUIです2.8.2r1。データテーブルに関していくつか質問があります:)

これが私のデータテーブルのコードです：

<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function () {
        var grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs, grdNewsDataTable;

        // News list data table
        var formatActionLinks = function (oCell, oRecord, oColumn, oData) {
            var newsId = oRecord.getData('NewsId');
            oCell.innerHTML = '<a href="Edit/' + newsId + '">Edit</a> | ' +
                '<a href="Details/' + newsId + '">Details</a>';
        };

        var formatActive = function (oCell, oRecord, oColumn, oData) {
            if (oData) {
                oCell.innerHTML = "Yes";
            }
            else {
                oCell.innerHTML = "No";
            }
        };

        grdNewsColumnDefs = [
            { key: 'Title', label: 'Title', className: 'align_left' },
            { key: 'Active', label: 'Active', className: 'align_left', formatter: formatActive },
            { key: 'Action', label: 'Actions', className: 'align_left', formatter: formatActionLinks }
        ];

        grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())');
        grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        grdNewsDataSource.responseSchema = {
            resultsList: 'DataResultSet',
            fields: [
                { key: 'NewsId' },
                { key: 'Title' },
                { key: 'Active' },
                { key: 'Action' }
            ]
        };

        grdNewsConfigs = {
            paginator: new YAHOO.widget.Paginator({
                rowsPerPage: 20
            })
        };

        grdNewsDataTable = new YAHOO.widget.DataTable('grdNews', grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs);
        grdNewsDataTable.on('initEvent', function () {
            YAHOO.util.Dom.setStyle(grdNewsDataTable.getTableEl(), 'width', '100%');
        });
    });
</script>

何が間違っているのかわかりませんが、データを返すアクションメソッドは次のとおりです。

public ActionResult JsonList()
{
    JsonEncapsulatorDto<News> data = new JsonEncapsulatorDto<News>
    {
        DataResultSet = newsService.FindAll()
    };

    return Json(data, JsonRequestBehavior.AllowGet);
}

リターンJson...行にブレークポイントを設定して、このアクションメソッドがヒットするかどうかを確認します。ページが最初にブレークに移動したときにページが読み込まれるときに、F5キーを押すと、ページが実行され、グリッドが入力されたビューが表示されます。F5キーを押してブラウザを更新すると、ブレークポイントが再びヒットすることはありません。理由はわかりません。ここに再び入ることはありません。

データはどのようにグリッドにロードされますか？テーブルに100個のレコードがあり、rowsPerPageを20に設定した場合、5ページになります。上記の私のコードを考えると、データは一度にロードされますか？つまり、100行すべてが一度にロードされますか？一度にすべてをロードするのではなく、「チャンク」にロードすることをお勧めします。別の表には、はるかに多くのレコードがあります。これは、すべてを一度にロードするための賢明な設計アプローチではありません。このようなものをどのように実装しますか？

データテーブルの特定のテーブルヘッダーとセルのスタイルを設定しようとしています。データテーブルのスタイルを設定する方法を説明するこの記事を読みました：http：//www.satyam.com.ar/yui/widgetstyles.html。tdを右揃えに設定すると、その列のthも右揃えになりますが、これはなぜですか？classNameプロパティをどのように設定したかを上で見ることができます。これが私のスタイルシートコードです：

.yui-skin-sam .yui-dt td.align_left{text-align:left}

上記のシナリオでは、列ヘッダーを左揃えにし、対応する列行を右揃えにしますか？私はおそらくこのようには使用しませんが、スタイルをさまざまな要素に設定する方法を知りたいだけですか？

データテーブルの幅を100％に設定しましたが、次のページにページを移動すると、この幅の100％が失われているように見えます。どうしてこれなの？幅を100％に保つために、データテーブルを作成するにはどうすればよいですか？

データを更新した場合、更新済みとして表示されません。これはなぜですか？また、更新されたデータをデータテーブルに表示するために何をする必要がありますか？

4

1 に答える 1

1

AJAX リクエストを使用してリモート データを取得するように YUI グリッドを構成しました。

grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())');

GET AJAX リクエストはブラウザによってキャッシュされる可能性があります。これは、コントローラ アクションが 1 回だけヒットする理由を説明しています (最初にページをロードするとき)。このキャッシュを回避するには、YUI を構成して POST 要求を使用するか、ページが読み込まれるたびに URL に乱数を追加します。

データはどのようにグリッドにロードされますか? テーブルに 100 個のレコードがあり、rowsPerPage を 20 に設定した場合、5 ページになります。

クライアント側で何を設定しても、次のようになります。

DataResultSet = newsService.FindAll()

これは、サーバーがデータベースからすべてのレコードをフェッチし、すべてのレコードをクライアントに送り返すことを明確に示しており、非効率であることを示すために必要なレコードのみを取得するのはクライアントです。

理想的には、ページネーションはサーバー上で行う必要があります。ドキュメントの例を次に示します。クライアントはstartIndexおよびresultsパラメータをサーバーに送信して、サーバー上のデータ セットをページ分割し、画面に表示される必要な行のみを返すことができるようにします。

于 2011-02-27T15:33:18.413 に答える