• select2加载远程数据示例


    核心js

    $("#query_pack_code").select2({
    			language: "zh-CN",
    			allowClear: true,
    			 "150px",
    			placeholder: "请选择",
    			ajax: {
    				url: "monitor/historyQuery/getPackCodeOptions.mvc",
    				dataType: 'json',
    				delay: 250,
    				data: function (params) {
    					params.offset = 10;  //显示十条
    					params.page = params.page || 1; //页码
    					return {
    						name: params.term,
    						page: params.page,
    						offset: params.offset
    					};
    				},
    				cache: false,
                    /*
    				*@params res 返回值
    				*@params params 参数
    				*/
    				processResults: function (res, params) {
    						var users = res.data;
    						var options = [];
    						for (var i = 0, len = users.length; i < len; i++) {
    							var option = {
    								"id": users[i]["serialNo"],
    								"text": (users[i]["serialNo"])
    							};
    							options.push(option);
    						}
    						return {
    							results: options,
    							pagination: {
    								more: (params.page * params.offset) < res.total
    							}
    						};
    				},
    				escapeMarkup: function (markup) {
    					return markup;
    				},
    				minimumInputLength: 1
    			}
    		});
    

    后台使用的springmvc+mybatis 分页使用的插件com.github.miemiedev.mybatis.paginator.domain.PageBounds;

     /**
     * 
     * <p>Description: 下拉框异步加载</p>
     * @param res 请求
     * @return 结果集
     */
    @RequestMapping(value="/getPackCodeOptions.mvc")
    @ResponseBody
    public Object getPackCodeOptions(HttpServletRequest res){
    	//分页
    	PageBounds pageBounds;
        pageBounds = new PageBounds();
        //查询条件
    	String name = res.getParameter("name");
    	//每页显示条数  
        Integer offset = Integer.valueOf(res.getParameter("offset"));  
        //当前页码
        Integer page = Integer.valueOf(res.getParameter("page"));  
        if (page == 1) {  
            page = 0;  
        } else {  
            page = (page - 1) * offset;  
        }
        pageBounds.setLimit(offset);
        pageBounds.setPage(page);
        Map<String, Object> params;
        params = new HashMap<String, Object>();
        params.put("name", name);
        EntityPageBean<TmPackSerial> pageBean;
        Map<String, Object> dataMap=new HashMap<String, Object>();
    	try {
    		pageBean = this.tmPackSerialService.getPackCodeOptions(params, pageBounds);
    		dataMap.put("total", pageBean.getiTotalRecords());
            dataMap.put("recordsFiltered", pageBean.getiTotalRecords());
            dataMap.put("data", pageBean.getResults());
    	} catch (DaoException e) {
    		logger.error("查询出错:", e);
    		return null;
    	}
        return dataMap;  
    }
    

    效果图:

    参考资料: select2主页

  • 相关阅读:
    Navicat连接MySQL数据库的一些问题与解决方案
    从select机制谈到epoll机制
    关于VS2017提示I/O文件操作函数需要加上_s的解决办法
    LeetCode初级算法(树篇)
    LeetCode初级算法(动态规划+设计问题篇)
    LeetCode初级算法(其他篇)
    Leetcode初级算法(排序和搜索+数学篇)
    Leetcode初级算法(链表篇)
    Leetcode初级算法(字符串篇)
    机器学习之k-近邻算法
  • 原文地址:https://www.cnblogs.com/xieshuang/p/7267340.html
Copyright © 2020-2023  润新知