SpringBoot+Jquery+DataTables实现select改变数据联动加载（前后端全流程）

阳光穿透心脏的1/2处 2023-10-18 20:13 82阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190620160654517.gif][]

## 实现 ##

### html页面代码 ###

页面使用的是thymeleaf模板。

下拉框代码：

<div class="form-group row col-md-6">
                                            <label class="col-sm-2 col-form-label">退货发起方</label>
                                            <div class="col-sm-10">
                                            <select class="form-control" name="businessInitiator"  id="businessInitiator">
                                                <option  id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option>
                                                <option  id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '清洁车间'}" value="清洁车间"><span th:text="清洁车间"></span></option>
                                                <option  id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '正极车间'}" value="正极车间"><span th:text="正极车间"></span></option>
                                                <option  id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '负极车间'}" value="负极车间"><span th:text="负极车间"></span></option>
                                                <option value="" disabled selected hidden>选择退货发起方</option>
                                            </select>
                                            </div>
                                        </div>

input框代码：

<div class="form-group row col-md-6">
                                            <label class="col-sm-2 col-form-label">退货目的地</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="destination" id="destination"
                                                       readonly>
                                            </div>
    </div>

dataTables代码：

### Jquery代码 ###

$(document).ready(function() {
        //选择退货方后退货目的地绑定联动
        $("#businessInitiator").bind("change", function () {
            //获取选中的option的value值
            var selected = $("#businessInitiator option:selected").val();
            //获取退货目的地Input对象
            var destination = $("#destination");
            switch (selected){
                case '原料立库':
                    destination.val("原料立库退货点")
                    break;
                case '清洁车间':
                    destination.val("清洁车间退货点")
                    break;
                case '正极车间':
                    destination.val("正极车间退货点")
                    break;
                case '负极车间':
                    destination.val("负极车间退货点")
                    break;
                default:
                    destination.val("其它退货点")
            }
            //退货目的地联动完成
            // DataTable初始化
            $("#example").dataTable().fnDestroy();//还原初始化了datatable
            var t = $('#example').DataTable({
                "language": {
                    "processing": "处理中...",
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "zeroRecords": "没有匹配结果",
                    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "infoFiltered": "(由 _MAX_ 项结果过滤)",
                    "infoPostFix": "",
                    "search": "搜索:",
                    "searchPlaceholder": "搜索...",
                    "url": "",
                    "emptyTable": "表中数据为空",
                    "loadingRecords": "载入中...",
                    "infoThousands": ",",
                    "paginate": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "末页"
                    },
                    "aria": {
                        paginate: {
                            first: '首页',
                            previous: '上页',
                            next: '下页',
                            last: '末页'
                        },
                        "sortAscending": ": 以升序排列此列",
                        "sortDescending": ": 以降序排列此列"
                    },
                    "decimal": "-",
                    "thousands": "."
                },
                "processing": true,
                "searching" : false,
                "pageLength": 100,
                "serverSide": true,
                "columnDefs": [ {
                    "searchable": false,
                    "orderable": false,
                    "targets": "_all",
                }],
                "dom": '<"top">rt<"bottom"flpi><"clear">',
    
                columns: [
                    { data: 'id' ,
                        "orderable" : false},
                    { data: 'goodsLocationNumber' },
                    { data: 'locationTypeName' ,
                        "orderable" : false},
                    { data: 'saveMaterialTypeName' ,
                        "orderable" : false},
                    { data: 'materielStatusName',
                        "orderable" : false},
                    { data: 'shelveName' ,
                        "orderable" : false},
                    { data: 'remark',
                        "orderable" : false }
                ],columnDefs: [{
                    //   指定第1列，从0开始，0表示第一列，1表示第二列……
                    "targets": 0,
                    "bSortable": false,
                    "render": function(data, type, row, meta) {
                        if (row.isSelected == 1){
                            return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
                        }
                        return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
                    }
                }],
                "ajax": function (data, callback, setting) {
                    data.editActionId = $("#refundOrderId").val();
                    data.selected=selected;
                    $.ajax({
                        type: 'POST',
                        url: "/busGoodsLocation/getRejectsLocationsList",
                        cache: false,  //禁用缓存
                        //async: true,
                        data: JSON.stringify(data),  //传入组装的参数
                        contentType: "application/json",
                        dataType: "json",
                        success: function (result) {
                            callback(result);
                        }
                    })
                }
            });
        });
    });

