`
xinklabi
  • 浏览: 1562285 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

Jquery select2 插件做联动查询（好用）

 
阅读更多

最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。

一、页面部分

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <input type="text" id="num">  


二、js部分

 

 

 

[javascript] view plaincopy
 
  1. $(document).ready(function({  
  2.     $("#num").select2({  
  3.     placeholder:"输入一个AS号码",//文本框的提示信息  
  4.     minimumInputLength:1,   //至少输入n个字符，才去加载数据  
  5.     allowClear: true,   //是否允许用户清除文本信息  
  6.     ajax:{  
  7.         url:'${pageContext.request.contextPath }/……!getASNumber.do',    //地址  
  8.         dataType:'text',    //接收的数据类型  
  9.         //contentType:'application/json',  
  10.         data: function (term, pageNo) {     //在查询时向服务器端传输的数据  
  11.             term = $.trim(term);  
  12.                     return {  
  13.                          autNumber: term,   //联动查询的字符  
  14.                          pageSize: 15,  //一次性加载的数据条数  
  15.                          pageNo:pageNo, //页码  
  16.                          time:new Date()//测试  
  17.                      }  
  18.         },  
  19.         results:function(data,pageNo){  
  20.             if(data.length>0){   //如果没有查询到数据，将会返回空串  
  21.             var dataObj =eval("("+data+")");    //将接收到的JSON格式的字符串转换成JSON数据  
  22.             var more = (pageNo*15)<dataObj.total;    //用来判断是否还有更多数据可以加载  
  23.                 return {  
  24.                 results:dataObj.result,more:more      
  25.                 };  
  26.             }else{  
  27.                 return {results:data};  
  28.             }                         
  29.         }  
  30.     },  
  31.         initSelection:function(element,callback){           //初始化，其中doName是自定义的一个属性，用来存放text的值  
  32.                var id=$(element).val();  
  33.                var text=$(element).attr("doName");  
  34.                if(id!=''&&text!=""){  
  35.                      callback({id:id,text:text});  
  36.                }  
  37.         },  
  38.     formatResult: formatAsText  //渲染查询结果项  
  39.     });  
  40. })  

 

 

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. //格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动       
  2. function formatAsText(item){  
  3.      var itemFmt ="<div style='display:inline;'>"+item.id+"</div><div style='float:right;color:#4F4F4F;display:inline'>"+item.name+"</div>"  
  4.      return itemFmt;  
  5. }  

 

 

 

三、需要服务器端传输的数据格式：“{'result':[{'id':'4048','text':'4808','name':'CHINA169-BJ'},{'id':'4048','text':'4808','name':'CHINA169-BJ'}],'total':'1'}”

注：返回的数据格式是json格式的，result存放的是符合查询条件的记录前n条数据的一些属性，total存放的是符合查询条件的记录的总数

        在联动查询的过程中，向服务器端传送了四个参数，其中 asNumber是指定的查询的数据，pageNo和pageSize是用来做分页效果的(注：需要自己在后台根据页号跟页码实现分页) ，分别代表页码和每页的记录数，在这里先加载了15条数据，当你鼠标滚动到最底部的时候，就会根据你传的这三个参数，加载下15条的数据。

        在做的过程中遇到了一些困难，因为有关select2的资料很少， 官网上的例子又看不太明白，花了三天时间才做出来 。在这里整理出来与大家分享，希望大家看过之后给我提一些宝贵意见。微笑

       用到的js跟css大家可以到官网上去下载，也可以在这里http://download.csdn.net/detail/zdx1515888659/6588415下载。

注：在用编辑器生成代码时，要注意DOCTYPE ，<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">写成这样子 样式会有问题，至于到底是什么原因我也不太清楚，应该写成<!DOCTYPE HTML>

 

 

分享到：
| 浅谈CSRF攻击方式（跨站请求伪造）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics