选择行后，Telerik 网格禁用 onrowselected 事件答案

【问题标题】：Telerik grid disable onrowselected event once a row is selected选择行后，Telerik 网格禁用 onrowselected 事件
【发布时间】：2012-05-30 09:46:45
【问题描述】：

我在我的 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";
            }
        }
        }

        });

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

【问题讨论】：

标签： jquery asp.net-mvc-3 telerik-grid

【解决方案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 以确保它与主流浏览器兼容。

【讨论】：

不使用插件的任何方式......我的意思是只使用加载 gif 图像和一些 css 我们可以实现这一点吗？
是的，你可以，但这正是这个插件的用途。只是一点 css 和一些轻量级的 javascript，而且它已经在主流浏览器上进行了测试。我将用更多代码编辑主要答案。
插件工作正常...但我尝试了上面的 css+jquery 没有按预期工作:(它只显示加载 gif 和它后面的一个黑色小条，但没有变灰整个页面
对我来说很好，在 IE、Chrome 和 Firefox 中尝试过。您将叠加层和加载条 div 放在哪里？
我把它放在了 Telerik Grid 代码的顶部。这是局部视图