複選框

【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(","); //字符分割