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

工作需要 学习了一下select2并整理如下
页面结构html:
<input type="text" id="patentipcno">
Js处理:
$(document).ready(function({
    $("#patentipcno").select2({
    multiple:true,//true为多选
    placeholder:"输入一个文本",//文本框的提示信息
    minimumInputLength:1,   //至少输入n个字符,才去加载数据,与之相关的maximumSelectionLength表示最大输入限制。
    allowClear: true,  //是否允许用户清除文本信息
    ajax:{
        url:'${pageContext.request.contextPath }/…getNo.do',   //请求的地址
        dataType:'json',    //接收的数据类型
        delay: 1500,//1.5秒后查询
          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){ //初始化,页面回写时数据显示
               var id=$(element).val();
                   if(id!=''&&text!=""){
                     callback({id:id,text:id});//id的数据会保存到数据库,text数据会在下拉菜单显示
               }
        },
    formatResult: formatAsText, //渲染查询结果项 和下面templateResult作用相同
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1,
    templateResult: formatRepo, 
    templateSelection: formatRepoSelection 
    });
})
//格式化查询结果,将查询回来的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;
}
$("#patentipcno").val(null).trigger("change");


1.$("#patentipcno").val(null).trigger("change");//清空数据

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

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

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

5.escapeMarkup字符转义处理

6.templateResult返回结果回调function formatRepo(repo){return repo.text},
这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

7.templateSelection选中项回调function formatRepoSelection(repo){
return repo.text} 保存数据到数据库


你可能感兴趣的:(Jquery Select2服务端实例及几个小问题)