layui 常用table格式展示 附带基础 添加修改删除功能的格式 javascript
layui 目前流行的前台框架 本实例开发效果如图
1 引入框架编译结构
引入layui通用窗体脚本
/thirdpart/laydate/laydate.js"
/thirdpart/layui-v2.4.3/layui/css/layui.css
thirdpart/layui-v2.4.3/layui/layui.js"
2 table初始化框架 查询功能保留FORM的验证流程
3 初始化 工具栏: 2大类 ：1）左上角工具栏 ； 2）行级工具栏
3 渲染table效果
layui.use(['table','layer','element'], function(){
$ = layui.$ //得到$ 及内部jQuery的引用
,table = layui.table
,layer = layui.layer
,element = layui.element
,form = layui.form //表单
;table.render({ //渲染列表table
elem: '#listtable' //指定元素ID
,url: '<%=basepath>/user/userPageLists.do'
,method: "post" //方法指定为POST
,title: '用户表'
,toolbar: '#toptoolbar'
,totalRow: true //开启合计行
,cols: [[ //表头
{checkbox: true, type: 'checkbox', fixed: 'left'}
,{field:'id', title: 'ID', sort: true, fixed: true}
,{field:'userName', title: '用户名'}
,{field:'remark', title: '备注信息'}
//这里我们可以使用标签控制 工具栏的显隐
,{fixed: 'right', align:'center', toolbar: '#gongjulan'}
]],
id:'testRelaod'
,page: true //开启分页
,where:{userName:''}
});
var $ = layui.$, active = {
reload: function(){
var userName = $('#userName');
//执行重载
table.reload('testRelaod', {
where: {//传递参数
userName:userName.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
},
reset: function(){
var userName = $('#userName');
//执行重载
table.reload('testRelaod', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
userName: ''
}
});
}
};
//监听提交 监听搜索按钮的点击时间 提交表单 触发table刷新
form.on('submit(searchbtn)', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
return false;
});
//重置按钮函数
$('#searchReset').on('click',function(){
$('#userName').val('')
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
})
//头工具栏事件
table.on('toolbar(appendTools)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
layer.open({
id:"addForm", //这个比较重要 因为后面需要使用
title:"添加用户信息",
type: 2,
btn:["添加用户"], //初始化 第一个按钮 及 yes按钮上的文字
area: ['700px', '600px'], //初始化大小
//maxmin: true, //是否可以调整大小
content: '<%=basepath>/user/adds',
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
},
yes: function(index, layero){
//在当前页面获取弹窗内的 searchbt1 按钮，并触发 单击事件， 注意：此窗体关闭权 已经转交给了 弹窗layer控制，此函数内部
//不会触发关闭函数
var frameId=document.getElementById('addForm').getElementsByTagName("iframe")[0].id;
var frameForm = $('#'+frameId)[0].contentWindow.document.getElementById('searchbtn1');
frameForm.click();
},
end: function(){//layer关闭的时候 会触发此方法
table.reload('testRelaod');
}
});
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
layer.confirm('真的删除行么', function(index){
//var data = obj.data ;
for(var i=0;i<data.length;i++){
$.ajax({
url : "<%=basepath>/user/deletes.do?id="+data[i].id, //data[i] 获取当前行数据，具体属性 看对象的属性
type : "GET",
dataType : "json",
success : function(result){
obj.del(); //删除对应行（tr）的DOM结构
}
});
}
table.reload('testRelaod');
layer.msg("删除成功");
layer.close(index);
})
}
break;
};
});
//行级工具栏 操作函数 , obj 直接是本行的数据
table.on('tool(appendTools)', function(obj){
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
layer.open({
id:"viewForm",
title:"查看用户信息",
type: 2,
area: ['400px', '400px'],
content: '<%=basepath>/user/views.do?id='+data.id,
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
}
});
} else if(layEvent === 'del'){
layer.confirm('真的删除行么', function(index){
var data = obj.data ;
$.ajax({
url : "<%=basepath>/user/deletes.do?id="+data.id,
type : "GET",
dataType : "json",
success : function(result){
table.reload('testRelaod');
}
});
layer.msg("删除成功");
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index); //删除结束后，自动关闭本弹出层
});
} else if(layEvent === 'edit'){
layer.open({
id:"updateForm", //编辑ID
title:"编辑用户信息",
btn:["提交修改"],
type: 2, //嵌入网页模式
area: ['400px', '400px'],
content: '<%=basepath>/user/updates?id='+data.id,
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
},
yes: function(index, layero){
//这里未进行优化， 关闭窗体采用 自动触发
var frameId=document.getElementById('updateForm').getElementsByTagName("iframe")[0].id;
$('#'+frameId)[0].contentWindow.mySubmit(); //调用子界面的某个方法， 方法内部 触发表单提交
layer.msg("修改成功");
layer.close(index); //如果设定了yes回调，需进行手工关闭
},
end: function(){
table.reload('testRelaod');
}
});
}
});
});
添加弹窗模块：
1）初始化弹窗内界面效果， 前提（引入layui效果）
2）渲染弹窗页面效果
layui.use([ 'form', 'layer' ], function() {
var form = layui.form
,layer = layui.layer
var index = parent.layer.getFrameIndex('addForm'); //重点： 获取主界面内 弹窗layer的index值
form.on('submit(searchbtn1)', function(data) {
var data = $("#addForm3").serialize(); //读取弹窗内form表单的数据
$.ajax({ //这里使用异步提交
url : "<%=basepath>/user/adds.do",
type : "POST",
dataType : "json",
data : data,
success : function(result){
var rs = result.status;
if(rs == 1){ //根据服务器返回结果 关闭弹框
parent.layer.close(index);
parent.layer.msg("添加用户成功");
}else{
layer.msg("添加用户出现错误");
}
}
});
return false;
});
});
如有疑问 请留言 欢迎提供建议
评论已有 0 条