0

我Html.Telerik().Grid在我的 asp.net MVC 3 项目中使用，其中我有一个播种 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 类的背景属性中找到图像并编辑路径：

<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 回答