一: html里放一个框
<div class="layui-form-item" pane>
<label class="layui-form-label">多选方案类型</label>
<div class="layui-input-block">
<input type="checkbox" name="DXType1" lay-filter="like" title="员工" value="员工">
<input type="checkbox" name="DXType1" lay-filter="like" title="配偶" value="配偶">
<input type="checkbox" name="DXType1" lay-filter="like" title="子女" value="子女">
<input type="checkbox" name="DXType1" lay-filter="like" title="父母" value="父母">
<input type="checkbox" name="DXType1" lay-filter="like" title="不限" value="不限">
</div>
</div>
我这里是写死的静态的,如果涉及到动态的,我目前还没想,hhhh
注意:如果你是用model传值也就是 name 的值跟数据库字段相同 的话 这里的name 一点要改名,不然回显会有bug
二:这是提交到后台方法 取到多选值 并用逗号 分隔开
form.on("submit(sub)", function (obj) {
var zxbm = document.getElementsByName("DXType1");
var check_val = [];
for (k in zxbm) {
if (zxbm[k].checked)
check_val.push(zxbm[k].value);
}
var dxtype = check_val.join(",");//这就是多选出来的值
var ta = $("#serviceTables").val();
var user = obj.field;
var PlanDetailImgSrc = UE.getEditor('myEditor').getContent();
var Reamrk = UE.getEditor('myEditor2').getContent();
var explain = UE.getEditor('myEditor3').getContent();
var birthday = $("#birthday").val();
var corp = $("#Dep").val();
var note = $("#Note").val();
//var scorp = $("#Role").val();
var iszfa = @ViewData["zfa"].ToString();
if (corp == "" && iszfa == "1") {
alert('请选择公司');
return;
}
//parent.layer.load(5, { shade: [0.5, "#5588AA"] });
$.ajax({
type: "POST",
data: {
user: user,
//birthday: birthday,
PlanDetailImgSrc: PlanDetailImgSrc,
Reamrk: Reamrk,
imageUrl: imageUrl,
corps: corp,
explain: explain,
note: note,
Dxtype : dxtype //放到这传给后台
//scorp: scorp
},
url: "/Plan/SubUserDetail", //这是后台controller
success: function (result) {
layer.closeAll("loadiing");
if (result.Success) {
layer.msg(result.Message, { icon: 1 });
parent.layer.closeAll();
}
else {
layer.msg(result.Message, { icon: 5 });
}
}
})
})
三:我这里涉及到一个需求,选中 不限 的时候 要把前面的勾选都去掉,我是这么实现的,(可能有点乱)
form.on('checkbox(like)', function (data) { //这里的like 是 html 中 filter 自定义的
console.log(data); //打印当前选择的信息
console.log(data.value);
if (data.value == "不限" && data.elem.checked==true) {
$('input[name="DXType1"]').each(function () {
if ($(this).val() != "不限") {
$(this).attr("disabled", true);
$(this).attr("checked", false);
} else {
$(this).attr("disabled", false);
}
});
} else {
var a = true;
$('input[name="DXType1"]').each(function () {
if ($(this).attr("checked") == true) {
a = false;
}
})
if (a == true) {
$('input[name="DXType1"]').each(function () {
$(this).attr("disabled", false);
})
} else {
$('input[name="DXType1"]').each(function () {
if ($(this).val() == "不限") {
$(this).attr("disabled", true);
}
else {
$(this).attr("disabled", false);
}
});
}
}
layui.form.render("");//重新渲染 固定写法
});
四:回显 最重要的来了,找了一堆 很多很多人都不管回显这个需求,难道都没有修改功能吗?有修改功能 不得回显吗? 可太奇怪了
var PlanInfo = '@Html.Raw(ViewBag.PlanInfo)'; //这里 ,我是在后台controller 里把 model 放到了这个viewBag 里面
var jsonUser = JSON.parse(PlanInfo);
var dtype = jsonUser.DXType.split(","); //将数据以,(逗号)分割形成数组(jsonUser.DXType是从后台获取到的数据(形如:1,2,3))
$("[name=DXType1]:checkbox").prop("checked", false);//这一步也很重要,要先把所有勾选都清空
if (dtype != "") {
for (var i = 0; i < dtype .length; i++) {
$("[name=DXType1][value=" + dtype [i] + "]").prop("checked", true);
}
}
layui.form.render("");
五 后台给前台返回viewBag 方法是这样写的,(给代码就给全)
public ActionResult PlanDetail(int? userGuid)
{
if (userGuid == null)
{
return View();
}
using (ModelsContainer1 context = new ModelsContainer1())
{
XH_PlanInfo PlanInfo = context.XH_PlanInfo.FirstOrDefault(u => u.PlanId == (int)userGuid);
ViewBag.PlanInfo = Newtonsoft.Json.JsonConvert.SerializeObject(PlanInfo);
return View();
}
}
效果图