jQuery select2 initselection不工作问题,怎么解决

JavaScript016

jQuery select2 initselection不工作问题,怎么解决,第1张

在[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:rightcolor:#4F4F4Fdisplay: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()})

塔吊的型号非常多,而且型号的编号规则并不统一;

建筑工程的塔吊主要分为平臂式塔和动臂式塔(也叫俯仰塔),常见的是平臂式塔吊,动臂式的起重量大一般用在大型钢结构项目上,如北京的央视、国贸三期,上海的环球等项目;

常用的塔吊型号为FO/23B、H3/36B、7027、7030、K50/50等,还有些小塔不一一列举;

国内大部分用两个字母加四个数字表示,如ST7027,前两个字母是厂家的型号编号,ST是辽宁抚顺的永茂建机,TC是中联的等,后面的四位数中前两位数表示是臂长的最大值,后两位表示最长臂长时的最大吊重;国产的如5515等小塔也常用;

法国的有些特别,用字母表臂长,然后用数字表示最远端最大吊重,如H3/36B,H表示60米臂长,H3是型号,36表示60米时最大起重量为3.6吨,B表示先后的研发序号。