layui 模板的增删改查

发布时间:2018年10月25日 阅读:722 次

$(function (){
// init();
tableInil();
})

function tableInil() {
layui.use('table', function(){
var table = layui.table;

table.render({
elem: '#person_table_user'
,url: 'mer/merListJson'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'name', title: '姓名', width:200}
,{field:'phone', title: '电话', width:200}
,{field:'sex', title: '性别', width:200, sort: true,templet:'#sexTpl'}
,{field:'createdate', title: '创建日期', width:200}
,{field:'note', title: '备注', sort: true, width:200}
,{fixed: 'right', width:160, align:'center', toolbar: '#barPerson'}
]]
,page: true
,height: 500
,request: {
pageName: 'currentPage' //页码的参数名称,默认:page
,limitName: 'totalResult' //每页数据量的参数名,默认:limit
}
});
});
}


//初始化
function init(){
layui.use('table', function(){
var table = layui.table;
//方法级渲染
table.render({
elem: '#person_table_user'
,url: 'mer/merListJson'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'name', title: '姓名', width:200}
,{field:'phone', title: '电话', width:200}
,{field:'sex', title: '性别', width:200, sort: true,templet:'#sexTpl'}
,{field:'createdate', title: '创建日期', width:200}
,{field:'note', title: '备注', sort: true, width:200}
,{fixed: 'right', width:160, align:'center', toolbar: '#barPerson'}
]]
,id: 'testReload'
,page: true
,height: 500
,limit : 10
,request: {
pageName: 'currentPage' //页码的参数名称,默认:page
,limitName: 'totalResult' //每页数据量的参数名,默认:limit
}
});

table.on('tool(person)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
merInfo(data.id);
} else if(obj.event === 'del'){
merDel(data.id);
} else if(obj.event === 'edit'){
// layer.alert('编辑行:<br/>'+ JSON.stringify(data))
merEdit(data.id);
}
});

});

}


//搜索
function search(){
layui.use('table', function(){
var table = layui.table;
table.reload('testReload', {
url: '/mer/merListJson'
,where: {
name : $("#demoReload").val(),
phone : $("#phone").val()
} //设定异步数据接口的额外参数
,height: 300
});
})
}


//弹出窗口
function merAdd(){
layer.open({
title: '人员添加',
type: 2,
area: ['900px', '600px'],
shade: 0,
maxmin: true,
content: '/mer/add'
,btn: ['确定', '取消'] //只是为了演示
,yes: function(index,layero){
var ibody = layer.getChildFrame('body', index);//获取iframe页面body
var form = ibody.find('#personForm');
var postData = form.serializeObject();
$.ajax({
type : 'post',
data : postData,
url : '<%=basePath%>/mer/save',
dataType : 'json',
success :function (data){
if(data.success){
layer.msg(data.msg);
layer.close(index);
init();
}
}
});
},end: function () {
// window.location.reload();
}

});
}


function merEdit(id){
layer.open({
title: '人员修改',
type: 2,
area: ['1000px', '500px'],
shade: 0,
maxmin: true,
content: '/mer/edit?id='+id
,btn: ['确定', '取消'] //只是为了演示
,yes: function(index,layero){
var ibody = layer.getChildFrame('body', index);//获取iframe页面body
var form = ibody.find('#merEditForm');
var postData = form.serializeObject();
$.ajax({
type : 'post',
data : postData,
url : '<%=basePath%>/mer/update',
dataType : 'json',
success :function (data){
if(data.success){
layer.msg(data.msg);
layer.close(index);
init();
}
}
});
},end: function () {
// window.location.reload();
}

});
}

//删除人员信息
function merDel(id){
layer.confirm('确定要删除吗?', {
btn: ['确定','取消'],
yes:function(index,layero){
$.ajax({
type : 'post',
data : {"id":id},
url : '/mer/delete',
dataType : 'json',
success :function (data){
if(data.success){
layer.msg(data.msg);
layer.close(index);
init();
}
}
})
}
});
}


function merInfo(id){
layer.open({
title: '人员查看',
type: 2,
area: ['1100px', '600px'],
shade: 0,
maxmin: true,
content: '/mer/merInfo?id='+id
,btn: ['确定', '取消'] //只是为了演示
,yes: function(index,layero){
layer.close(index);
},end: function () {
// window.location.reload();
}

});


}

function input_clear(){
$("#demoReload").val('');
$("#phone").val('');

}

Tag:
相关文章

发表评论: