html表项中的搜索过滤器【表数组是异构的】

Posted 2023-05-09

【中文标题】html表项中的搜索过滤器【表数组是异构的】

【英文标题】：Search filter in html table item [table array is heterogeneous]

【发布时间】：2020-04-23 18:05:42

【问题描述】：

我想将过滤器功能放在一个表中，其中表数据是异构数组，如下所示：

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;
    

这里的过滤器正在工作，但我正在寻找更好的方法。任何帮助都将不胜感激。

【问题讨论】：

没有它的只有javascript

【参考方案1】：

如果您使用的是 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"  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;

【讨论】：

您是否在代码中添加了这部分？ 不，我正在寻找逻辑改进，我用过，它可以工作，但如果可能的话需要更好的逻辑