复选框

陈江龙发布于2019-08-02 14:29 / 750人阅读

摘要：批量新增和删除的时候如何判断是否有至少选中一条数据用于批量获取已选的复选框验证返回所有选择的行，当没有选择的记录时，返回一个空数组请至少选择一条供应商操作成功。

【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：

    
         
    


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】注意：

可以将数组放到FromData中；

可以将数组放到路由中；

也可以在dto中声明数组变量，然后页面就是数组名

var bidfiletypeids = new Array(); //定义一数组
bidfiletypeids = checkBoxValue.split(","); //字符分割

云服务器 GPU云服务器复选框选中复选框点击复选框复选框按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53834.html

CSS3结合fontawesome字体实现自定义单选框复选框效果

摘要：经常能看到别人做前端的时候，实现一些漂亮的复选框或单选框按钮，由于现在项目原因，很多单选框和复选框看起来很不好看，于是，心血来潮打算自己实现了一遍。经常能看到别人做前端的时候，实现一些漂亮的复选框或单选框按钮，由于现在项目原因，很多单选框和复选框看起来很不好看，于是，心血来潮打算自己实现了一遍。一、首先上css代码：其中，说明我以注释的形式写到里面；关于z-index我是基于...

hover_lew 2019-08-20 12:35 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

caikeal 2019-08-29 10:59 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

Jacendfeng 2019-08-01 15:29 评论0 收藏0
Java窗口（JFrame）从零开始（6）——单选按钮+复选框

单选按钮+复选框单选按钮、复选框是什么这个都知道，不做解释。上代码（自己写着玩的，排班不太好）package jframe;import java.awt.BorderLayout;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event.ActionEvent;import java.awt.event...

youkede 2019-08-16 10:33 评论0 收藏0
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

摘要：建立索引，记录每一个节点值。选项卡模拟选项卡方法一大清洗，在设置颜色之前把所有的颜色值设为空。宋体选项卡一选项卡二选项卡三内容一内容二内容三方法二点击什么，清除什么。 1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2...

tanglijun 2019-08-22 17:14 评论0 收藏0
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

摘要：建立索引，记录每一个节点值。选项卡模拟选项卡方法一大清洗，在设置颜色之前把所有的颜色值设为空。宋体选项卡一选项卡二选项卡三内容一内容二内容三方法二点击什么，清除什么。 1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2...

hot_pot_Leo 2019-08-29 15:23 评论0 收藏0