前端頁面搜索功能實現

前段頁面獲取到了后台段數據，搜索功能就不用后台了，直接就把獲得段數據中查詢。如果要查詢其他不是獲取當前段數據，那么還需要和后台交互。

 

html代碼只有一個select框。這個數據是后台給出的數據 

　　　　　　　　　　<select class="chosen-select" onchange="query(this.value)">
                        <option value="0">${_res.get("laoshixingming")}</option>
                        <c:forEach items="${list}" var="v">
                            <option value="${v.title}">${v.title}</option>
                        </c:forEach>
                    </select>

       這里頁面顯示，顯示所有的數據，進入這個頁面的時候就顯示。這里可以改為使用js加載顯示數據的

           <tbody id="tbody">
            <c:forEach items="${list}" var="v">
                <tr>
                    <td>${v.title}</td>
                    <td>
                        <fmt:formatDate value="${v.start}" pattern="HH:mm:ss"></fmt:formatDate>
                        -
                        <fmt:formatDate value="${v.end}" pattern="HH:mm:ss"></fmt:formatDate>
                    </td>
                </tr>
            </c:forEach>
            </tbody>

 

<script type="text/javascript" id="searchText">
　　//這里的userTimes的數據是和初始化加載顯示的頁面數據一樣的， 就是上邊的  ${list}  jstl 認識對象集合  
   //js不認識 所以這里在后台把list轉化為了jsonObject    JSONObject.toJSON(userTimes)

var list = ${userTimes}; 

function query(name) {
        var html = "";
        list.forEach(function (v, index, arr) {
            /*選擇了老師后的搜索*/
            if(name == v.title){
            html += "<tr>" +
                "    <td>" + v.title + "</td>" +
                "    <td>" +
                format(v.start) +
                "    -" +
                format(v.end) +
                "    </td>" +
                "    </tr>";
            }

            /*初始化的時候的數據*/
            if(name == '0'){
            html += "<tr>" +
                "    <td>" + v.title + "</td>" +
                "    <td>" +
                format(v.start) +
                "    -" +
                format(v.end) +
                "    </td>" +
                "    </tr>";
            }

            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());
                }
            }
        }
    }
}

</script>