一、遇到问题及解决
1、触发事件要先定义jq符号,然后在调用on方法,如
var $ = layui.$;
//新增用户
$('.userTable #add').on('click', function(){
});
2、layui怎么打开弹出层的同时,调用后台方法,让弹出层显示后台返回的页面?解决方法如下: 这样就可以:
layer.open({
type: 2
,title:'查看'
,content:'/user/form?id=789a3bf1265e4e00ba0b2cdb57c5f615'
});
3、用layui结合jfinal,用form表单action的方式提交,怎么根据返回值判断是否操作成功? 用form表单action的方式提交,我没找到方法,我改为下面的方式:
//监听提交
form.on('submit(userSubmit)', function(data){
$.post('/user/save',data.field,function(result){
if(result==0){
layer.msg('提交成功!',
function(){
window.parent.location.reload();
});
}else{
layer.msg('提交失败!');
}
});
return false;
});
二、增删改查点击事件及弹出弹出框
< script >
layui.use('table', function ()
{
var table = layui.table;
var $ = layui.$;
//监听工具条
table.on('tool(user)', function (obj)
{
//列表所有属性及数据
var data = obj.data;
//列表事件(查看)
if (obj.event === 'detail')
{
checkUser(data.id);
}
//列表事件(删除)
if (obj.event === 'del')
{
layer.confirm('真的删除行么', function (index)
{
deleteUser(data.id);
layer.close(index);
} );
}
//列表事件(编辑)
if (obj.event === 'edit')
{
editUser(data.id);
}
});
//新增用户
$('.userTable #add').on('click', function ()
{
addUser()
});
});
//查看用户
function checkUser(userId)
{
layer.open(
{
type : 2,
title : '查看',
content : '/user/view?id=' + userId,
area : ['450px', '450px'],
closeBtn : 1
});
}
//删除用户
function deleteUser(userId)
{
$.ajax(
{
type : 'get',
url : "/user/delete?id=" + userId,
success : function (flag)
{
if (flag == 0)
{
layer.msg('删除成功!',
function ()
{
window.parent.location.reload();
});
}
else
{
layer.msg('删除失败!');
}
}
});
}
//新增用户
function addUser()
{
layer.open(
{
type : 2,
title : '新增',
content : '/user/form',
area : ['450px', '450px'],
closeBtn : 1
});
}
//编辑用户
function editUser(userId)
{
layer.open(
{
type : 2,
title : '编辑',
content : '/user/form?id=' + userId,
area : ['450px', '450px'],
closeBtn : 1
});
}
< / script >
2、新增编辑表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
#@form_layout()
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input name="user.id" class="layui-input" type="hidden" value="#(user.id??)" /> <input name="user.user_name" class="layui-input" value="#(user.user_name??)" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input name="user.email" class="layui-input" value="#(user.email??)" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-inline">
<input name="user.telephone" class="layui-input" value="#(user.telephone??)" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input name="user.sex" value="1" title="男" type="radio" checked="checked" /> <input name="user.sex" value="2" title="女" type="radio" checked="checked" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岗位</label>
<div class="layui-input-inline">
<select name="user.post" lay-filter="aihao">
<option value="1" selected="selected">
行政
</option>
<option value="2" selected="selected">
UI
</option>
<option value="3" selected="selected">
测试
</option>
<option value="4" selected="selected">
开发
</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline">
<input name="user.adress" class="layui-input" value="#(user.adress??)" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="userSubmit">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
</html>
< script >
layui.use('form', function ()
{
var form = layui.form;
var $ = layui.$;
//监听提交
form.on('submit(userSubmit)', function (data)
{
$.post('/user/save', data.field, function (result)
{
if (result == 0)
{
layer.msg('提交成功!',
function ()
{
window.parent.location.reload();
});
}
else
{
layer.msg('提交失败!');
}
});
return false;
});
});
< / script >
3、查看表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
#@form_layout()
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label> <label class="layui-form-label">#(user.user_name)</label>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label> <label class="layui-form-label">#(user.email)</label>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label> <label class="layui-form-label">#(user.telephone)</label>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label> #if(user.sex??==1) <label class="layui-form-label">男</label> #end #if(user.sex??==2) <label class="layui-form-label">女</label> #end
</div>
<div class="layui-form-item">
<label class="layui-form-label">岗位</label> #if(user.post??=="1") <label class="layui-form-label">行政</label> #end #if(user.post??=="2") <label class="layui-form-label">UI</label> #end #if(user.post??=="3") <label class="layui-form-label">测试</label> #end #if(user.post??=="4") <label class="layui-form-label">开发</label> #end
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label> <label class="layui-form-label">#(user.adress)</label>
</div>
</form><script type="text/javascript">
//<![CDATA[
layui.use('form', function(){
var form = layui.form;
});
//]]>
</script>
</body>
</html>
4、后台java方法
/**
* 渲染新增,编辑页面
*/
public void form(){
String id = getPara("id");
User user = userService.findUserById(id);
if(StrKit.notBlank(id)){
setAttr("user", user);
}
render("form.html");
}
/**
* 新增,编辑
*/
public void save(){
User user = getModel(User.class);
boolean isSuccess = user.saveOrUpdate();
if(isSuccess) {
renderJson(0);//保存成功
} else {
renderJson(2);//保存失败
}
}
/**
* 查看
*/
public void view(){
String id = getPara("id");
User user = userService.findUserById(id);
setAttr("user", user);
render("view.html");
}
/**
* 根据用户id删除用户
*/
public void delete() {
String id = getPara("id");
boolean flag = userService.deleteById(id);
if(flag) {
renderJson(0);
} else {
renderJson(1);
}
}
三、至此,layui结合jfinal增删改查完毕