1

我想在 WebGrid 中自定义标题。我的 WebGrid 在 Ajax 中工作，在第一次加载时，标题正确显示，列名、文本框和按钮“go”，因为这个功能：

$(document).ready(function () {
    $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
});

这可以正常工作。

但是，如果我单击排序或分页链接，ajaxUpdateCallback: "customizeHeaders()"中的自定义标题在@RenderBody之前工作——我可以看到它在@RenderBody 之前正确地自定义——但很快就消失了。

请帮我创建一个处理程序或其他机制来控制渲染的结束。对不起，我的英语不好。

索引.cshtml

@model MVC3.ViewModels.PaginaDeClientesViewModel
<script src="@Url.Content("~/Scripts/Customer/Customerjs.js")" type="text/javascript"></script>

@{
    ViewBag.Title = "Index";

    WebGrid  grid = new  WebGrid(rowsPerPage: Model.ClientesPorPagina , ajaxUpdateContainerId:"contenedor-grid", ajaxUpdateCallback: "customizeHeaders()" );

    grid.Bind(Model.Clientes, autoSortAndPage: false, rowCount: Model.NumeroDeClientes);   
}
$
<h2>Index</h2>
<div class="clickmeChart ButtonLink" >
 show chart
</div>

<div class="clickmeCreate ButtonLink">
    Nuevo Cliente
</div>

<div id="contenedor-grid" class="grid">
@grid.GetHtml( fillEmptyRows: false,

    alternatingRowStyle: "fila-alternativa",
    rowStyle :"fila",
    headerStyle: "encabezado-grid",
    footerStyle: "pie-grid",
    mode: WebGridPagerModes.All,
    firstText:  "<< Primera",    previousText: "< Anterior",    nextText: "Siguiente >",    lastText: "Última >>",
    columns :new[] 
{grid.Column("NOMBRE", canSort:true),
    grid.Column("DIRECCION",canSort:true),
    grid.Column("POBLACION",canSort:true),
    grid.Column("PROVINCIA",canSort:true),
    grid.Column("CODIGOPOSTAL", header:"CP",canSort:true),
    grid.Column("TELEFONO",canSort:true),
    grid.Column("NIF",canSort:true),
    grid.Column(
          "", 
          style:"acciones",
          header: "Acciones",
          format: @<text>
                    <span class="clickmeEdit ButtonLink" customerId="@item.ID">Editar</span>
                    |
                    @Html.ActionLink("Detalles",   "Details",   new { id= item.ID} )
                    |
                    @Html.ActionLink("Eliminar", "Delete", new { id=item.ID} )
                    |
                    @Html.ActionLink("Facturar", "Facturar", new { id=item.ID} )
                    <input type="hidden" id="CurrentPage" name="CurrentPage" value="@Model.CurrentPage" />
                    <input type="hidden" id="CurrentOrder" name="CurrentOrder" value="@Model.CurrentOrder" />
                    <input type="hidden" id="CurrentDir" name="CurrentDir" value="@Model.CurrentDir" />

                  </text>
    )
})


</div>
<div id="user_content" style="width: 600px; height: 400px;display:none"></div>
<div id="user_content_edit" style="width: 600px; height: 400px;display:none"></div>
<div id="chart_content" style="width: 600px; height: 400px;display:none"></div>
<div id="msg"></div>


<script language="javascript" type="text/javascript">

//this work first load
$(document).ready(function () {
    $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
})

//this works before render body, but doesn't display when the page is complete :(
function customizeHeaders() 
{
    $(document).ready(function () {
        //$('thead > tr > th :contains(NOMBRE)').append("<input type='text'/>");
        $('th[scope^=col]').append("  <input type='text' style='width:100px;' /> <input type=button value='Go' />");
    })
}
</script>
4

0 回答 0