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 条记录显示了正确的星标。但是当我点击下一页时，星标功能不起作用。

当我查看 link 时，作者提到在对 table 内容进行排序时会刷新，因此必须委托事件。

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

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

webgrid绑定时如何绑定javascript函数或调用？

How to bind javascript function or call during webgrid binding?

javascript

webgrid