select2 的加载远程数据

2019独角兽企业重金招聘Python工程师标准>>>

select2 加载远程数据的代码如下：

function initGlfl() {
        var mapping = document.getElementById("zj").value;
        $("#glfl").select2(
                        {
                            placeholder : "请选择内容",//文本框的提示信息  
                            minimumInputLength : 0, //至少输入n个字符，才去加载数据  
                            allowClear : true, //是否允许用户清除文本信息  
                            ajax : {
                                url : "${ctx}/group/odsGbt4754Mapping/getFieldLst?mapping="
                                        + mapping, //地址  
                                dataType : 'text', //接收的数据类型  
                                // type: "POST",
                                //contentType:'application/json',  
                                data : function(term, pageNo) { //在查询时向服务器端传输的数据  
                                    term = $.trim(term);
                                    return {
                                        autNumber : term, //联动查询的字符  
                                        pageSize : 15
                                    //一次性加载的数据条数  

                                    }
                                },
                                results : function(data) {
                              
                                    if (data.length > 0) { //如果没有查询到数据，将会返回空串  
                                        var dataObj = eval("(" + data + ")"); //将接收到的JSON格式的字符串转换成JSON数据  
                                        var more = (1 * 15) < dataObj.total; //用来判断是否还有更多数据可以加载  
                                        return {
                                            results : dataObj.result,
                                            more : more
                                        };
                                    } else {
                                        return {
                                            results : data
                                        };
                                    }
                                }
                            },
                            initSelection : function(element, callback) {
                                //初始化，其中doName是自定义的一个属性，用来存放text的值  
                                var id = $(element).val();      
                                if (id==glflId) {
                                    callback({
                                        id : glflId,
                                        text : glflText
                                    });
                                }
                            } 
                        // formatResult: formatAsText  //渲染查询结果项  
                        });
 

需要注意的点：初始化方法  initSelection : function(element, callback)  会由$("#glfl").val(glflId).trigger("change");触发，后执行callback 方法，

如果想取消触发初始化方法则用：$("#glfl").val(null).trigger("change");

 

另外select2 标签定义为：<input id="glfl" name="glfl" class="input-medium" />

 

select2 取 text 值的方法

function convertText(sid){
        var obj= $(sid).select2('data');
           var tValue ="";
           if(obj!=null){
               tValue = obj.text;
           }
           return tValue;
    }

 

select2 ，取id值的方法

 $(sid).val() 

 

后台的方法返回数据格式

@RequiresPermissions("user")
    @ResponseBody
    @RequestMapping(value = "getFieldLst")
    public Object getFieldLst(@RequestParam(value="mapping") String mapping) {
        //List<Map<String, Object>> mapList = Lists.newArrayList();
        String category = DictUtils.getDictLabel(mapping,
                "jcfx_field_category", null);
        OdsGbt4754Mapping odsGbt4754Mapping = new OdsGbt4754Mapping();
        odsGbt4754Mapping.setMapping(category);
        List<OdsGbt4754Mapping> list = odsGbt4754MappingService.findFields(odsGbt4754Mapping);
        List<Map<String,String>> mLst = new ArrayList<Map<String,String>>();
        for (OdsGbt4754Mapping o: list){
            Map<String, String> map = new HashMap<String, String>();
            map.put("id", o.getCode());
            map.put("text", o.getCodeValue());
            mLst.add(map);
        }
        JSONArray jsonArray = JSONArray.fromObject(mLst);

        JSONObject user_json = new JSONObject();
        user_json.put("total", list.size());

        user_json.put("result", jsonArray);
        String s = user_json.toString();

        return s;
        
    }

转载于:https://my.oschina.net/u/2425942/blog/752760