-
二级菜单联动
关于springMVC结合mybatis,thymeleaf,实现二级联动
以下是前端标签写法：
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">所属合同</label>
<div class="layui-input-inline">
<select id="cate1" lay-filter="cate1" name="salesOrder.contract.id" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option th:field="${maintain.salesOrder.contract.id}"
th:value="${contract.id}"
th:each="contract:${contracts}"
th:text="${contract.no}+' '+${contract.name}" class="cate1">layer</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">报修产品</label>
<div class="layui-input-inline">
<select id="cate2" lay-filter="cate2" name="salesOrder.id" lay-verify="required" lay-search="">
</select>
</div>
</div>
</div>
以下是JS和ajax写法，遍历拼装select中的option：
layui.use(['form'], function(){
$ = layui.jquery;
var form = layui.form;
// 二级选择
form.on('select(cate1)', function(data){
var cate1 = $("#cate1").val();
$.ajax({
type: 'GET',
url: "/salesorder/findorderbycontract",
data: {contractId:cate1},
dataType: 'json',
success:function(e){
console.log(e.datas[0]);
$("#cate2").empty();
var html = "<option value=\"\">直接选择或搜索选择</option>";
$(e.datas).each(function (v, k) {
html += "<option value='" + k.id + "'>" + k.product.no +" "+ k.product.name + "</option>";
});
$("#cate2").append(html);
// callback();
form.render('select');// 重新渲染
}
});
});
动态刷新页面获取查询到的二级菜单项
以下是controller中的写法：
// 用于添加维修信息
@GetMapping("/findorderbycontract")
@ResponseBody
public Results<SalesOrder> findorderbycontract(Model model,Integer contractId) {
System.out.println(contractId);
String contractNo = contractRepository.findById(contractId).get().getNo();
List<SalesOrder> salesOrders = salesOrderRepository.findByContract_No(contractNo);
model.addAttribute("salesOrders",salesOrders);
// 返回的格式仍需遵从Layui要求的返回json格式
return Results.success(50,salesOrders);
}
}
其他参考写法：
layui和js实现二级联动（工具不同）
layui 二级联动（最后使用的是这种）
-
JS通过条件判断来控制option的remove和add
-
使用laytpl来控制按钮显示
laytpl与script混写：
<script type="text/html" id="changeByStatus">
{{# if(d.trackStatus.id == 1){ }}
<!-- <a class="layui-btn" lay-event="sampleNotice" id="sampleNotice" href="/contract/detail/?id={{d.id}}">下发打样通知</a>-->
<a class="layui-btn" style="background-color: #5FB878" lay-event="sampleNotice" id="sampleNotice" onclick="xadmin.open('下发打样通知','/samplenotice/add/?id={{d.id}}')">下发打样通知</a>
<!-- <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>-->
{{# } else if(d.trackStatus.id == 2){ }}
<a class="layui-btn layui-btn-normal" lay-event="requireNotice" id="requireNotice" onclick="xadmin.open('下发要货通知','/requirenotice/add/?id={{d.id}}')">下发要货通知</a>
{{# } else if(d.trackStatus.id == 3){ }}
<a class="layui-btn layui-btn-warm" lay-event="sendNotice" id="sendNotice" onclick="xadmin.open('下发发货通知','/sendnotice/add/?id={{d.id}}')">下发发货通知</a>
{{# } else if(d.trackStatus.id == 4){ }}
<a class="layui-btn layui-btn-danger" lay-event="break" id="break" onclick="parent.xadmin.add_tab('违约核查','/breakrecord/list/?no={{d.no}}')">违约核查</a>
{{# } else if(d.trackStatus.id == 5){ }}
<a class="layui-btn layui-bg-cyan" lay-event="finish" id="finish">结案</a>
{{# } }}
</script>
动态table中的写法：
,{field: '', title: '待办', templet: '#changeByStatus'}
,{title:'操作', toolbar: '#barDemo', width:350}
-
Layui获取checkbox复选框值
这个解决了，真的搞了很久。我的解决方法和如下文章差不多：获取选中的checkbox项目id数据，然后拼接成字符串传递给后端。为什么不直接传数组呢？好问题，因为传不了啊，难过。
layui获取checkbox复选框值
//监听提交
form.on('submit(add)', function(data){
// var roles = $("[name=role]:checked").each();
// data.field.role = roles.;
// console.log(data.field.rolenew);
var arr_box = [];
$('input[type=checkbox]:checked').each(function() {
arr_box.push($(this).val());
});
data.field.rolestr = arr_box.join(",");
console.log(data);
$.ajax({
url:"/employee/add",
type:"POST",
data:data.field,
dataType:'json',
// contentType: "application/json",
success:function(result){
if(result.code == 500 || result.code == 5000100 || result.code == 5000101 || result.code == 5000102){
layer.alert(result.msg);
}else{
layer.alert("设置成功", {icon: 6},function () {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
}
}
});
return false;
});
下面再放一个我觉得没用的，就是把name写成"role[]"，我试了，无效。
SpringMVC 接收多个checkbox提交参数的问题
-
Layui回显已选中的checkbox复选框
更新，我解决了！！
这还真是我永远的痛，现在也没解决呢。我现在想象一下，单独写一个ajax来动态获取、拼接HTML，应该可以解决，但现在暂时先不改了。
layui通过调接口动态渲染复选框 回显已选中的
Thymeleaf+layui+jquery复选框回显
<input type="hidden" id="oldrolestr" name="oldroles" th:value="${oldrolestr}">
<div class="layui-form-item">
<label class="layui-form-label"><span class="x-red">*</span>角色</label>
<div class="layui-input-block" id="role">
</div>
</div>
// 这里面的function其实就是回调函数，其实可以直接写在getRole最后，但这样更灵活，天才啊
getRole(function(){
layui.form.render('checkbox')
});
// 获取角色
function getRole(callback) {
var roleHtml = '';
var roleIdstr = $("#oldrolestr").val();
$.ajax({
url: "/role/all",
type: 'GET',
data: {
page: 1,
pageSize: 500,
},
dataType: 'json',
success: function (res) {
console.log(res);
var roleList = res.datas;
console.log(roleList);
console.log(roleIdstr);
//把字符串以逗号分割为数组
var roleIdlist= [];
roleIdlist = roleIdstr.split(",");
console.log(roleIdlist);
//遍历所有的拿到的复选框数据
for (i = 0; i < roleList.length; i++) {
var istrue = false;
for (y = 0; y < roleIdlist.length; y++) {
//双层for循环来匹配我们所要选中的那一项
if (roleIdlist[y] == roleList[i].id) {
istrue = true
}
// console.log(i)
}
// roleHtml += ' <input type="checkbox" checked="' + istrue + '" name="role_id" title="' + roleList[i].name + '" value="' + roleList[i].id + '">'
if (istrue) {
//如果有就渲染选中的模板
roleHtml += ' <input type="checkbox" class="checkbox-child" lay-skin="primary" checked name="role" title="' + roleList[i].name + '" value="' + roleList[i].id + '">'
} else {
//如果没有就渲染没有选中的模板
roleHtml += ' <input type="checkbox" class="checkbox-child" lay-skin="primary" name="role" title="' + roleList[i].name + '" value="' + roleList[i].id + '">'
}
}
//初始化数据
// form.find('#role').html(roleHtml);
$("#role").append(roleHtml);
callback();
},
error: function (e) {
layer.msg('连接超时，请稍后再试');
}
});
}
网友评论