javascript - 如何在webgrid绑定(bind)期间绑定(bind)javascript函数或调用？

Question

我有一个网络网格，如下所示，包含 1000 多条记录。

@{
var grid = new WebGrid(canPage: true, rowsPerPage: @Model.PageSize, canSort: true, ajaxUpdateContainerId: "suppListGrid");
grid.Bind(@Model.SearchResultSupplierViewModels, rowCount: @Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);

@grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
            htmlAttributes: new {id="suppListGrid"},
            columns: grid.Columns(
            grid.Column(format: (item) => @Html.Raw("<div class='row panelLawfirmresultbox'><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+"2.5"+"</span></div>"))
     )) 
} 

我上面的网络网格有一个评级跨度，用于以星星的形式显示面板评级。为了显示面板评级星级，我使用了以下方式。

<script>
$(document).ready(function () {
    $('span.panelStars').panelStars();
    });
$.fn.panelStars = function () {
    return $(this).each(function () {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}
</script>

目前，在第一页加载期间，一切正常，显示了我的前 10 条记录的正确主演。但是当我点击下一页时，加星标功能不起作用。

当我检查javascript not working in MVC webgrid after sorting or paging时链接中，作者提到在对表格内容进行排序时会刷新，因此必须委托(delegate)事件。

因此，在我准备好的文档中，我添加了以下脚本，例如

$(document).on({
        mouseenter: function () {
            $('span.panelStars').panelStars();
            $('span.clientStars').clientStars();

            $.fn.panelStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
               });
            }
}, '#suppListGrid tr');

现在，主演回来了，但有完整的主演，但只有当鼠标移到 tr 标签上时才会出现。

但我需要的是在我的页面点击上发生同样的事情。我该怎么做？

Answer 1

我通过使用 webgrid 控件添加一小行代码解决了我的问题。

我在 webgrid 控件中添加了以下代码行

ajaxUpdateCallback: "getStars"

并创建了我这样声明的 getStars() 函数

function getStars()
{
    $('span.panelStars').panelStars();
    $('span.clientStars').clientStars();

            $.fn.panelStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                });
            }

            $.fn.clientStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                });
            }
}