如何通过复选框值过滤表格

Question

在我的 Razor 视图中，我有一个包含 3 个未显示属性的表格。 Id_Loaction, Id_Level & Id_Section

在此表上方，我为每个位置、级别和部分提供了 3 个复选框列表，并以适当的 Id 作为值。

@foreach (var section in Model.Sections)
{
    <li>
      <input type="checkbox" data-bind="checked: data" value="@Html.Encode(section.Value)"/>@Html.Encode(section.Text)
    </li>
}   

注意：section.Value 是表格行中也使用的元素的 ID

表格本身构建起来相当简单：

@foreach (var item in Model.Offers) 
{
    <tr data-bind="visible: data.IsChecked == true ">
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Location)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Text)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Value)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.IsChecked)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Level)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", new { id=item.ID })
    </td>
</tr>
}


<script type="text/javascript">
    var data = @Html.Raw(Json.Encode(Model.Sections));

    function FormViewModel(data) {
        this.data = ko.observableArray(data);
    }

    window.viewModel = new FormViewModel(data);

    console.log(viewModel.data());    
    ko.applyBindings(viewModel);
</script>

/编辑： 我已将代码更新为我的实际混乱。 Model.Sections 是一个 ViewModel，它与用于 Model.Offers.Section 的 ViewModel 相同。两者都包含 Value、Text 和 IsChecked 属性。

如何比较这两者并仅显示选中该部分的表格行？

请对我慢一点。 亲切的问候

Answer 1

这是尝试将淘汰赛与我假设 Serv 正在尝试做的事情的精简版本一起使用。这是对象列表上的简单过滤器示例，可以轻松扩展以包含更多过滤器和更复杂的模型。

小提琴 http://jsfiddle.net/zTRq2/3/

简单的过滤器视图模型：

function filterViewModel(data) {
    var self = this;
    self.text = ko.observable(data.text);
    self.checked = ko.observable(data.checked);
}

精简的商品视图模型：

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

主视图模型：

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

HTML：

<!-- list of location checkboxes -->
<ul class="unstyled inline" data-bind="foreach: locations">
    <li>
        <input type="checkbox" data-bind="checked: checked" /> <span data-bind="text: text"></span>

    </li>
</ul>

<!-- table which is bound to the offersView computed observable -->
<!-- offersView is recalculated everytime a selection changes from the filter list -->
<table class="table-bordered">
    <tbody data-bind="foreach: offersView">
        <tr>
            <td data-bind="text: description"></td>
            <td data-bind="text: location"></td>
        </tr>
    </tbody>
</table>

Answer 2

除非你必须，否则我不会使用 jQuery 的 each。

knockout 为您的视图提供了 foreach 方法。使用该语句和 if 语句或可见绑定。

<ul data-bind="foreach: entity">
    <!-- ko if:checked() -->
         <!-- display your Li here -->
         <li></li>
    <!-- /ko -->
  </ul>

或者，您可以删除 ko if container less 语句并改用以下语句

 <li data-bind="visible: checked()"></li>

但请记住，这两个测试都是说如果检查等于 true。如果您的值是字符串，则需要针对字符串进行测试。

编辑

如果你有一些 id 或 value 来测试你可以这样做 -

<li data-bind="visible: section.checked() === true"></li>

或其他一些逻辑测试

Answer 3

如果选中，则需要将 tr 的样式设置为无（如果只想显示选中的，则设置为非“无”值），仅此而已 例如：

var viewModel= function(){
var self=this;
self.tableData=ko.observableArray(),
init=function(){
    for(var i=0;i<5;i++){
        //Put all your data here
        var data={
            selected:ko.observable(false),
            id:ko.observable('loc'+i),
            desc:'desc'+i
            };
        self.tableData.push(data);
    }
};
init();
}
ko.applyBindings(new viewModel());

那么 HTML 就像

    <div data-bind="foreach:tableData">
    <input type="checkbox" data-bind="checked:selected"/><span data-bind="text:id"></span>
    </div>

   <table>
    <thead>
        <th>Location</th>
        <th>Desc</th>
    </thead>
    <tbody data-bind="foreach:tableData">
        <tr data-bind="{style:{display:selected()?'none':''}}">
            <td data-bind="text:id"></td>
            <td data-bind="text:desc"></td>
        </tr>
    </tbody>
   </table>

这里是 jsfiddle ： http://jsfiddle.net/Dhana/keT7B/

Answer 4

我认为“行”是指 li。 jQuery 库中的each() 方法用于遍历数组，在本例中是由jQuery 选择器$('input[type="checkbox"]') 返回的匹配元素数组。

$('input[type="checkbox"]').each(function(){
    if(this.checked)  
        $(this).closest('li').hide()
})

http://jsfiddle.net/sailorob/4bC2P/

http://api.jquery.com/jQuery.each/

Answer 5

如果你：

1. 为 ul 提供一个包含复选框的 id
2. 给表格一个 id
3. 对包含 id 的 tr css 类使用一些约定

那么你可以 - jsfiddle:

$('#sectionslist input').change(function() {
   $('#offersTable .offerId' + $(this).val()).toggle();
});

Answer 6

我猜你只是想做一些简单的客户端过滤？看看这个小提琴：http://jsfiddle.net/dzul1983/e6ADe/2/

由于会有很多部分，所以在 JS 中硬编码它们并不理想。相反，您可以使用 .NET 在 TR 元素中输出它们。

例如（如果你用我的小提琴）

<tr data-bind="visible: isChecked('@Html.Encode(item.Section.Value)') ">