欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

使用select2插件做联动查询

程序员文章站 2022-05-23 23:09:31
...

最近跟的一个项目整体的架构采用的是win 8(metro)风,里面用到了很多插件,其中有一个select2.js(官网:http://ivaynberg.github.io/select2),这个插件的功能非常强大,我只用到了其中的一个——联动查询。 效果图: 一、页面部分 input type=text id=num

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

效果图:

使用select2插件做联动查询

一、页面部分


二、js部分
$(document).ready(function({
    $("#num").select2({
	placeholder:"输入一个AS号码",//文本框的提示信息
	minimumInputLength:1,	//至少输入n个字符,才去加载数据
	allowClear: true,	//是否允许用户清除文本信息
	ajax:{
		url:'${pageContext.request.contextPath }/……!getASNumber.do',	//地址
		dataType:'text',	//接收的数据类型
		//contentType:'application/json',
		data: function (term, pageNo) {		//在查询时向服务器端传输的数据
			term = $.trim(term);
	                return {
	                     autNumber: term, 	//联动查询的字符
	                     pageSize: 15,	//一次性加载的数据条数
	                     pageNo:pageNo,	//页码
	                     time:new Date()//测试
	                 }
		},
		results:function(data,pageNo){
			if(data.length>0){	//如果没有查询到数据,将会返回空串
			var dataObj =eval("("+data+")");	//将接收到的JSON格式的字符串转换成JSON数据
			var more = (pageNo*15)
//格式化查询结果,将查询回来的id跟name放在两个div里并同行显示,后一个div靠右浮动		
function formatAsText(item){
     var itemFmt ="
"+item.id+"
"+item.name+"
" return itemFmt; }

三、需要服务器端传输的数据格式:“{'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的资料很少, 官网上的例子又看不太明白,花了三天时间才做出来 。在这里整理出来与大家分享,希望大家看过之后给我提一些宝贵意见。使用select2插件做联动查询

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

:在用编辑器生成代码时,要注意DOCTYPE写成这样子 样式会有问题,至于到底是什么原因我也不太清楚,应该写成使用select2插件做联动查询

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。