注：

1.页面加载完成后绑定下拉框 select的change事件，获取选中的option的值，通过case进行比较，进而给input进行赋值。

2.然后要还原一次dataTables的初始化，执行初始化的dataTables的初始化并请求数据。

3.将selected作为选中的值进行请求数据的参数，进而后台根据传递的值查询并返回不同的数据。

### 后台Controller代码 ###

@Description("根据条件获取不良品货位列表")
        @RequestMapping(value = "/getRejectsLocationsList", method = RequestMethod.POST)
        @ResponseBody
        public DataTablesResultJsonVO getRejectsLocationsList(@RequestBody DataTablesJsonVOExt vo) {
            DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();
            try {
                String keyHump = vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();
                String keyLine = StringUtil.humpToLine(keyHump);
                String sortStr = vo.getOrder().get(0).getDir();
                long currentPage = vo.getStart() / vo.getLength() + 1;
                Page<WmsRefundOrder> refundOrderPage = new Page<WmsRefundOrder>(currentPage, 100);
                if ("asc".equals(sortStr)) {
                    refundOrderPage.setAsc("location." + keyLine);
                } else {
                    refundOrderPage.setDesc("location." + keyLine);
                }
                IPage<BusGoodsLocationVO> page = null;
                //接收车间仓库参数，进行参数赋值
                String warehourse = vo.getSelected();
                //仓库车间赋值
                String wareNum="A";
                switch (warehourse){
                    case "原料立库":
                        wareNum="A";
                        break;
                    case "清洁车间":
                        wareNum="B";
                        break;
                    case "正极车间":
                        wareNum="C";
                        break;
                    case "负极车间":
                        wareNum="D";
                        break;
                }
                //当编辑操作id存在时，表明是编辑操作
                if (vo.getEditActionId() != null && vo.getEditActionId() != 0) {
                    page = locationService.pageRejectsLocations(refundOrderPage, vo, 1,wareNum);
    
                    //查询出当前退货单下的所有明细
                    QueryWrapper<WmsRefundOrderDetails> refundOrderDetailsQueryWrapper = new QueryWrapper<>();
                    refundOrderDetailsQueryWrapper.eq("refund_id", vo.getEditActionId()).eq("deleted_flag", "0");
                    List<WmsRefundOrderDetails> refundOrderDetails = refundOrderDetailsService.list(refundOrderDetailsQueryWrapper);
                    for (BusGoodsLocationVO locationVO : page.getRecords()) {
                        for (WmsRefundOrderDetails details : refundOrderDetails) {
                            if (details.getGoodsLocationId().equals(locationVO.getId())) {
                                locationVO.setIsSelected(1);
                                break;
                            }
                        }
                    }
                    //删除非此退货单对应的货位
                    for (BusGoodsLocationVO locationVO : page.getRecords()) {
                        if (locationVO.getRefundOrderFlag() == 1 && locationVO.getIsSelected() == 0) {
                            page.getRecords().remove(locationVO);
                        }
                    }
                } else {
                    page = locationService.pageRejectsLocations(refundOrderPage, vo, 0,wareNum);
                }
                dataTablesResultJsonVO.setData(page.getRecords());
                dataTablesResultJsonVO.setDraw(vo.getDraw());
                dataTablesResultJsonVO.setError("error");
                dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());
                dataTablesResultJsonVO.setRecordsTotal(page.getSize());
                Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
                return dataTablesResultJsonVO;
            } catch (Exception ex) {
                dataTablesResultJsonVO.setData(new ArrayList<WmsRefundOrder>());
                dataTablesResultJsonVO.setDraw(vo.getDraw());
                dataTablesResultJsonVO.setError("error");
                dataTablesResultJsonVO.setRecordsFiltered(0L);
                dataTablesResultJsonVO.setRecordsTotal(0L);
                Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
                return dataTablesResultJsonVO;
            }
    
        }
    }

