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>

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

我正在寻找一个过滤行（隐藏和显示）的JS，具体取决于DDL的选择如果“全部”则显示全部。如果“完成”，则只显示最后一列中Complete值为true的行。如果“Incomplete”，则只显示最后一列中Complete值为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();
  }
});

使用JS过滤表隐藏行

1 个答案: