复选框

【1】批量新增和删除的时候如何判断是否有至少选中一条数据

$("#add").click(function(){
    //用于批量(获取已选的复选框)
    var test = $("input[name='btSelectItem']:checked");
    var checkBoxValue = ""; 
    test.each(function(){
        checkBoxValue += $(this).val()+",";
    })
    checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);
    
    // todo 验证
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行,当没有选择的记录时,返回一个空数组
    if (rows.length == 0) {
        toastr.error("请至少选择一条供应商");
        return;
    }else{
        var typeid = $("#typeid").val(); 
        $.ajax({
            cache : true,
            type : "POST",
            url : "/base/supSupt/save?typeid="+typeid +"&ids=" + encodeURIComponent(checkBoxValue),
            data : null,
            async : true,
            error : function(request) {
                toastr.error("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    toastr.success("操作成功。");
                    $('#modal-addSup').modal('hide');
                    //refreshsupdetails();
                    window.open();
                } else {
                    toastr.error(data.msg);
                }
            }
        });
    }
})

【2】表单的话选择下面这种

采用bootstrap官方的写法
$("#add").click(function(){
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行,当没有选择的记录时,返回一个空数组
    if (rows.length == 0) {
        toastr.error("请选择要添加的供应商");
        return;
    }else{
        var ids = new Array();
        $.each(rows, function(i, row) {
          ids[i] = row['id'];
        });
        console.log(ids);
        $.ajax({
            type : 'POST',
            data : {
                "ids" : ids
            },
            url : '/base/supSupt/save?typeid='+$("#typeid").val(),
            success : function(r) {
                if (r.code == 0) {
                    toastr.success(r.msg);
                    window.open();
                } else {
                    toastr.error(r.msg);
                }
            }
        });
     }
})

后台代码:
/**
 * 保存
 */
@ResponseBody
@PostMapping("/save")
@RequiresPermissions("base:supSupt:add")
public R save( SupSuptDO supSupt,Model model, @RequestParam("typeid") String typeid, @RequestParam("ids[]") String[] ids){
    //将拿到的ids(就是供应商的id=supid)按逗号进行分割成数组
    int i = 0;
    for (String supid : ids) {
        i++;
        String uuid = UUID.randomUUID().toString().replace("-", "");
        supSupt.setToid(uuid);
        supSupt.setTypeid(typeid);
        supSupt.setSupid(supid);
        if(supSuptService.save(supSupt)>0){
            if(ids.length == i){
                return R.ok();
            }else{
                continue;
            }
        }else{
            return R.error();
        }
    }
    return R.error();
}

【3】复选框的全选和禁止全选

//html:
<th style="width: 40px;">
    <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
        <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /> <span></span>
    </label>
</th>

js脚本:
$(".group-checkable").click(function(event) {
    $(this).toggleClass("checkboxes");
    var isChecked = $('.group-checkable').prop('checked');
    if(isChecked) {
        $('input[name="ids"]').prop("checked", true);
    } else {
        $('input[name="ids"]').prop("checked", false);
    }
});

==tips==:因为这个复选框是要提交的,所以要在表单中添加from表单,然后$(“#表单id”).serialize();自然传输到后台即可拿到对应id数组

【4】注意:

  1. 可以将数组放到FromData中;
  2. 可以将数组放到路由中;
  3. 也可以在dto中声明数组变量,然后页面就是数组名

var bidfiletypeids = new Array(); //定义一数组

bidfiletypeids = checkBoxValue.split(“,”); //字符分割

    原文作者:学问思辨行
    原文地址: https://segmentfault.com/a/1190000018494134
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