隐藏了一列Mvc4后,Webgrid寻呼机消失了

时间:2013-11-06 07:49:47

标签: javascript jquery asp.net-mvc-4

我在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;
}

1 个答案:

答案 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();

  });
});