javascript - HTMl5表格行分组

Question

我正在使用 Asp.net MVC4 。我有带有 HTML5 表的 Razor 索引视图。

现在要求将动态（用户）分组功能添加到现有表中。请建议我/参考我如何使用 Jquery 和 HTML5 来实现。

所以我不能使用任何 jqgrid 、 datatable 或任何其他框架。

示例：允许用户按任何列分组 -> 部门/工作类型或两者

CSHTML

@model IEnumerable<EmployeeViewModel>

@{
    ViewBag.Title = "Employees";
}

<h2>Employees</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
 <tr>
    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.MiddleName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.FullName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EmployeeNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Department)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.JobType)
        </th>
    <th></th>
</tr>

@foreach(var item in Model)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MiddleName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FullName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.EmployeeNumber)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Department)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.JobType)
        </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    </td>
</tr>
}

查看模型

public class EmployeeViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }

    public string MiddleName { get; set; }
    public string LastName { get; set; }

    public string JobType { get; set; }
    public string Department { get; set; }

    public string FullName
    {
        get
        {
            if (string.IsNullOrEmpty(MiddleName))
            {
                return FirstName + " " + LastName;
            }
            return FirstName + " " + MiddleName + " " + LastName;
        }
    }

    public string EmployeeNumber { get; set; }
}

谢谢，

无法形容

Answer 1

为什么不搜索所有内容：

<input id="Search" value="Start typing">

<table class="table">
 <tr>
    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.MiddleName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.FullName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EmployeeNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Department)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.JobType)
        </th>
    <th></th>
</tr>

<script>
var searchInput = $("#Search");

searchInput.keyup(function () {
    var data = this.value.split(" ");
    var rows = $(".table").find("tr");

    if (this.value == "") {
        rows.show();
        return;
    }

    rows.hide();

    rows.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    }).show();
});

searchInput.focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
});

searchInput.css({
    "color": "#C0C0C0"
});
</script>