使用jquery隐藏MVC中的Grid的显示列

Question

我在asp.net MVC中使用Web Grid，并且有几列和一个Edit按钮。 单击编辑按钮时，应隐藏一个特定列。我想用jquery来实现这个目的。我该怎么办？

grid1.Column("Name", "Name", format: @<text>  <span  class="display-mode"> <label id="lblName"  >@item.Name</label> </span> <input type="text" id="Name" value="@item.Name" class="edit-mode" /></text>, style: "col2Width"), 

Answer 1

查看：

@model List<object>

@{
    ViewBag.Title = "MvcGrid";
    WebGrid grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 5, columnNames: new[] { "Name", "Surname" });
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        $('.edit-mode').hide();
        $('.edit-user, .cancel-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            tr.find('.edit-mode, .display-mode').toggle();
        });

        $('.save-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            var FirstName = tr.find("#FirstName").val();
            var LastName = tr.find("#LastName").val();
            var UserID = tr.find("#UserID").html();
            tr.find("#lblFirstName").text(FirstName);
            tr.find("#lblLastName").text(LastName);
            tr.find('.edit-mode, .display-mode').toggle();
            var UserModel =
            {
                "ID": UserID,
                "FirstName": FirstName,
                "LastName": LastName
            };
            $.ajax({
                url: '/User/UpdateUser/',
                data: JSON.stringify(UserModel),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data);
                }
            });

        });
    })
</script>

@grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: true,
    headerStyle: "header", 
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

    columns: new[] 
    {
        grid.Column("Name", "Name", format: @<text><span class="display-mode"><label id="lblFirstName">@item.Name</label></span>
        <input type="text" id="FirstName" value="@item.Name" class="edit-mode" /></text>, style: "col2Width"),
        grid.Column("Surname", "Surname", format: @<text> <span class="display-mode"><label id="lblLastName">@item.Surname</label></span>
        <label type="button" id="LastName" class="edit-mode" />@item.Surname</text>, style: "col2Width"),
        grid.Column("Action", format: @<text>
            <button class="edit-user display-mode">Edit</button>
            <button class="save-user edit-mode">Save</button>
            <button class="cancel-user edit-mode">Cancel</button>
        </text>,  style: "col3Width" , canSort: false)

   })

以下是点击修改时的外观：