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


Posted in Javascript onDecember 25, 2016

本文实例讲述了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?"":",";
           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==""?"---":$.jsondata[id].ZZJGDM);
    $("#reg_companycode_form").val($.jsondata[id].ZZJGDM==""?"---":$.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?"":",";
        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?"":",";
          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 = "<span class='up'>up</span>";
      var pagetoolpagenum=1;
      for (var i = 1; i <= pagetotal; i++) {
        if(i%5==1&&i>5){
          pagetoolpagenum++;
        }
        html += "<span pagenum='"+i+"' i='" +pagetoolpagenum + "' class='num'>" + i
            + "</span>";
      }
      html += "<span class='down'>down</span>";
      $("#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+='<li id="'+list[i]+'" >'+$.jsondata[list[i]].JGMC+'</li>';
      }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));

在页面中调用

<div class="item_input fl">
  <input id="reg_companyname" autocomplete="off" type="text" class="text" name="DWBM_SV"/>
  <div id="resultlist" class="hidden" style="width:300px;margin-top: 1px;display:none;">
    <ul></ul>
    <div class="pagetool" id="pagetool"></div>
    </div>
</div>
<script>
    $("#reg_companyname").search({"id":"resultlist","url":"/getcompany.go"});
</script>

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

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

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
js自定义事件代码说明
Jan 31 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
jquery退出each循环的写法
Feb 26 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
You might like
PHP递归调用的小技巧讲解
2013/02/19 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
CAD制图设计师自荐信
2014/01/29 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
趣味运动会口号
2015/12/24 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书