Question

我想要一个排序指示器作为webgrid列的升序和降序图像。我做了谷歌搜索，发现解决方案为：

 <script type="text/javascript">
 $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent()
.append('@(grid.SortDirection == SortDirection.Ascending ? "U" : "D")');
</script>

 But i used the webgrid like this:

 var grid = new WebGrid(canPage: true, rowsPerPage:       SlmgWebApp.Controllers.HomeController.PageSize, canSort: true, ajaxUpdateContainerId: "grid", fieldNamePrefix: "ViewClaimfieldname", pageFieldName: "ViewClaimpagename");



grid.Bind(Model.TotalClaims, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);



@grid.GetHtml(

 tableStyle: "webgrid",
 headerStyle: "webgrid-header",
 footerStyle: "webgrid-footer",
 alternatingRowStyle: "webgrid-alternating-row",
 selectedRowStyle: "webgrid-selected-row",

    htmlAttributes: new { id = "grid" },
    columns: grid.Columns(
             grid.Column("", header: "", format: @<span><img alt="image1" src="@item.StatusIcon" title="@item.StatusName" style="height:25px; width:25px; border:0px" /></span>),

                    grid.Column("CustomerName", header: "Reference"),

                         grid.Column("RepairOrderNumber", header: "Repair Order"),

                        grid.Column("SlmgReferenceNumber", header: "SLMG Number", format: @<text><a href="javascript: getclaim('@item.SlmgReferenceNumber')">@item.SlmgReferenceNumber</a></text>),

                                  grid.Column("EquipmentManfacturer", header: "Warranty Provider"),

                                 grid.Column("SerialNumber", header: "Serial Number (P&A Number)")



                                  ));

}

如果我在页面加载中放置javascript函数，则会抛出网格未加载的错误。我已经给了一个ajax调用数据加载这个webgrid。任何人都可以帮助我放置这个javascript，这样我就可以得到一个在webgrid中排序列的指标。

Answer 1

您需要将java脚本包装到ready函数中。

$(document).ready(function () {
     $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent().append('@(grid.SortDirection == SortDirection.Ascending ? "U" : "D")');
 });

有点警告 - 此方法不适用于ajax可更新网格。（这也是我想弄清楚的）

webgrid排序指示器，asp.net mvc3剃须刀

1 个答案: