在[Jquery select美化增加版Select2使用]说明了jquery select2的基本使用,今天将select2 ajax服务端获取数据的例子做一下说明。并总结一下我在项目中遇到的几个问题。
1、服务端例子:
页面结构html:
<input type="text" id="num">
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)<dataObj.total; //用来判断是否还有更多数据可以加载 return { results:dataObj.result,more:more }; }else{ return {results:data}; } } }, initSelection:function(element,callback){ //初始化,其中doName是自定义的一个属性,用来存放text的值 var id=$(element).val(); var text=$(element).attr("doName"); if(id!=''&&text!=""){ callback({id:id,text:text}); } }, formatResult: formatAsText //渲染查询结果项 }); }) //格式化查询结果,将查询回来的id跟name放在两个div里并同行显示,后一个div靠右浮动 function formatAsText(item){ var itemFmt ="<div style='display:inline;'>"+item.id+"</div><div style='float:right;color:#4F4F4F;display:inline'>"+item.name+"</div>" 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条的数据。
2、注意事项
清理已有的Select2的数据:
$("#selectsq").empty(); //清除下拉框option,不是会累加
Select2加载已选择的数据:
if (EditActiveModel != null) { var tagss = new Array(); $.each(EditActiveModel.CommunityList, function (key, val) { tagss.push(val.Id); }); } $("#selectsq").val(tagss).trigger("change");
Select2数据变化事件:
$("#selectsq").on("change", function (e) { ToggleProductList(); }) 本文来源于:http://www.suchso.com/projecteactual/jquery-select2-server-problem.html
相关推荐
简单实用的jquery select2组件
jquery select2 html select 内容搜索 下拉框搜索
jquery select2 select美化插件
今天小编就为大家分享一篇jquery 动态遍历select 赋值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jquery插件 select2 多样化的下拉框插件。
参照《jQuery完全攻略》亲自手打并测试的100多个实例(部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法)。 主要分为: jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...
select 检索插件jquery框架,根据输入内容自动过滤select 选项
最新JQuery UI 1.8.2 内含实例及Jquery 1.4.2, JQuery UI 1.8 实例 JQuery 1.4.2
jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例
jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例
jquery 时间控件实例jquery 时间控件实例jquery 时间控件实例jquery 时间控件实例jquery 时间控件实例
50个Jquery经典实例50个Jquery经典实例
几个 简单 Jquery 项目 实例源码
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
Jquery模拟select效果实现,纯自写,简单实用,可自行修改样式。
jquery 几个实例
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例