react项目中实现带定位查询且高亮的列表查询

react项目中实现带定位查询且高亮的列表查询

1. 背景

   ​ 项目中需要实现一个这样的组件，包含一个input输入框、一个查询按钮、一个高度固定，可以垂直滚动的数据列表，每一行数据有一个唯一的编号，需要实现在输入框中输入编号，点击查询，数据列表可快速滚动至对应行，且高亮。ant Design中没有这样的组件，所以需要使用原生JS实现。
   

2. 初始化项目

   //安装构建工具
   npm install -g create-react-app
   //构建项目
   create-react-app table
   

3. 搭建页面

   • src目录下新建table.jsx

     import React, { Component } from 'react';
     import './table.css';
     
     class Table extends Component {
         
         constructor(props){
             super(props);
             this.state = {
                 devNum:''
             }
         }
         
         //onClickF 查询定位且高亮方法
         
         search_change(e){
             this.setState({
                 devNum:e.target.value
             });
         }
         
         render() {
             return (
                 <div className="wrap">
                     <input type="text" placeholder="请输入查询值" onChange={this.search_change.bind(this)} defaultValue={this.state.devNum}/>
                     <button  onClick={()=>{this.onClickF(this.state.devNum)}}>查询</button>
                     <div className="listTable" id="scrollTable">
                         <table>
                             <tbody>
                             <tr>
                                 <th>序号</th>
                                 <th>设备设备串号</th>
                                 <th>应用名称</th>
                             </tr>
                             <tr id="123">
                                 <td>1</td>
                                 <td>123</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="223">
                                 <td>2</td>
                                 <td>223</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="323">
                                 <td>3</td>
                                 <td>323</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="423">
                                 <td>4</td>
                                 <td>423</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="523">
                                 <td>4</td>
                                 <td>523</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="623">
                                 <td>6</td>
                                 <td>623</td>
                                 <td>应用</td>
                             </tr>
                             <tr id="723">
                                 <td>7</td>
                                 <td>723</td>
                                 <td>应用</td>
                             </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
             );
         }
     }
     
     export default Table;
     

   • src目录下新建 table.css

     .wrap{
       margin-left:20px;
     }
     input,button{
       margin-top:20px;
     }
     button{
       margin-left:20px;
     }
     .listTable{
       margin-top:30px;
       border:1px solid #ccc;
       width:260px;
       height:120px;
       overflow-y: scroll;
     }
     

   • 修改App.js

     import React, { Component } from 'react';
     import './App.css';
     import Table from './table.jsx'
     
     class App extends Component {
       render() {
         return (
             <Table></Table>
         );
       }
     }
     
     export default App;
     

4. 实现查询定位且高亮方法

   onClickF(devNum){
           let devNumElement = document.getElementById("scrollTable");
           let listArr = devNumElement.getElementsByTagName("tr");
           let x;
   
           if(!!devNum){
               if(devNumElement){
                   // 清空样式
                   for(let i=0;i<listArr.length;i++){
                       listArr[i].style.backgroundColor = "white";
                   }
                   // 改变匹配行样式
                   for(let i=0;i<listArr.length;i++){
                       if(listArr[i].getAttribute("id") === devNum){
                           console.log(i);
                           x = i;
                           listArr[i].style.backgroundColor = "yellow";
                       }
                   }
                   //定位匹配行  22是每一行数据的高度，可以根据实际情况调整值
                   devNumElement.scrollTop = (x) * 22;
               }else {
                   devNumElement.scrollTop = 0;
               }
           }
       }
   

5. 启动项目，查看效果

npm start