用JS过滤表隐藏行

Question

我在剃须刀里有一张桌子：

<table id="tblCaseTeam">
    <thead>
        <tr>
            <th>
            </th>
            <th style="width: 30em;">
                @Html.DisplayColumnNameFor(Model, m => m.Action)
            </th>
            <th style="width: 7em;">
                @Html.DisplayColumnNameFor(Model, m => m.Owner)
            </th>
            <th style="width: 7em;">
                @Html.DisplayColumnNameFor(Model, m => m.Deadline)
            </th>
            <th style="width: 15em;">
                @Html.DisplayColumnNameFor(Model, m => m.Status)
            </th>
            <th style="width: 15em;">
                @Html.DisplayColumnNameFor(Model, m => m.Completed)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { Id = item.ID })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Action)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Owner)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Deadline)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Completed)
                </td>
            </tr>
        }
    </tbody>
</table>

使用具有 3 个值（已完成、全部和不完整）的 DDL。 我的表格的最后一列是一个布尔值，在表格中显示为复选框。

我正在寻找根据 DDL 的选择过滤行（隐藏和显示）的 JS 如果“全部”则显示全部。 如果“完成”，则仅在最后一列中显示具有“完成”值的行。 如果“不完整”，则仅在最后一列中显示完整值为 false 的行。

我尝试了一些 JQuery，但不知道怎么做

$table.find("tr").hide().filter(function () { return XXXX }).show();

我的 ddl：

<div id="dropdownlist">
    @Html.DropDownList("Filter", new SelectList(ViewBag.SearchOptionsList, "Value", "Text"))
</div>

以及知道所选值的代码：

var sel = $("#Filter option:selected").text();

问题 2：是否可以代替这个 JS 过滤，对模型进行客户端过滤，例如根据 DDL 的值在模型的表中放置 Where 子句。但是表格会相应地刷新吗？

谢谢

Answer 1

你可以做类似的事情

 <tbody>
        @foreach (var item in Model)
        {
            <tr class='@item.Completed ? "complete" : "incomplete"'>

然后在您的下拉菜单中执行类似的操作

$( "#dropdownlist" ).change(function() {
  if ($( this ).val() == 'complete'){
    $(".incomplete").hide();
    $(".complete").show();
  }
  else if ($( this ).val() == 'incomplete'){
    $(".incomplete").show();
    $(".complete").hide();
  }
  else {
    $(".incomplete").show();
    $(".complete").show();
  }
});