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

场景

效果

实现

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代码:

 <table id="example" class="table table-striped table-bordered hover" style="width:100%">
                        <thead>
                        <tr>
                            <th><input type="checkbox" class="checkall" /></th>
                            <th>货位编号</th>
                            <th>货位类型</th>
                            <th>物料类型</th>
                            <th>物料状态</th>
                            <th>所在货架</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
</table>

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;
}







 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值