jquery+ajax列表過濾以及高亮的實現

1，頁面jsp

<div class="middle">    <h2>貨運狀態</h2>    <div class="search">        <label id="">託運編號：</label>        <input type="text" name="searchgoodsid"/>    </div>    <div>        <table >            <thead>                <tr>                    <th>託運編號</th>                    <th>物品名稱</th>                    <th>託運終點</th>                    <th>託運路線</th>                    <th>託運車次</th>                    <th>目前狀態</th>                    <th>備忘</th>                </tr>            </thead>            <tbody>            </tbody>            <tfoot>                <tr>                    <td colspan="10"></td>                </tr>            </tfoot>        </table>    </div></div>

2，jquery+ajax

<script type="text/javascript">    $(function(){        init();        $("input[name='searchgoodsid']").keyup(function(e){            if($(this).val()!=null && $.trim($(this).val())!=""){                var orderid = $.trim($(this).val()).toString();                if(getCharAt("'",orderid) != -1){                    orderid = orderid.replace(/'/, "''");//這個地方我把單引號(')轉換成('')是因為單引號在資料庫查詢中如果會出現衝突                }                $.ajax({                    url:"gettransportstate.do",                    type:"POST",                    data:{orderformid : orderid},                    dataType:"html",                    beforeSend: function(){                        $("tbody tr.matter").remove();                        $(this).attr("value", "\u67e5詢中...");                    },                    complete:function(){                        $(this).attr("value", "\u786e定");                    },                    success:function(data){                        if(data==null || data==""){                            $(".matter").hide();                            alert("\u8f93入編號無法查詢。");                        }else{                            var reg = new RegExp(orderid, "ig");//Regex中/i是忽略大小寫，/g是全文匹配。                            data = data.toString().replace(reg, "<span style='COLOR:#00F;font-weight:bold'>"+orderid.toUpperCase()+"</span>");//高亮上色                            $("tbody").html(data);                            $(".matter").show();                        }                    },                    error:function(){                        $(".matter").hide();                        alert("\u8f93入編號無法查詢。!");                    }                });            }else{                init();            }        })                        function init(){//初始化表格式資料            var htmlData = "<c:forEach var='transportstate' items='${transportstate}'>";            htmlData += "<tr class='element'><td id='orderformid'>${transportstate.orderformid}</td>";            htmlData += "<td id='goodsname'>${transportstate.goods.goodsname}</td>";            htmlData += "<td id='receiveraddress'>${transportstate.receiveraddress}</td>";            htmlData += "<td id='path'>${transportstate.path.description}</td>";            htmlData += "<td id='trainnumber'>0</td>";            htmlData += "<td id='time'>${transportstate.goods.nowstate.nowstatename}</td>";            htmlData += "<td id='description'>0</td>";            htmlData += "</tr></c:forEach>";            $("tbody").html(htmlData);        }        function getCharAt(val,str){//擷取數組中對應數位索引            for (var i = 0; i < str.length; i++) {                if (val == str.charAt(i))                    return i;            }            return -1;        };    })</script>

3，後台資料返回

public ActionForward getOneTransportStateListAction(ActionMapping mapping,            ActionForm form, HttpServletRequest request,            HttpServletResponse response) throws Exception {        try {            String orderformid = request.getParameter("orderformid");            String hqlStr = "from " + Orderform.class.getName() + " entity where entity.orderformid like '%" + orderformid + "%'";            List orderforms = ofdi.getObjectsByCreateQuery(hqlStr);            response.setContentType("text/html;charset=utf-8");            PrintWriter out = response.getWriter();            if (orderforms != null && orderforms.size() > 0) {                for (int i = 0; i < orderforms.size(); i++) {                    Orderform of = (Orderform) orderforms.get(i);                    String outputHtml = "<tr class='element'>";                    outputHtml += "<td id='orderformid'>" + of.getOrderformid() + "</td>";                    outputHtml += "<td id='goodsname'>" + of.getGoods().getGoodsname() + "</td>";                    outputHtml += "<td id='receiveraddress'>" + of.getReceiveraddress() + "</td>";                    outputHtml += "<td id='path'>" + of.getPath().getDescription() + "</td>";                    outputHtml += "<td id='trainnumber'>" + 1 + "</td>";                    outputHtml += "<td id='time'>" + of.getTime() + "</td>";                    outputHtml += "<td id='description'>" + of.getDescription() + "</td>";                    out.println(outputHtml);                }            } else {                out.println();            }            request.setAttribute("transportstate", orderforms);            return null;        } catch (Exception ex) {            ex.printStackTrace();            return mapping.getInputForward();        }}

4，struts設定檔struts-config.xml

<!--貨運狀態action開始-->        <!--①貨運狀態列表顯示action-->        <action path="/transportstate" type="cn.osunda.logistics.action.transportstate.TransportStateAction"            parameter="getTransportStateListAction" input="/stationmanager/index.jsp">            <forward name="transportstate" path="/transportstate/transportstate.jsp"></forward>        </action>        <!--②貨運狀態查詢action-->        <action path="/gettransportstate" type="cn.osunda.logistics.action.transportstate.TransportStateAction"            parameter="getOneTransportStateListAction" scope="request">        </action> <!--貨運狀態action結束-->

5，頁面效果圖