我想在 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>