现在位置首页 / 项目实战 /正文

Jquery Select2服务端实例及几个小问题

作者: IT小兵 | 2014年10月20日| 热度:℃ | 评论: |参与:

在[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(); })


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询