当前位置:  首页  >  PHP资讯  >  业界资讯

jQuery基于xml格式数据实现模糊查询及分页功能的方法

这篇文章主要介绍了jQuery基于xml格式数据实现模糊查询及分页功能的方法,涉及jQuery使用ajax技术针对xml格式数据的读取、模糊查询及分页显示等相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法。分享给大家供大家参考,具体如下:

1、此代码只支持xml 格式数据,根据不同需求修改ajax的success方法就ok了

2、此代码只是针对ajax只需一次请求的情况下

 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题 (function($) { /** * =============================================================================================================== * ========== 模糊搜索功能 ================================================================================= * =============================================================================================================== * * */ $.xml=function(data){//加载xml var xmlobj=null; if(window.ActiveXObject){ var xml; xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); xmlobj=$(xml); }else{ xmlobj=$(data); } return xmlobj; }; //获取节点 $.getnode=function(key,obj){ var nodevalue=obj.children(key).text(); return nodevalue; }; $.xmldata=null; $.jsOndata=null; $.indexdata=null; $.inputid=null; $.pagetoolid=null; $.resultdata=null; $.pagetotal=1; $.load=function(url){ $.ajax({ type: "post", url: url, dataType: "text", success:function(data){ $.xmldata=$.xml(data); var jsOnstr='{'; var indexstr="{"; $.xmldata.find("QUERYINFO").find("ROW").each(function(i){ var point=i==0&#63;"":","; var ZZJGDM=$.getnode("ZZJGDM",$(this)); var JGMC=$.getnode("JGMC",$(this)); var DWLX=$.getnode("DWLX",$(this)); var JGJC=$.getnode("JGJC",$(this)); var JGBH=$.getnode("JGBH",$(this)); var ZCDZ=$.getnode("ZCDZ",$(this)); jsonstr+=point+"'"+JGBH+"':{'ZZJGDM':'"+ZZJGDM+"','JGMC':'"+JGMC+"','JGBH':'"+JGBH+"','JGJC':'"+JGJC+"','ZCDZ':'"+ZCDZ+"','DWLX':'"+DWLX+"'}"; indexstr+=point+"'"+JGMC+"':'"+JGBH+"'"; }); jsonstr+="}"; indexstr+="}"; $.indexdata=eval("("+indexstr+")"); $.jsOndata=eval("("+jsonstr+")"); }}); }; $.select=function(obj){//选中结果中的一项时 var id=obj.attr("id"); $("#"+$.inputid).val($.jsondata[id].JGMC); $("#reg_companysimplename").val($.jsondata[id].JGJC); $("#reg_companysimplename_form").val($.jsondata[id].JGJC); $("#reg_companycode").val($.jsondata[id].ZZJGDM==""&#63;"---":$.jsondata[id].ZZJGDM); $("#reg_companycode_form").val($.jsondata[id].ZZJGDM==""&#63;"---":$.jsondata[id].ZZJGDM); $("#reg_companytype").val($.jsondata[id].DWLX); $("#reg_companytype_form").val($.jsondata[id].DWLX); $("#reg_jgbh").val($.jsondata[id].JGBH); $("#reg_regaddress").val($.jsondata[id].ZCDZ); $("#reg_regaddress_form").val($.jsondata[id].ZCDZ); $("#"+$.inputid).focus(); $("#"+$.inputid).blur(); }; $.fn.search=function(obj){//程序入口 var oldkeyword=""; var id=obj.id; var url=obj.url; $.inputid=$(this).attr("id"); if($.xmldata==null){ $.load(url); } //========================================键盘事件========================================== $(this).keyup(function(){ var resultlist=null; var keywordvalue=$(this).val().trim(); $("#reg_companysimplename").val(""); $("#reg_companycode").val(""); $("#reg_companytype").val(""); if(keywordvalue==""||oldkeyword==keywordvalue){//解决ie 的keyup 事件异常 if(keywordvalue==""){ $("#"+id+" ul").parent().hide(); } return; }else{ oldkeyword=keywordvalue; } var jsOnstr='{'; var rownum=0,pagesize=10,num=0; $.pagetotal=1; $.indexsearch($.indexdata,keywordvalue); resultlist=$.indexsearch($.indexdata,keywordvalue); var ids="["; for(var i in resultlist){//给查询结果分页 var point=$.pagetotal==1&#63;"":","; rownum++; if(rownum>=pagesize&&rownum%pagesize==0||resultlist.length==rownum){ ids+=","+"'"+resultlist[i]+"']"; jsonstr+=point+"'"+$.pagetotal+"':"+ids; ids="["; num=0; if(rownum%pagesize==0){ $.pagetotal++; } }else{ point=num==0&#63;"":","; ids+=point+"'"+resultlist[i]+"'"; num++; } } jsonstr+="}"; $.resultdata=eval("("+jsonstr+")"); //初始化结果列表 if(rownum==0)return; var pagenum=1; $.pageto(pagenum,$.resultdata,$("#"+id+" ul")); if($.pagetotal>1){ $.pagetool.createpagetool($.pagetotal); $.pagetool.pageto(pagenum,$.pagetotal); $("#pagetool span[pagenum='1']").css("backgroundColor",'lightblue'); }else{ $("#pagetool").html(""); } $("#pagetool .num").click(function(){ pagenum=eval($(this).text()); $("#pagetool span").css("backgroundColor",'white'); $(this).css("backgroundColor",'lightblue'); $.pageto(pagenum,$.resultdata,$("#"+id+" ul")); }); $("#pagetool .up").click(function(){ pagenum--; if(pagenum!=0){ $("#pagetool span").css("backgroundColor",'white'); $("#pagetool span[pagenum='"+pagenum+"']").css("backgroundColor",'lightblue'); $.pageto(pagenum,$.resultdata,$("#"+id+" ul")); $.pagetool.pageto(pagenum); }else{ pagenum++; } }); $("#pagetool .down").click(function(){ pagenum++; if(pagenum<=$.pagetotal){ $("#pagetool span").css("backgroundColor",'white'); $("#pagetool span[pagenum='"+pagenum+"']").css("backgroundColor",'lightblue'); $.pageto(pagenum,$.resultdata,$("#"+id+" ul")); $.pagetool.pageto(pagenum); }else{ pagenum--; } }); }); }; //工具栏分页 $.pagetool = { createpagetool : function(pagetotal) { var html = "up"; var pagetoolpagenum=1; for (var i = 1; i <= pagetotal; i++) { if(i%5==1&&i>5){ pagetoolpagenum++; } html += "" + i + ""; } html += "down"; $("#pagetool").html(html); }, pageto : function(pagenum,pagetotal) { var pagetoolpagenum=1; if(pagenum>5){ pagetoolpagenum=Math.ceil(pagenum/5); } $("#pagetool span").hide(); $("#pagetool span:first").show(); $("#pagetool span[i='"+pagetoolpagenum+"']").show(); $("#pagetool span:last").show(); } }; //模糊搜索 $.indexsearch=function(indexdata,keyword){ var resultids=new Array(); for (var key in $.indexdata){ if(key.indexOf(keyword)!=-1) resultids.push($.indexdata[key]); } return resultids; }; //跳页程序 $.pageto=function(pagenum,data,obj){ var list=data[pagenum]; var html=""; obj.html(html); obj.parent().show(); $(list).each(function(i){ try{ html+='
  • '+$.jsondata[list[i]].JGMC+'
  • '; }catch(e){} }); obj.html(html); obj.find("li").bind({//结果集的点击事件 "click":function(){ $.select($(this)); obj.parent().hide(); obj.parent().find("#pagetool").html(""); }, "mouseover":function(){//结果集的鼠标悬浮事件 $(this).parent().find("li").css("backgroundColor","white"); $(this).css("backgroundColor","lightblue"); } }); }; }(jQuery));

    在页面中调用

     

    运行效果 (不同的效果需要不同的样式)

    PS:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:

    在线XML/JSON互相转换工具:
    http://tools.jb51.net/code/xmljson

    在线格式化XML/在线压缩XML:
    http://tools.jb51.net/code/xmlformat

    XML在线压缩/格式化工具:
    http://tools.jb51.net/code/xml_format_compress

    XML代码在线格式化美化工具:
    http://tools.jb51.net/code/xmlcodeformat

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

    希望本文所述对大家jQuery程序设计有所帮助。

    内容推荐:免费高清PNG素材下载
    吐了个 "CAO" !
    扫码关注 PHP1 官方微信号
    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4