结合layer插件ajax弹出层
- WBOY原創
- 2016-06-07 11:39:251245瀏覽
layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
IndexController.class.php代码public function index(){<br>
$this->user=M('User')->select();<br>
$this->display(); <br>
}<br>
<br>
//添加栏目<br>
public function add(){<br>
$this->display();<br>
}<br>
//保存栏目数据<br>
public function areate(){<br>
if(M('User')->add($_POST)){<br>
$this -> success('添加成功！','index');<br>
} else {<br>
$this -> error('添加失败！');<br>
}<br>
}<br>
<br>
public function edit(){<br>
$id = $_GET['id'];<br>
$this->user =M('User')->find($id);<br>
$this->display(); <br>
}<br>
public function updates(){<br>
$data['id']=$_POST['id'];<br>
$data['username']=$_POST['username'];<br>
$arr->data=M('User')->save($data);<br>
if($arr>0){<br>
$this -> success('修改成功！','index');<br>
}else{<br>
$this -> error('修改失败！');<br>
}<br>
}index.html代码nbsp;html><br>
<br>
<br>
<meta>
<br>
<title>Document</title>
<br>
<!-- 引入 jquery 和 layer 插件 --><br>
<script></script><br>
<script></script><br>
<br>
<br>
<a>添加</a><br>
<table>
<br>
<volist><br>
<br>
<tr>
<br>
<td>{$vo.username}</td>
<br>
<td><a>$vo['id']))}">修 改</a></td>
<br>
</tr>
<br>
<br>
</volist><br>
</table> <br>
<br>
<br>
add.html代码nbsp;html><br>
<br>
<br>
<meta>
<br>
<title>Document</title>
<br>
<!-- 引入 jquery 和 layer 插件 --><br>
<script></script><br>
<script></script><br>
<style><br />
.btn{<br />
width: 120px;<br />
height: 40px;<br />
background: #000;<br />
color: #fff;<br />
display: block;<br />
text-align: center;<br />
line-height: 40px;<br />
}<br />
</style>
<br>
<br>
<br>
<form>
<br>
<div>
<br>
<label>用户名</label><br>
<div>
<br>
<input><br>
</div>
<br>
</div>
<br>
<div>
<br>
<div>
<br>
<a>提 交</a><br>
</div>
<br>
</div>
<br>
</form>
<br>
<br>
<script><br />
// ajax 提交表单<br />
$(document).ready(function(){<br />
$("#submit").click(function(){ // 提交按钮触发事件<br />
var tourl = $("#form").attr("action"); // 获取 表单的 提交地址<br />
// 序列化 表单数据 后提交 ，太简洁了<br />
$.post(tourl,$("form").serialize(),function(data){<br />
//直接返回首页<br />
/*layer.msg(data['info'],5,data['status'],function(){<br />
location.href = "{:U('Index/index')}"; //自动关闭后返回首页<br />
});*/<br />
//确定返回首页还是再次添加<br />
$.layer({<br />
shade: [0.5, '#000'], //弹出层背景颜色<br />
dialog: {<br />
msg: data['info'], //读取后台返回信息<br />
btns: 2, //设置两个按钮 <br />
type: data['status'], //通过返回的代码设置图标 1或0<br />
btn: ['返回首页','再次添加'],<br />
yes: function(){<br />
location.href = "{:U('Index/index')}"; //关闭后返回首页<br />
}, no: function(){<br />
location.reload(); //关闭后刷新页面<br />
}<br />
}<br />
}); <br />
});<br />
});<br />
});<br />
</script><br>
<br>
layer-v1.8.5.zip
( 67.01 KB 下载：179 次 )
AD：真正免费，域名+虚机+企业邮箱=0元