Question

我在我的asp.net MVC 3项目中使用Html.Telerik().Grid，其中我有一个Grid（Telerik网格），它播放searchResults，用户可以点击这些行来查看特定行的更多信息。在新窗口中打开的新页面。我也在使用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";
            }
        }
        }

        });

我不希望用户选择页面上的任何其他内容并希望他等到加载详细信息，即一旦他选择了一行，他就不应该选择网格中的任何其他行。任何实现这一目标的方法。

Answer 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以确保它与主流浏览器兼容。

一旦选择了行，Telerik网格就会禁用onrowselected事件

1 个答案: