layui 使用心得

最近用了下layui做后台管理，就想着吧最近的代码整理下，一下是使用中的案例

通过form 提交表单进行ajax 处理

---

---

---

//千万记得引入jquery
js code
layui.extend({
admin: ‘{/}./static/js/admin’
});
layui.use([‘form’,’admin’], function(){
var form = layui.form,admin = layui.admin;
form.on(‘submit(login)’, function(userdata){
$.ajax({
url: uriconfig.userlogin,
data: userdata.field,
type: “GET”,
dataType: “json”,
success: function (returndata) {
location.href=’./index.html’
}
});
return false;
});
});

table 查询和数据处理

审批

js
var table;
function loadTable()
{
layui.use([‘table’], function(){
table = layui.table;
var whereconfig = {
“username”:$(“#username”).val(), “status”:$(“#status”).val()
}
table.render({
elem: ‘#test’,
url: uriconfig.userAllInfo,
mathed:”POST”,
where:whereconfig,
cols: [[
{field:’id’, width:80, title: ‘ID’, },
{field:’userName’, width:100, title: ‘会员名称’},
{field:’identityCard’, width:100, title: ‘身份证’},
{field:’phone’, width:100, title: ‘手机号’},
{field:’email’, width:80, title: ‘邮箱’},
{field:’address’, width:100, title: ‘地址’},
{field:’status’, width:100, title: ‘状态’},
{fixed:’right’, title:’操作’, width:100, align:’center’, toolbar: ‘#barDemo’} //每行增加按钮
]],
page: true
});
//监听工具条
table.on(‘tool(test)’, function(obj){
var data = obj.data;
if(obj.event === ‘checked’){
//layer.msg(‘ID：’+ data.id + ’ 的查看操作’);
if(data.status == 1)
{
layer.msg(‘已经审批,无需审批!’);
}
else{
var objid = {“id”:data.id};
$.ajax({ url: uriconfig.adminapproval, data: objid, type: “post”, dataType: “json”, success: function (returndata) { layer.msg(‘审批通过’); } }); } } }); }); }$(“#test2”).on(“click”,function()
{
table.reload(); //窗口对象重新加载，增加在button上
});
$(function(){
loadTable();
});