前端开发实习（一）表单的模糊查询

今天要做一个表格的搜索功能，于是开始了一段研究。

数据是Ajax方法接收后台数据，我用一个表单 for循环展现它。

先将前端页面写好:

   <div  id="bg" style ="width:800px;height:400px;z-index:999;left:20%;top:100px;position:fixed;overflow:auto;filter:alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.8;">
    
        <div  style=" position:fixed;border:1px solid;background-color:black" >
        <p style="margin-top:15px"></p>
        <label style="height:80px;color:black;color:white;margin-top:30px;font-size:20px;text-align:center">请输入站点名称:</label>
         <input id="zdid" type="text" name="zdid" style="width:300px;border-radius:8px;height:30px"/>
         <input id="close" type="button" value="关闭"   class="fa fa-plus" style="position:fixed;padding-right:-80px;margin-top:-10px"/>
       <p style="text-align:center"> <input id="tijiao" type="button" value="搜索" class="button button-glow button-rounded button-raised button-primary" style="height:30px;width:120px;text-align:center;color:white;background-color:blue;border-radius:8px" /></p>
        <div style='width:600px;height:300px;overflow:auto;vertical-align: middle; '>
        <table border='1' style="border:1px solid;text-align:center;margin-left: auto; margin-right: auto;background-color:black;color:white">

            <tr  id="firsttr" style="text-align:center;" >
                
            </tr>
           
        </table>
             </div>
        
    </div>
        </div>

赋给tr  id=firsttr  当数据循环遍历的时候就会从这里进入，循环产生表单数据

实现模糊查询我原先的想法是：

1.用input type="text" id='zdid'接受用户输入的数据

2.使用indexof获取数据的值进行比对（ps:indexof()方法返回的是一个子串在另一个字符串中的位置，如果没有找到的话就返回-1，indexof()是从字符串的首部开始比对，lastindexof()是从后面往前比对的）

3.用if判断，当用户输入值时，即 var dt=$('#zdid').val  !=0时，先将所有的tr数据隐藏起来

4.循环遍历一遍表单数据，如果.indexof(dt)的返回值不是-1,就将表单数据显示

这是我原先的想法

在和一位前辈交流后，他提议换个思路：

1.当input 得到值的时候，将表单数据全部清除，

2..用indexof()遍历一遍，匹配到数据就加载出来

下面时实现方法：<script></script>

 // 控制表格内容根据搜索内容显示隐藏的函数
        $("#tijiao").click(function () {//单击查询按钮，执行查询操作
            var code = $("#zdid").val();    //获取input的值 
            $("#firsttr tr").remove();  //清除表单数据
            if (code.length > 0) {     //当input有值时，执行
                function GetFarmList2() {//使用Ajax方法传值，并且进行判比较
                    $.ajax({
                        type: 'POST',
                        url: '/Home/GetFarmList',
                        dataType: 'json',
                        success: function (data) {//成功接受到值的时候，执行
                            var leng = Number(data.length);//获取data数据的长度
                            var htms = "";                         
                            for (var i = 0; i < data.length; i++) {//执行循环遍历
                   var num = data[i].FarmName.indexOf(code);   //取出表单中每一行数据的农场名称执行indexof()方法，与code进行比对
                                if (Number(num) > -1) {         //只要比对结果大于-1，就说明查询到数据                     
                                    htms += "<tr  ><td>" + i  + "</td><td><a href=" + data[i].FarmCode + " style='color:red;text-decoration:underline' >" + data[i].FarmCode + "</a></td> <td>" + data[i].FarmName + "</td><<td>" + data[i].Contacts + "</td><td>" + data[i].state + "</td><</tr>";//拼接表单数据
                                }
                            }                          
                            $("#firsttr").append(htms);    //    将查询到的表单数据载入                 
                         }
                    }
                )
                }
                GetFarmList2();
            }


        }

效果时在点击按钮的时候执行操作

        //表单调用全部数据的方法
    function GetFarmList1() {
       
        $.ajax({
            type: 'POST',
            url: '/Home/GetFarmList',
            dataType: 'json',
            success: function (data) {
                
               var num = Number(data.length);
                //alert(num);
               var htms = "";
               htms += " <tr class='one'><th>行号</th><th>站点ID：</th><th>站点名称：</th><th>站点地址：</th><th>运行状态</th></tr>";
                for (var i = 0; i <num; i++) {

                    htms += "<tr  ><td>"+(i+1)+"</td><td><a href=" + data[i].FarmCode + " style='color:red;text-decoration:underline' >"+ data[i].FarmCode +"</a></td> <td>" + data[i].FarmName + "</td><td>" + data[i].Contacts + "</td><td>" + data[i].state + "</td><</tr>"; 
                    //展示的Html
                }
                $("#firsttr").append(htms);
            
               
            }
        }

    )
    }

该方法时在初始化加载表单数据的

    //搜索事件
        $("#bg").hide();
        $("#anniu").click(function () {
            $("#bg").show();
           
                GetFarmList1();
   
           
        })
        $("#close").click(function () {
            $("#bg").hide();
            $("#firsttr tr").remove();
        })

写完以上代码就实现了，使用Ajax方法从后台获取信息，在表单中进行模糊查询

总结:在进行编码的时候，需要多使用：alert（）方法就把它当成断点使用，将它插入写好的方法中，运行调试的时候可以帮助我们进行判断，js方法在什么时候停止了，方便我们快速找到问题bug所在。

由于每次点击按钮都会运行一次表单方法，所以必须在关闭的时候把表单数据清除掉，不然数据就会在表单中累加！！！