0

我有一个 id 为“go”的提交按钮，我通过它从服务器端检索数据，但由于数据长度很大，加载需要很长时间。因此，我想在 go 按钮单击时添加屏幕储物柜，但我不知道如何通过客户端的 jquery 来做到这一点..

请引导我到一个链接，我可以在其中获得 jquery 屏幕储物柜...

这是我的代码...

 $(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

如果你想让你的屏幕“锁定”，你应该<div class="locker"></div>在你的标签末尾添加bodyhtml 代码。然后在类中添加一些样式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 回答
0

还要检查您是否在 html 页面中包含了与 locker 相关的 CSS 文件。您也可以尝试使用 div ID。这是我的代码。

创建一个 ID="fade" 的 div 标签并放置在您的 html 页面中。现在，将以下代码复制粘贴到您的任何 css 文件中，并将该文件包含在您的 HTML 页面中。

#fade {
    display: none;
    position:absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #ababab;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .20;
    filter: alpha(opacity=80);
}

现在在您的 ajax 调用期间将代码更改为。

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

document.getElementById('fade').style.display = 'block';
gridload();

document.getElementById('fade').style.display = 'none';

            });
        });
于 2013-10-07T06:28:45.460 回答