layui编辑table数据
在Layui框架中,要编辑表格(table)的数据,可以使用Layui的内置组件。以下是一个简单的示例,展示如何使用Layui的table组件进行数据编辑。使用JavaScript初始化Layui的table组件,并开启编辑功能。首先,确保你已经引入了Layui的CSS和JavaScript文件。然后,在HTML中创建一个用于展示表格的容器。在你的HTML中定义工具栏和操作按钮的模板。
·
在Layui框架中,要编辑表格(table)的数据,可以使用Layui的内置组件table.edit
。以下是一个简单的示例,展示如何使用Layui的table组件进行数据编辑。
首先,确保你已经引入了Layui的CSS和JavaScript文件。
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>
然后,在HTML中创建一个用于展示表格的容器。
<table id="demo" lay-filter="test"></table>
使用JavaScript初始化Layui的table组件,并开启编辑功能。
layui.use(['table', 'form'], function(){
var table = layui.table;
var form = layui.form;
table.render({
elem: '#demo'
,url:'/path/to/your/data' // 数据接口
,toolbar: '#toolbarDemo' // 开启工具栏,工具栏位置 '#toolbarDemo'
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, sort: true, fixed: 'left'}
,{field:'username', title:'用户名', edit: 'text', width:150}
,{field:'sex', title:'性别', edit: 'text', width:80}
,{field:'city', title:'城市', edit: 'text', width:100}
,{field:'sign', title:'签名', edit: 'text', minWidth: 150}
,{field:'score', title:'得分', edit: 'text', sort: true, width: 80}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
,done: function(res, page, count){
// 在这里执行表格数据渲染后的相关操作,比如为数据行绑定事件等
}
});
// 监听工具栏
table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 设定的 lay-filter="*"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'del'){
// 执行删除操作
}
});
// 监听单元格编辑
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有数据
,field = obj.field; //得到字段名
// 执行更新操作
});
});
在你的HTML中定义工具栏和操作按钮的模板。
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中长度</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
实际应用:
<table id="table" lay-filter="table" class="layui-table"></table>
<script>
//初始化
$(function () {
PageList();
});
//查询
function PageList() {
var OptionGroup = $("#txtOptionGroup").val();
var OptionName = $("#txtOptionName").val();
layui.use(['table'], function () {
var table = layui.table;
table.render({
elem: '#table'//对应着Table的ID
, method: 'POST'
, url: '/PM/GetOptionListPage'//URL为数据接口的地址
, where: { //where就是ajax的data,但不包括分页条件
"OptionGroup": OptionGroup,
"OptionName": OptionName,
}
, request: { //分页条件: page limit
pageName: 'page', //页码的参数名称,默认:page 或者 index、pageIndex
limitName: 'size' //每页数据量的参数名,默认:limit 或者 size、pageSize
}
, parseData: function (res) {
return {
"code": 0,//数据类型,必须的
"count": res.total,//总记录数,用于分页
"data": res.data,//必须的
}
}
, cols: [[
{ field: 'OptionID', title: '配置项目ID', sort: true }
, { field: 'OptionGroup', title: '选项分组', sort: true, edit: 'text' }
, { field: 'OptionName', title: '选项名称', edit: 'text' }
, { field: 'OptionValue', title: '选项的值', edit: 'text' }
, { field: 'Remark', title: '备注', edit: 'text' }
, { title: '操作', toolbar: '#barDemo' }
]],
page: true,//开启分页功能
limit: 25,//当前每页条数
limits: [25, 50, 100],//每页条数集合
editMode: "single",//可编辑模式,支持:single单行、row整行、cell单元格
});
});
}
//编辑表格
layui.use('table', function () {
var table = layui.table;
table.on('edit(table)', function (obj) {
var data = obj.data //得到所在行所有数据
console.log("data", data);
// 执行更新操作
var obj = {
"OptionID": data.OptionID,//主键
"OptionGroup": data.OptionGroup,
"OptionName": data.OptionName,
"OptionValue": data.OptionValue,
"Sort": data.Sort,
"Remark": data.Remark,
};
console.log('edit(table)', obj);
if (data.OptionID) {
if ($.trim(data.OptionGroup) == "") {
layer.alert("请填写[选项分组]!"); PageList();
return;
}
if ($.trim(data.OptionName) == "") {
layer.alert("请填写[选项名称]!"); PageList();
return;
}
if ($.trim(data.OptionValue) == "") {
layer.alert("请填写[选项的值]!"); PageList();
return;
}
if ($.trim(data.Sort) == "") {
layer.alert("请填写[选项排序]!"); PageList();
return;
}
layer.confirm("确定保存:" + $("#OptionName").val() + "?", function () {
$.ajax({
type: "POST",
url: "/PM/EditOption",
data: {
"model": obj,
},
success: function (result) {
if (result.success) {
layer.msg('保存成功!', {
icon: 1,
time: 1000 //1秒关闭(如果不配置,默认是3秒)
}, function () {
PageList();
layer.closeAll();
});
}
else {
layer.msg('保存失败!');
}
}
});// $.ajax({
});//layer.confirm(
}//if (data.OptionID) {
});
});
</script>

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)