MVC WebGrid列宽 - 未应用

时间:2016-06-08 10:01:05

标签: css asp.net-mvc razor model-view-controller

参考MVC webgrid column width?

我在此处设置列宽,但不适用于"SNo"

@grid.GetHtml(tableStyle: "webGrid", headerStyle: "header", alternatingRowStyle: "alternatingrow", 
columns:grid.Columns(
            grid.Column("", style: "button",
                format: 
               @<text>
                    <button class="edit-case read" id="@item.ReferenceID">Edit</button>

                    <button class="update-case edit" id="@item.ReferenceID">Update</button>
                    <button class="cancel-case edit" id="@item.ReferenceID">Cancel</button>
                </text>),
            grid.Column("ParentSNo",canSort:true,
                format:
               @<text>
                    <span id="spanid" class="read">@item.ParentSNo</span>
<input type="text" id="ParentSNo" value="@item.ParentSNo" class="edit" />

                </text>),
 grid.Column("SNo",style: "Large"),
            grid.Column("CAT"),
 grid.Column("Name"),
            grid.Column("MaritalStatus"))


)
</div>
</div>

<style type="text/css">
.Large{
    width: 150px;
}
</style>

提前致谢!

1 个答案:

答案 0 :(得分:0)

发布您的整个视图会有所帮助。请查看以下示例,希望它可能有所帮助..

<script type="text/javascript">
  $(function () {
    $("a.postLink").click(function (e) {
      e.preventDefault();
      $.post($(this).attr("href"), function (data) {
      });
    });
  });
</script>

<h2>Employee Details</h2>
<style type="text/css">
  .table {
    margin: 4px;
    border-collapse: collapse;
    width: 300px;
  }

  .header {
    background-color: gray;
    font-weight: bold;
    color: #fff;
  }

  .table th, .table td {
    border: 1px solid black;
    padding: 5px;

  }
</style>
<div class="test" style="overflow: scroll; width: 1000px">
  @grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: false,
    headerStyle: "header",
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All, 
    columns: new[] 
    {
        grid.Column("FileName"),
        grid.Column("EmployeeName"),
        grid.Column("Description","Address"),
        grid.Column("EmailAddress"),
        grid.Column("ContactNumber"),
        grid.Column("EndDate","DateOfBirth",format: item => string.Format("{0:dd-MMM-yyyy}", item.EndDate)),
        grid.Column("Status","Shift"),
        grid.Column("SelectedCityName","Preferred Location"),
        grid.Column("EstimatedCost","Salary",format: (item) => new HtmlString("&#x20B9;"+Convert.ToString(item.EstimatedCost))),
        grid.Column("SelectedCategory","Department"),
        grid.Column("SelectedRequirements","SkillSet"),
        grid.Column("","",format:(item) => @Html.ActionLink("Delete", "Delete", new {Id = item.PId}, new { onclick = "return confirm('Are you sure you wish to delete this record?');" })),
        grid.Column("","",format:(item) => @Html.ActionLink("Edit", "Edit", new {Id = item.PId}))
   })

  </div>