其中：

DataTablesJsonVOExt：

@Data
    public class DataTablesJsonVOExt extends DataTablesJsonVO {
        //编辑操作的id
        private Integer editActionId;
        //选择要退货的车间仓库
        private String selected;
    }

DataTablesJsonVO：

@Data
    public class DataTablesJsonVO implements Serializable{
        private Long draw;
        private List<DataTablesColumnsJsonVO> columns;
        private List<DataTablesOrderJsobVO> order;
        private Long start;
        private Long length;
        private DataTablesOrderJsobVO search;
    }

DataTablesColumnsJsonVO：

@Data
    public class DataTablesColumnsJsonVO implements Serializable {
        private String data;
        private String name;
        private boolean searchable;
        private boolean orderable;
        private DataTablesSearchJsnVO search;
    }

DataTablesOrderJsobVO：

@Data
    public class DataTablesOrderJsobVO implements Serializable {
        private Long column;
        private String dir;
    }

DataTablesResultJsonVO:

@Data
    public class DataTablesResultJsonVO<T> implements Serializable {
        private Long draw;
        private Long recordsTotal;
        private Long recordsFiltered;
        private List<T> data;
        private String error;
    }

### Service层代码 ###

IPage<BusGoodsLocationVO> pageRejectsLocations(Page page, DataTablesJsonVO vo, Integer editFlag,String wareNum);

### ServiceImpl代码 ###

@Override
        public IPage<BusGoodsLocationVO> pageRejectsLocations(Page page , DataTablesJsonVO vo ,Integer editFlag,String wareNum) {
            BusGoodsLocationVO locationVO = new BusGoodsLocationVO();
            locationVO.setEditFlag(editFlag);
            //给选中传递的仓库车间赋值
            locationVO.setSelected(wareNum);
            List<DataTablesColumnsJsonVO> dataTablesColumnsJsonVOList= vo.getColumns();
            for (DataTablesColumnsJsonVO d : dataTablesColumnsJsonVOList) {
                if("locationNumber".equals(d.getData()))
                    locationVO.setGoodsLocationNumber(d.getSearch().getValue());
                if("materielStatus".equals(d.getData()))
                    locationVO.setMaterielStatus(d.getSearch().getValue());
            }
            return baseMapper.getPageRejectsLocations(page,locationVO);
        }

### mapper层代码 ###

IPage<BusGoodsLocationVO> getPageRejectsLocations(IPage page,@Param("locationVO") BusGoodsLocationVO locationVO);

### mapper的xml文件代码 ###

