jquery+ajax列表过滤以及高亮的实现

来源：互联网发布：mmd 软件百科编辑：程序博客网时间：2024/05/18 21:46
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");//正则表达式中/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，页面效果图




	
					
					   jquery+ajax列表过滤以及高亮的实现
	  	   【26】jQuery实现的搜索列表过滤【好】
	  	   jquery列表的过滤示例
	  	   实现列表数据的过滤
	  	   使用jQuery+ajax实现级下拉列表的级联显示
	  	   jQuery Mobile 列表过滤
	  	   jquery ajax实现下拉列表联动
	  	   利用ligerUI实现类似数据列表过滤展示，类似JQuery datatable和某些框架的dataGrid
	  	   用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。
	  	   【Lucene】使用EasyUI和JQuery配合Lucene实现数据的分页查询以及高亮显示
	  	   使用jQuery Ajax过滤实现REST不间断会话
	  	   ajax实现（javascript以及jquery）
	  	   JQuery Ajax的实现原理以及二次封装通用的Ajax
	  	   jquery的简单实现高亮效果
	  	   jquery的ajax动态下拉列表
	  	   jquery高版本的ajax调用
	  	   列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
	  	   Compass 更智能的搜索引擎（3）--高亮，排序，过滤以及各种搜索
	     		  
	  	   一个SQL列连成字符串的方法
	  	   关于乘法运算的计算过程
	  	   doxygen相关问题
	  	   敏捷开发学习
	  	   zz 读书笔记Add comments
	  	   jquery+ajax列表过滤以及高亮的实现
	  	   Eclipse快捷键大全
	  	   关于linux
	  	   反射调用方法时抛出的异常的获取
	  	   系统服务
	  	   C# SendKeys.SendWait的一个技巧
	  	   基于openSUSE11.0交叉编译嵌入式linux系统产品
	  	   ubuntu 11.04 安装gvim
	  	   plsql知识梳理-连接