我就废话不多说啦，大家直接看代码就行了！
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">
<title>...</title>
<link rel=\"stylesheet\" href=\"layui/css/layui.css\" rel=\"external nofollow\" >
</head>
<body class=\"layui-layout-body\">
<div class=\"layui-layout layui-layout-admin\">
<div class=\"layui-body\">
<!-- 内容主体区域 -->
<table id=\"demo\" lay-filter=\"test\"></table>
</div>
</div>
<script src=\"layui/layui.js\"></script>
<script>
//JavaScript代码区域
layui.use(\'element\', function(){
var element = layui.element;
//一些事件监听
element.on(\'tab(demo)\', function(data){
console.log(data);
});
});
layui.use(\'table\', function(){
var table = layui.table;
//监听单元格编辑
table.render({
elem: \'#demo\'
,height: 500
,url: \'data.php\' //数据接口
,page: true //开启分页
,cols: [[ //表头
//全选
{type:\'checkbox\'}
//edit: \'text\'为开启单元格编辑，sort:true开启排序
,{field:\'id\', title: \'ID\', width:80, sort: true}
,{field:\'uname\', title: \'用户名\', width:120, sort: true, edit: \'text\'}
,{field:\'age\',title: \'年龄\', width:80, sort: true, edit: \'text\'}
]]
});
table.on(\'edit(test)\', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layui.use(\'jquery\',function(){
var $=layui.$;
$.ajax({
type: \'get\',
url: \"test.php\", // ajax请求路径
data: {
id:data.id,
field:field,
value:value
},
success: function(data){
layer.msg(\'修改成功\');
}
});
});
});
});
</script>
</body>
</html>
以上这篇layui监听单元格编辑前后交互的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容