layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
程序员文章站
2023-11-11 16:22:16
使用layui框架的时候，总会重复的写相关代码，感觉很是苦恼，所以进行分装，只需要关注业务方面即可
如下图，提供新增，编辑，查看等功能
js方法
/*...
使用layui框架的时候，总会重复的写相关代码，感觉很是苦恼，所以进行分装，只需要关注业务方面即可
如下图，提供新增，编辑，查看等功能
js方法
/**
* 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
* @param {} title 标题 不显示为false
* @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
* @param {} path 弹出页面路径
* @param {} sucfunname 执行保存操作后再弹出页面中的保存方法名称
* @param {} callback 执行保存操作之后的其他操作
* @returns {}
*/
function opendetial(title, area, path, sucfunname, callback) {
layer.open({
type: 2,
title: title, //不显示标题栏
closebtn: 2,
area: area,
shade: 0.8,
id: (new date()).valueof(), //设定一个id，防止重复弹出 时间戳1280977330748
btn: ['保存', '取消'],
btnalign: 'r',
movetype: 1, //拖拽模式，0或者1
content: path,
yes: function (index, layero) {
var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
alert("-----");
try {
var _ifr = btn[0].parentnode.parentnode.getelementsbyclassname("layui-layer-content")[0].children[0].contentwindow ||
btn[0].parentnode.parentnode.getelementsbyclassname("layui-layer-content")[0].children[0].children[0].contentwindow;
var func = new function('_ifr', "return _ifr." + sucfunname + "();");
var flg = func(_ifr);
if (flg == false) {
return false;
} else {
if (callback != null) callback();
window.location.reload();
}
} catch (ex) {
}
},
btn2: function (index, layero) {
}
});
}
//
/**
* 初始化表格及表格相关的简单操作 //需要引入 layui.js layui.css文件
* @param {} t table参数形如 {id:'test',indexname:'id',heigt:'full-30',url:'account?gettablejson|&',page:true,cols:[ { field: 'id', title: 'id', width: 80 },]}
* @param {} editor 编辑方法
* @param {} deltes 删除方法
* @param {} read 查看方法
* @returns {}
*/
function createtable(t, editor, deltes, read) {
var bodys = document.getelementsbytagname("body")[0];
bodys.innerhtml += '<table class="layui-hide" id="test" lay-filter="demo"></' + 'table>' +
'<script type="text/html" id="bardemo">' +
' <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</' + 'a>' +
' <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</' + 'a>' +
' <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</' + 'a>' +
'</' + 'script>';
layui.use(['laypage', 'table'], function () {
var laypage = layui.laypage, //分页
table = layui.table; //表格
//执行一个 table 实例
table.render({
elem: '#' + (t.id || 'test'),
id: t.indexname || id,
height: t.heigt || 'full-30',
url: t.url, //数据接口
page: t.page, //开启分页
cols: [
t.cols
]
});
table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data, //获得当前行数据
layevent = obj.event; //获得 lay-event 对应的值
if (layevent === 'detail') {
if (read != null) read(obj);
} else if (layevent === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del(obj); //删除对应行（tr）的dom结构
layer.close(index);
//向服务端发送删除指令
if (deltes != null) deltes(obj);
});
} else if (layevent === 'edit') {
editor(obj);
}
});
});
}
调用页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<link rel="stylesheet" href="../../../publics/others/layui/css/layui.css" rel="external nofollow" media="all">
<script type="text/javascript" src="../../../functionjs.js"></script>
<style>
body {
margin: 10px;
}
.demo-carousel {
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<script src="../../../publics/others/layui/layui.js"></script>
<script src="../../../layuifunction.js"></script>
<script>
var addbutton = '<button class=\"layui-btn layui-btn-xs\" οnclick=\'opendetial(\"新增编辑\", [\"600px\", \"550px\"], \"./editor.html\", \"applicationsave\", null)\'>新增</button>';
var tableobj = { id: 'test', indexname: 'id', heigt: 'full-30', url: 'account?action=gettablejson', page: false,
cols: [ { field: 'id', title: 'id' },
{ field: 'names', title: '名称', width: 180 },
{ field: 'typename', title: '消费类型' },
{ field: 'price', title: '价格' },
{ field: 'isout', title: '账目类型' },
{ field: 'dates', title: '日期' },
{ field: 'remark', title: '备注', width: 180 },
{ fixed: 'right', title: addbutton, width: 180, align: 'center', toolbar: '#bardemo' }
] };
createtable(tableobj, function (obj) {
layer.alert('编辑行：<br>' + json.stringify(obj.data));
opendetial("账单编辑", ['600px', '550px'], "./editor.html", "applicationsave", null);
},
function (obj) {
layer.alert('删除行：<br>' + json.stringify(obj.data));
},
function(obj) {
layer.alert('查看行：<br>' + json.stringify(obj.data));
}
);
</script>
</body>
</html>
以上这篇layui加载表格,绑定新增,编辑删除,查看按钮事件的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： QQ空间粉丝互动VS盈利
下一篇： 90%微商都不知道的两个秘密