<select id="getPageRejectsLocations" resultMap="busGoodsLocationVOMap"
                parameterType="com.ws.bus.sys.vo.BusGoodsLocationVO.BusGoodsLocationVO">
            SELECT location.id,location.goods_location_number, code.code_name location_type_name,shelve.shelves_name
            shelve_name,tm.materiel_name save_material_type_name ,sc.code_name materiel_status_name,lt.refund_order_flag
            FROM bus_location_tray lt
            LEFT JOIN bus_goods_location location on location.id = lt.location_id
            LEFT JOIN sys_code code on code.code_type = 'location_type' and code.code_value = location.goods_location_type
            LEFT JOIN bus_goods_shelves shelve on shelve.id = location.wh_shelves_id
            LEFT JOIN sys_code sc on sc.code_type = 'materielCheckStatus' and sc.code_value = lt.materiel_check_status
            LEFT JOIN (
            SELECT DISTINCT tray_id,materiel_name
            FROM bus_tray_materiel
            WHERE deleted_flag = '0') tm on tm.tray_id = lt.tray_id
            WHERE lt.materiel_check_status = 3 and lt.deleted_flag = 0
            <if test="locationVO != null and locationVO.editFlag == 0">
                and lt.refund_order_flag = 0
            </if>
            <if test="locationVO != null and locationVO.selected != null">
                and location.goods_location_number like  CONCAT(#{locationVO.selected},'%')
            </if>
    
        </select>

### 实体类代码 ###

package com.ws.bus.sys.entity;
    
    import com.baomidou.mybatisplus.annotation.IdType;
    import com.baomidou.mybatisplus.extension.activerecord.Model;
    import java.util.Date;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.FieldFill;
    import com.baomidou.mybatisplus.annotation.TableField;
    import java.io.Serializable;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    
    @Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    public class BusGoodsLocation extends Model<BusGoodsLocation> {
    
        private static final long serialVersionUID = 1L;
    
        /**
         * 货位主键ID
         */
        @TableId(value = "id", type = IdType.AUTO)
        private Long id;
    
        /**
         * 货位编号
         */
        private String goodsLocationNumber;
    
        /**
         * 货位名称
         */
        private String goodsLocationName;
    
        /**
         * 货位状态
         */
        private String goodsLocationStatus;
    
        /**
         * 货位类型
         */
        private Long goodsLocationType;
    
        /**
         * 归属货架
         */
        private Long whShelvesId;
    
        /**
         * 创建人ID
         */
        @TableField(fill = FieldFill.INSERT)
        private Long creatorId;
    
        /**
         * 创建时间
         */
        @TableField(fill = FieldFill.INSERT)
        private Date gmtCreat;
    
        /**
         * 修改人ID
         */
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private Long modifierId;
    
        /**
         * 修改时间
         */
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private Date gmtModified;
    
        /**
         * 是否可用（1-是，0-否）
         */
        @TableField(fill = FieldFill.INSERT)
        private Boolean availableFlag;
    
        /**
         * 是否删除（1-是，0-否）
         */
        @TableField(fill = FieldFill.INSERT)
        private Boolean deletedFlag;
    
        /**
         * 是否同步（1-是，0-否）
         */
        @TableField(fill = FieldFill.INSERT)
        private Boolean syncFlag;
    
        /**
         * 排序号
         */
        private Long sortNum;
    
        /**
         * 保留字段1
         */
        private String reserved1;
    
        /**
         * 保留字段2
         */
        private String reserved2;
    
        /**
         * 保留字段3
         */
        private String reserved3;
    
        /**
         * 保留字段4
         */
        private String reserved4;
    
        /**
         * 保留字段5
         */
        private String reserved5;
    
        /**
         * 备注
         */
        private String remark;
    
        /**
         * 货位编号(真实物理地址)
         */
        private String goodsLocationRealNumber;
    
        /**
         * 优先级距离
         */
        private Integer distance;
    
        /**
         * 坐标点
         */
        private String pointLoc;
    
        private String warehouseNumber;
    
        private String saveMaterialType;
    
        private String saveMaterialTypeName;
    
    
        @Override
        protected Serializable pkVal() {
            return this.id;
        }
    
    }

### 扩展实体类代码 ###

package com.ws.bus.sys.vo.BusGoodsLocationVO;
    
    import com.ws.bus.sys.entity.BusGoodsLocation;
    import lombok.Data;
    
    import java.util.Date;
    
    
    @Data
    public class BusGoodsLocationVO extends BusGoodsLocation {
        private String locationTypeName;
        private String shelveName;
    
        private String materielStatus;
        private String materielStatusName;
        private Integer materielNum;
        //是否是编辑操作
        private Integer editFlag;
        //选中要查询的车间仓库
        private String selected;
    
        private Integer tdNum;
        private Integer trNum;
    
        private Integer isSelected;
        private Date productDate;
        private String trayNumber;
        private Integer maxTrayAmount;
        private Integer refundOrderFlag;
    }

[Image 1]: 
[20190620160654517.gif]: https://img-blog.csdnimg.cn/20190620160654517.gif