templet:自定义模板有一种与html结合使用的方式，维护起来更清晰
功能管理-新建
①添加两（个）新建按钮
a)一个加到表格上，表示新增根菜单，触发事件事不需要传递任何参数
b)一个加到表格行中，需要配合templet，触发事件时传递当前行的fid和fname，也是即将新建的子菜单、子按钮所属的pid和pname
<%--操作处理后显示的按钮（新建、删除、修改--%><script type="text/html" id="rowBtns">{{# if(d.ftype == 1){ }}<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="toAdd('{{d.fid}}','{{d.fname}}')"><i class="layui-icon"></i>新建</button>{{# }else{ }}<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i>新建</button>{{# } }}<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"><i class="layui-icon"></i>删除</button><button type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon"></i>修改</button></script>
function toAdd(pid,pname){}
②使用layui-layer（弹出层组件），实现在本窗口新建
function toAdd(pid,pname) {
layui.use(['layer'],function () {
var layer=layui.layer;
layer.open({
type:1,//打开一个页面层，可以展示一些html效果
area:[400,400],
title:'新建功能'
})
})
}
③在网页中设计一个新建功能的表单模板，将其引用到上述弹出层中
引入时必须使用jQuery，layui自带jQuery。
//弹出一个新建功能的窗口
function toAdd(pid,pname) {
layui.use(['layer'],function () {
var layer=layui.layer;
var $=layui.jquery;
//将pid，pname更新到输入框中，建议使用id寻找
var input=document.getElementById('pid');
input.value=pid;//设置input标签的value属性
$('#pname').val(pname);//jQuery写法设置标签value属性
layer.open({
type:1,//打开一个页面层，可以展示一些html效果
area:[400,400],
title:'新建功能',
content:$('#funAddForm')//必须使用jQuery,jQuery根据id找到form模板，将其引入到弹出层
})
})
}
<%--用于解决radio不显示的问题--%>
<script>
layui.use('form', function(){
var form = layui.form;
form.render('radio');
});
</script>
<!-- 弹出层中的表单模板 -->
<form id="funAddForm" class="layui-form" action="funAdd" style="display:none;padding-top:10px;">
<div class="layui-form-item">
<label class="layui-form-label">功能名称</label>
<div class="layui-input-inline">
<input type="text" name="fname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input layui-input-inline">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">功能类别</label>
<div class="layui-input-inline">
<input type="radio" name="ftype" value="1" title="菜单" checked>
<input type="radio" name="ftype" value="2" title="按钮">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">功能链接(URL)</label>
<div class="layui-input-inline">
<input type="text" name="fhref" placeholder="请输入链接" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">功能范围</label>
<div class="layui-input-inline">
<input type="text" name="auth" required lay-verify="required" placeholder="请输入功能范围" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属父级</label>
<div class="layui-input-inline">
<input type="hidden" name="pid" id="pid" value="-1" />
<input type="text" name="pname" id="pname" readonly autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
④提交表单，真实新建
//弹出一个新建功能的窗口
function toAdd(pid,pname) {
layui.use(['layer'],function () {
var layer=layui.layer;
var $=layui.jquery;
//将pid，pname更新到输入框中，建议使用id寻找
var input=document.getElementById('pid');
input.value=pid;//设置input标签的value属性
$('#pname').val(pname);//jQuery写法设置标签value属性
layer.open({
type:1,//打开一个页面层，可以展示一些html效果
area:[400,400],
title:'新建功能',
content:$('#funAddForm')//必须使用jQuery,jQuery根据id找到form模板，将其引入到弹出层
})
})
}
Controller
@RequestMapping("/funAdd")
public String funAdd(Fun fun){
service.save(fun);
return "fun.jsp";
}
dao
@Select("select count(*) from t_fun where fname = #{fname}")
public int fnameAssert(String fname);
@Insert("insert into t_fun values(null,#{fname},#{ftype},#{fhref},#{pid},#{auth},#{yl1},#{yl2})")
public void save(Fun fun);
service
public void save(Fun fun){
int count=dao.fnameAssert(fun.getFname());
if(count>0){
//名字已经存在
throw new FnameException(fun.getFname());
}
dao.save(fun);
}
若有收获，就点个赞吧
0 人点赞
