复选框

19次阅读

共计 2475 个字符,预计需要花费 7 分钟才能阅读完成。

【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】注意:

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

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

正文完
 0