如何在 webgrid 绑定期间绑定 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>"))
     )) 
} 

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

<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链接时，作者提到在对表格内容进行排序时会刷新，因此必须委托事件。

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

$(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));
                });
            }
}