layui 使用心得

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

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

<form method=“GET” class=“layui-form” >
<input name=“username” placeholder=“账号” type=“text” lay-verify=“required” class=“layui-input” >
<hr class=“hr15”>
<input name=“password” lay-verify=“required” placeholder=“口令” type=“password” class=“layui-input”>
<hr class=“hr15”>
<input class=“loginin” value=“登录” lay-submit lay-filter=“login” style=“width:100%;” type=“submit”>
<hr class=“hr20” >
</form>
<script type=“text/javascript” src="./lib/layui/layui.js" charset=“utf-8”>
<script type=“text/javascript” src="./lib/jquery-1.8.2.min.js" charset=“utf-8”> //千万记得引入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 查询和数据处理

<table class=“layui-hide” id=“test” lay-filter=“test”>
<script type=“text/html” id=“barDemo”>
<a class=“layui-btn layui-btn-primary layui-btn-xs” lay-event=“checked”>审批
</script>
js
var table;
function loadTable()
{
layui.use([‘table’], function(){
table = layui.table;
var whereconfig = {
“username”:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲username").val(…("#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();
});