如何通过复选框值筛选表
How to filter table through checkbox values
在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属性。
如何将两者进行比较,并仅显示选中节的表行?
请慢慢来。亲切问候
这是一个尝试,将knockout与我假设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>
除非迫不得已,否则我不会使用jQuery的每个。
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>
但请记住,这两个测试都在说,如果checked等于true。如果您的值是一个字符串,则需要针对一个字符串进行测试。
编辑
如果你有一些id或值要测试,你可以这样做-
<li data-bind="visible: section.checked() === true"></li>
或其他一些逻辑测试
如果tr已选中,则需要将其样式设置为none(如果只显示已选中的tr,则设置为非"none"值),仅此而已例如:
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/
我认为"row"是指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/
如果您:
- 给ul一个包含复选框的id
- 给桌子一个id
- 对包含id的tr-css类使用一些约定
然后你可以-jsfiddle:
$('#sectionslist input').change(function() {
$('#offersTable .offerId' + $(this).val()).toggle();
});
我猜你只是想做一些简单的客户端过滤?看看这把小提琴:http://jsfiddle.net/dzul1983/e6ADe/2/
由于会有很多部分,所以用JS对它们进行硬编码并不理想。相反,您可以使用.NET在TR元素中输出它们。
例如(如果你用我的小提琴)
<tr data-bind="visible: isChecked('@Html.Encode(item.Section.Value)') ">
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- Angular JS Filter-通过3个复选框进行筛选
- 复选框筛选仅适用于刷新Angular2
- 在本地存储中选中复选框,但在加载时也要筛选列表
- 使用 JQuery 复选框筛选项目列表
- 使用复选框筛选结果
- 复选框筛选结果
- 使用复选框筛选PHP
- AngularJS orderby通过复选框进行筛选
- Rally自定义应用程序复选框筛选器不工作
- Jquery 按多个复选框筛选表行
- Web 解决方案中带有复选框和筛选器的组合框
- Jquery 复选框筛选 - 修复
- JQuery 复选框筛选器参数
- 如何在取消选中复选框时取消筛选表行
- 如何使用复选框筛选FullCalendar中的事件
- 复选框未按jquery和php的预期进行筛选
- 使用jQuery筛选复选框-保留URL中的选择
- 使用jquery ajax筛选复选框
- 筛选复选框以显示其类;不起作用