0

サーバー側からデータを取得するID「go」の送信ボタンがありますが、データの長さが大きいため、ロードに時間がかかります。このため、移動ボタンのクリック時にスクリーンロッカーを追加したいのですが、クライアント側でjqueryを介してそれを行う方法がわかりません..

jquery screen locker を入手できるリンクに誘導してください ...

これが私のコードです...

 $(document).ready(function () {
            $("#go").click(function (e) {
                e.preventDefault();
                $("#gridId").GridUnload();
                gridload();

            });
        });


        function gridload() {
            $.ajax({
                url: 'Default2.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                    //debugger;
                    gridData = JSON.parse(ReportDataNew.d);
                    //console.log(gridData);
                    //alert(gridData.length);


                    $("#gridId").jqGrid({
                        data: gridData,
                        datatype: "local",
                        height: '100%',
                        autowidth: true,
                        ignoreCase: true,
                        rowNum: 50,
                        rowList: [50, 100, 200],
                        colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
                        colModel: [
                            { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' }

                        ],
                        pager: '#gridpager',
                        viewrecords: true,
                        toppager: true,
                        loadtext: 'Loading...'

                    });

どんな助けでも大歓迎です.. 事前に感謝します..

4

2 に答える 2

1

画面を「ロック」したい場合は、html コードのタグ<div class="locker"></div>の最後に追加する必要があります。body次に、lockerクラスにスタイリングを追加します。

.locker {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8); /*lets make it semi-transparent */
z-index: 9999; /*because you could set some z-indexes in your code before, so lets make sure that this will be over every elements in html*/
}

そして、JavaScript コードは次のようになります。

$(document).ready(function () {
    var locker = $('.locker');
            $("#go").click(function (e) {
                e.preventDefault();
                    $("#gridId").GridUnload();
                    gridload();
                    canClick = false;
                    locker.css('display', 'block');
            });
        });


        function gridload() {
            $.ajax({
                url: 'Default2.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                    locker.css('display', 'none');
                    //debugger;
                    gridData = JSON.parse(ReportDataNew.d);
                    //console.log(gridData);
                    //alert(gridData.length);


                    $("#gridId").jqGrid({
                        data: gridData,
                        datatype: "local",
                        height: '100%',
                        autowidth: true,
                        ignoreCase: true,
                        rowNum: 50,
                        rowList: [50, 100, 200],
                        colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
                        colModel: [
                            { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' },
                            { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' },
                            { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' }

                        ],
                        pager: '#gridpager',
                        viewrecords: true,
                        toppager: true,
                        loadtext: 'Loading...'

                    });
于 2013-10-06T13:49:06.187 に答える