我在Mvc4中有一个Webgrid,我想在其中隐藏一列。 问题是当我隐藏列时,分页正在消失,我不知道为什么。
我的网页看起来像这样:
@{
var grid = new WebGrid(canPage: true, canSort: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridcontent");
grid.Bind(source: Model.Projects, rowCount: Model.RowCount, autoSortAndPage: false);
grid.PageIndex = Model.ProjectPage;
grid.SortColumn = Model.SortColumn;
grid.SortDirection = Model.SortDirectionForColumn;
}
<div id="gridcontent">
@grid.GetHtml(
fillEmptyRows: false,
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
htmlAttributes: new { id = "MainTable" },
columns: grid.Columns(
grid.Column("VsuProjectId", "Project Id"),
grid.Column("ProjectName", " Project " + VsuWebPortal.Models.WebgridHelper.SortDirection(null, ref grid, "ProjectName"), style: "columnWidth"),
grid.Column("CountryName", "Country", style: "columnWidth"),
grid.Column("CustomerName", "Customer Name" style: "columnWidth"),
grid.Column("CRMId", "CRM Id", style: "columnWidth"),
grid.Column("MainProjectVersion", "Project Version", canSort: false, style: "columnwswithNotSortable")
))
隐藏列的javascript函数是;
function hideColumnColorRow(column) {
$('td:nth-child(' + column + '),th:nth-child( ' + column + ')').hide();
}
我也尝试用Css做,它确实隐藏了列,但是在分页时给出了相同的结果。
table th:first-child, table td:first-child {
display: none;
}
答案 0 :(得分:0)
我没有找到为什么它在页脚中隐藏了分页,但我设法让它工作。 不知何故,当我想要隐藏第一列时,它只隐藏页脚。 所以不要使用:
table th:first-child, table td:first-child {
display: none;
}
我用过:
table td:nth-child(10), table th:nth-child(10) {
display: none;
}
现在它工作得很好。 在表中有一个隐藏列的原因是,当我单击整行时使用它:
$(function () {
var tr = $('#MainTable').find('tbody tr');
tr.live('hover', function () {
$(this).toggleClass('clickable');
}).live('click', function () {
location.href = 'Whut/Details/' + $(this).find('td:nth-child(10)').text();
});
});