多选框事件

本文介绍了一种基于Ajax和Select2插件的库位编码选择器实现方法,包括前端界面设计、数据加载策略及后台数据处理逻辑。通过联动查询和多选功能,实现了库位信息的有效管理和快速检索。
 <div class="control-group span6" style="display: inline">
     <div id="positionCodeDiv">
          <label class="control-label" for="positionCode">库位编码:</label>
               <div class="controls">
                   <div class="span12 required">
                      <input type="text" id="positionCode" name="positionCode">
                   </div>
               </div>
      </div>
 </div>

$("#positionCode").select2({
        placeholder: "--请选择库位--",
        minimumInputLength: 0, //至少输入n个字符,才去加载数据
        allowClear: true, //是否允许用户清除文本信息
        delay: 250,
        formatNoMatches: "没有结果",
        formatSearching: "搜索中...",
        formatAjaxError: "加载出错啦!",
        multiple: true,   //true为多选  false为单选
        ajax: {
            url: context_path + "/inventoryTask/getSelectPositionCode",
            type: "POST",
            dataType: "json",
            delay: 250,
            data: function (term, pageNo) { //在查询时向服务器端传输的数据
                term = $.trim(term);
                return {
                    baseStationName: term, //联动查询的字符
                    positionCode: $("#positionCode").val()
                }
            },
            results: function (data, pageNo) {
                var res = data.result;
                if (res.length > 0) { //如果没有查询到数据,将会返回空串
                   var more = (pageNo * 15) < data.total; //用来判断是否还有更多数据可以加载
                    return {
                        results: res,
                        more: more
                    };
                } else {
                    return {
                        results: {}
                    };
                }
            },
            cache: true
        }
    });

   //修改时加载库位信息
    if ('${inventoryTask.id}') {
        // 用户赋值
        $.ajax({
            url: context_path + "/inventoryTask/getPositionInfo",
            type: "post",
            dataType: "JSON",
            data: {
                positionCodes: '${inventoryTask.positionCode}'
            },
            async: false,
            success: function (data) {
                if (data) {
                    var obj = [];
                    for (let i = 0; i < data.length; i++) {
                        obj.push({
                            id: data[i].userId,
                            text: data[i].name
                        });
                    }
                    $("#positionCode").select2("data", obj);
                }
            }
        });
    }



     //后台controller层
     /**
     * 获取库位下拉数据
     *
     * @param positionCode
     * @return Map
     * @author pz
     * @date 2019-03-15
     */
    @RequestMapping(value = "/getSelectPositionCode")
    @ResponseBody
    public Map<String, Object> getSelectPositionCode(String positionCode) {
        Map<String, Object> map = new HashMap<>();

        List<Stock> lstStock=stockDAO.uniqeList(null);
        JSONArray arr = new JSONArray();
        JSONObject obj = null;
        for (Stock s : lstStock) {
            obj = new JSONObject();
            // 库位编码
            obj.put("id", s.getPositionCode());
            // 库位名称
            obj.put("text", s.getPositionCode());
            arr.add(obj);
        }

        // 根据条件获取已添加的库位信息
        if (StringUtils.isNotBlank(positionCode)) {
            Map<String, Object> sceneMap = new HashMap<>();
            sceneMap.put("position_code", positionCode);
            List<Stock> stockList = stockService.selectByMap(sceneMap);
            if (stockList != null && stockList.size() > 0) {
                for (Stock s : stockList) {
                    obj = new JSONObject();
                    obj.put("id", s.getPositionCode());
                    obj.put("text", s.getPositionCode());
                    arr.add(obj);
                }
            }
        }
        map.put("result", arr);
        return map;
    }

    /**
     * 获取库位信息(修改时,库位下拉框赋值使用)
     *
     * @return
     * @author pz
     * @date 2019-03-15
     */
    @RequestMapping(value = "/getPositionInfo")
    @ResponseBody
    public JSONArray getPlatformInfo(String positionCodes) {
        JSONArray arr = new JSONArray();
        JSONObject obj = null;
        Map<String, Object> map = new HashMap<>();
        //lambl表达式
        List<String> lstPositionCodes = Arrays.stream(positionCodes.split(",")).collect(Collectors.toList());

        List<Stock> lstStock=stockDAO.uniqeList(lstPositionCodes);
        if (lstStock != null && lstStock.size() > 0) {
            for (Stock s : lstStock) {
                obj = new JSONObject();
                obj.put("userId", s.getPositionCode());
                obj.put("name", s.getPositionCode());
                arr.add(obj);
            }
        }
        return arr;
    }

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值