ASP.NET MVC：如何隐藏 Webgrid 中的第一列答案

【问题标题】：ASP.NET MVC: How to hide first column in the WebgridASP.NET MVC：如何隐藏 Webgrid 中的第一列
【发布时间】：2016-04-04 07:45:18
【问题描述】：

我使用此代码隐藏 webgrid 中的列。

grid.Column(null, null, format: @<input type="hidden" name="IDHidden" value="@item.ID" />),

现在我的网格 UI 如下所示，这是不正确的。在此处输入图像描述

上面的代码确实帮助我隐藏了我的第一列。我搜索谷歌并得到一个承诺隐藏 webgrid 列的 CSS。所以我用了这个css

.webgrid-table td:nth-child(1),th:nth-child(1){
            display:none
        }

上面的 css 隐藏了我的第一列，但我的寻呼机也变得不可见，这不是我的意图。

我正在寻找一个 CSS，它会隐藏 webgrid 的第一列，但如果 webgrid 有，则不会隐藏寻呼机。寻求帮助。谢谢

【问题讨论】：

标签： asp.net asp.net-mvc webgrid

【解决方案1】：

hideColumn = function (column) {
    $('tr').each(function () {
        $(this).find('td,th').eq(column).hide();
    });
};
hideColumn(0);

请将此代码放入：$(document).ready(function (){});

【讨论】：

【解决方案2】：

如果你想隐藏第二列，例如：

  $(document).ready(function()
  {
  $("#yourGridId th:nth-child(2)").hide();
  $("#yourGridId td:nth-child(2)").hide();
  }

隐藏包含标题的列。

【讨论】：

【解决方案3】：

使用 mvc5 隐藏 webgrid 中的行

你的视图应该有以下部分 -

 var grid = new WebGrid(
                    ajaxUpdateContainerId: "grid");

            grid.Bind(data);
            grid.Pager(WebGridPagerModes.All);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
        fillEmptyRows: false,
         tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        columns: grid.Columns(
          grid.Column("Container_No", "Container No", canSort: false),
          grid.Column("SizeText", "SizeList", canSort: false),
           grid.Column("ContainerText", "Container Type", canSort: false),
            grid.Column("CargoText", "Cargo Type", canSort: false),
           grid.Column(header: "Action", canSort: false, style: "col-lg-2",
            format: @<text>              
     @Html.Raw("<a href='#' id='" + item.Container_No + "' onclick='goDelete(id);'><span class='glyphicon glyphicon-trash'> </span></a>")

请在您的脚本中包含以下函数--

function goDelete(data) {
     $(".page-loader-wrapper").show();`enter code here`
    if (confirm("Are you sure to delete this Container Entry?")) {          
        $.ajaxSetup({ cache: false });
            $.ajax({
                type: "POST",
                url: "/ControllerName/ActionName",
                data: '{Container_No: ' + data + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (response) {                        
                    $("#" + data).parents("tr").remove();
                    $(".page-loader-wrapper").hide();

                   alert(data + "Container removed successfully !!");                                             
                }
            });
        }
    }

【讨论】：