0

asp.net MVC 3プロジェクトで使用Html.Telerik().Gridしています。ここでは、searchResultsを表示するグリッド（Telerikグリッド）があります。ユーザーは、これらの行をクリックして、で開かれる新しいページの特定の行の詳細を表示できます。新しい窓。また、Jqueryを使用してonrowselectedイベントを処理し、コントローラーに投稿して詳細を取得しています。

Jqueryコード：

 function onRowSelected(e) {
        var grid = $(this).data('tGrid');
       //populate criteria here

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: //"some url",
            data: //data to controller,
            dataType: "text json",
            success:
        function (data, textStatus) {
            if (data != "Success") {
                ShowError(data);
            }
            else {
                window.location.href = //"redirect";
            }
        }
        }

        });

ユーザーがページ上の他の何かを選択することを望まず、詳細が読み込まれるまで待つことを望んでいます。つまり、ユーザーが行を選択すると、グリッド内の他の行を選択できないようにする必要があります。これを達成するための任意の方法。

4

1 に答える 1

1

ユーザーが他のものを選択できないようにし、舞台裏で何らかのアクションが発生していることを示す読み込み進行状況ポップアップを使用することをお勧めします。

これは私がhttp://contextllc.com/tools/jQuery-showLoadingの前に使用したプラグインです

プラグインスクリプトを含めた後の実装はかなり簡単です。

function onRowSelected(e) {
    $('#someID').showLoading();  //To show the loading progress bar, someID could be the div that contains the grid.

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: //"some url",
        data: //data to controller,
        dataType: "text json",
        success:
            function (data, textStatus) {
                 $('#someID').hideLoading();  //To hide the loading progress bar
            }
    });
}

編集：

または、このような方法を試すこともできます。ページ全体を非表示にするオーバーレイと、画面の中央に読み込まれている画像が表示されます。

次のスタイルをページに追加します。画像を検索し、.loading-indicatorクラスのbackground属性でパスを編集する必要があります。

<style type="text/css">
.loading-indicator {
    position: absolute; 
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    z-index: 1001;
    background: url( '../images/loading.gif' );
    background-repeat: no-repeat;
    background-position: center center;
}

.loading-indicator-overlay {
    position: absolute; 
    width:100%;
    height: 100%;
    z-index: 1000;
    background-color: black;
    opacity: 0.6;
}
</style>

ローディングバーを表示および非表示にするJavaScriptを追加します。

<script type="text/javascript">
function showLoadingBar() {
    $('#overlay').addClass('loading-indicator-overlay');
    $('#loadingbar').addClass('loading-indicator');
}

function hideLoadingBar() {
    $('#overlay').removeClass('loading-indicator-overlay');
    $('#loadingbar').removeClass('loading-indicator');
}
</script>

次のdivタグをページに追加します。

<body>
    <div id="overlay"></div>
    <div id="loadingbar"></div>
    ....
    ....
</body>

これで、showLoadingBar（）またはhideLoadingBar（）を呼び出して、バックグラウンド処理を行っている間、ユーザーがページを操作できないようにすることができます。そのcssをテストして、メインストリームブラウザと互換性があることを確認する必要があります。

于 2012-05-30T17:32:08.940 に答える