我想在表中放入过滤器功能,其中表数据是如下所示的异构数组:
let items [
{
"_resource":{
"values":[null, undefined, true, 'foobar', {'amount': 1111, 'isValid': true} , 1]// this table row, and each array's item represent individual column
},
....
},
{
"_resource":{
"values":[null, undefined, true, 'search in me', {'amount': 1111, 'isValid': true} , 1]// this table row, and each array's item represent individual column
}
}
....
]
我添加了以下过滤器代码:
function filterItesm(items, text) {
if (text.length == 0) {
return items;
}
var temp = items;
items = [];
for (var i = 0; i < temp.length; i++) {
var item = items[i];
var values = item._resource.values;
var found = false;
for (var j = 0; j < values.length; j++) {
var currItem = values[j];
if (typeof currItem === 'object') {
for (var name in currItem) {
if (currItem[name] != null) {
if(typeof currItem[name] == 'number') {
if(text.toLowerCase().indexOf(currItem) > -1) {
found = true;
break;
}
} else {
if (""+currItem.toLowerCase().indexOf(text.toLowerCase()) > -1) {
found = true;
break;
}
}
}
}
} else if(typeof currItem == 'number'){
if(text.toLowerCase().indexOf(currItem) > -1) {
found = true;
}
} else if(typeof currItem == 'string') {
if (currItem.toLowerCase().indexOf(text.toLowerCase()) > -1) {
found = true;
}
}
}
if (found == true) {
items.push(item);
found = false;
}
}
return items;
}
这里的过滤器正在工作,但我正在寻找更好的方法。任何帮助都将是可观的。
如果使用的是Angular,则可以按照以下步骤进行操作。
在component.html页面中,您可以对html表进行以下修改。
<div class="search-hero">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search">
</div>
<table class="table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th> Edit</th>
<th> View</th>
</tr>
</thead>
<tbody>
<tr *ngFor ="let b of books | filter:searchText">
<td> <img style="width: 5rem; height: 5rem;" src={{b.ThumbnailUrl}}></td>
<td>{{b.BookName}}</td>
<td>{{b.AuthorName}}</td>
<td>{{b.Price}}</td>
<td><button class ="btn btn-primary" (click)=editBookDetails(b)>Edit</button></td>
<td><button class ="btn btn-success" (click)=viewBookDetails(b)>View</button></td>
</tr>
</tbody>
</table>
在component.ts文件中,您可以执行以下操作,
searchText: String;