前段页面搜索功能实现-白红宇

前段页面搜索功能实现

阅读量：7023 次

发布时间：2019-06-28

本文共 5074 字，大约阅读时间需要 16 分钟。

前段页面获取到了后台段数据，搜索功能就不用后台了，直接就把获得段数据中查询。如果要查询其他不是获取当前段数据，那么还需要和后台交互。

html代码只有一个select框。这个数据是后台给出的数据

这里页面显示，显示所有的数据，进入这个页面的时候就显示。这里可以改为使用js加载显示数据的                        
                                         ${v.title}                                            
                              -

var list = ${userTimes};

function query(name) {
           var html = "";         list.forEach(function (v, index, arr) {
               /*选择了老师后的搜索*/             if(name == v.title){
               html += "" +                 "    " + v.title + "" +                 "    " +                 format(v.start) +                 "    -" +                 format(v.end) +                 "    " +                 "    ";             }             /*初始化的时候的数据*/             if(name == '0'){
               html += "" +                 "    " + v.title + "" +                 "    " +                 format(v.start) +                 "    -" +                 format(v.end) +                 "    " +                 "    ";             }             console.log(html)             $("#tbody").html(html); 　　　　　　　　//搜索显示数据后，如果老师名称一样，还是使用下边的合并单元格方法             uniteTable("tb",1);         })     }     function format(myDate) {
           if(myDate != null){
               //有值，不是空2019-01-01 10：00：00             return new Date(myDate).format("hh:mm:ss");         }         return myDate;     }     /**      *  格式化时间的，网上复制的      * @param fmt  yyyy-MM-dd hh:mm:ss   格式就是下边的，小时一般大写，这里小写。      * @returns {*}      * 如果是unix时间，那么 new Date(unixTime).format("hh:mm:ss") ====>> 12:00:00      */     Date.prototype.format = function(fmt) {
           var o = {
               "M+" : this.getMonth()+1,                 //月份             "d+" : this.getDate(),                    //日             "h+" : this.getHours(),                   //小时             "m+" : this.getMinutes(),                 //分             "s+" : this.getSeconds(),                 //秒             "q+" : Math.floor((this.getMonth()+3)/3), //季度             "S"  : this.getMilliseconds()             //毫秒         };         if(/(y+)/.test(fmt)) {
               fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));         }         for(var k in o) {
               if(new RegExp("("+ k +")").test(fmt)){
                   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));             }         }         return fmt;     } 　//合并挨着的表格的数据，  //老师名字一样就合并了后台只需要按照老师名称排序就行，把来时名称一样的放到一块

function uniteTable(tableId,colLength) {
       //colLength-- 需要合并单元格的列1开始     var tb=document.getElementById(tableId);     tb.style.display='';     var i = 0;     var j = 0;     var rowCount = tb.rows.length; //   行数     var colCount = tb.rows[0].cells.length; //   列数     var obj1 = null;     var obj2 = null;     var obj3 = null;     //为每个单元格命名     for (i = 0; i < rowCount; i++) {
           for (j = 0; j < colCount; j++) {
               tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();         }     }     //合并行  （列循环）第一行第一列均从0开始     for (i = 0; i < colCount; i++) {
           //如果第3，4，5列不进行合并操作         if (i == 2 || i == 3 || i == 4) continue;         obj1 = document.getElementById("tb__0_" + i.toString())         //（行循环）         for (j = 1; j < rowCount; j++) {
               obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());             if(i == 0){         //第1列全部进行合并操作                 if (obj1.innerText == obj2.innerText) {     //判断值是否相等                     obj1.rowSpan++;                         //合并行                     obj2.parentNode.removeChild(obj2);      //移除被合并的行                 } else {
                       obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());                 }             }else if(i == 5){   //第6列合并操作参照第2列，第二列合并了，第5列才进行合并                 obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-4).toString());                 if (obj1.innerText == obj2.innerText && obj3 == null) {
                       obj1.rowSpan++;                     obj2.parentNode.removeChild(obj2);                 } else {
                       obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());                 }             }else{              //只有前一列进行了合并操作后面的才会进行合并操作                 obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-1).toString());                 if (obj1.innerText == obj2.innerText && obj3 == null) {
                       obj1.rowSpan++;                     obj2.parentNode.removeChild(obj2);                 } else {
                       obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());                 }             }         }     } }