我想在WebGrid中自定义标头。我的WebGrid在Ajax中工作,并且在第一次加载时头文件正确显示,其名称为column,textbox和button" go",因为这个函数:
$(document).ready(function () {
$('th[scope^=col]').append(" <input type='text' style='width:100px;' /> <input type=button value='Go' />");
});
这是正常的。
但是,如果我单击排序或分页链接, ajaxUpdateCallback:&#34; customizeHeaders()&#34; 中的自定义标头在@RenderBody之前工作 - 我可以看到它正确定制了一个@RenderBody之前的那一刻 - 但随后很快消失了。
请帮我创建一个处理程序或其他机制来控制渲染的结束。抱歉我的英语不好。
index.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>