php实现layui表格用户编辑,layui实现显示数据表格、搜索和修改功能示例

本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考，具体如下：

搜索

layui.use("table", function(){

var table = layui.table;

table.render({

elem: "#test"

,url:"/getdata.php"

,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

,page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文档

layout: ["limit", "count", "prev", "page", "next", "skip"] //自定义分页布局

//,curr: 5 //设定初始在第 5 页

,groups: 1 //只显示 1 个连续页码

,first: false //不显示首页

,last: false //不显示尾页

}

,cols: [[

{field:"id", width:80, title: "ID", sort: true}

,{field:"columnname", width:80, title: "字段名"}

,{field:"descriptionCN", width:80, title: "中文描述", sort: true}

,{field:"name", width:80, title: "名称"}

,{field:"description_table", title: "表描述", width: "30%", minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增

,{field:"description", title: "字段类型", sort: true}

,{field:"primaryKey", title: "主键", sort: true}

,{field:"class", width:137, title: "分类", sort: true}

]]

});

var $ = layui.$, active = {

reload: function(){

var demoReload = $("#demoReload");

//执行重载

table.reload("test", {

page: {

curr: 1 //重新从第 1 页开始

}

,where: {

keyword: demoReload.val()

}

});

}

};

$("#btn .layui-btn").on("click", function(){

var type = $(this).data("type");

active[type] ? active[type].call(this) : "";

});

});

引用样式和js，这是必须的。

后台返回数据格式

{

"code": 0,

"msg": "",

"count": 4,

"data:{}

}

数据表格单元格数据修改

layui.use("table", function(){

var table = layui.table;

table.render({

elem: "#test"

,url:"/classdata.php"

,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

,page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文档

layout: ["limit", "count", "prev", "page", "next", "skip"] //自定义分页布局

//,curr: 5 //设定初始在第 5 页

,groups: 1 //只显示 1 个连续页码

,first: false //不显示首页

,last: false //不显示尾页

}

,cols: [[

{field:"id", width:80, title: "ID", sort: true}

,{field:"columnname", width:80, title: "字段名"}

,{field:"descriptionCN", width:80, title: "中文描述", sort: true}

,{field:"name", width:80, title: "名称"}

,{field:"description_table", title: "表描述", minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增

,{field:"description", title: "字段类型"}

,{field:"primaryKey", title: "主键"}

,{field:"class", title: "分类"}

,{field:"checkclass", title: "用户标注","edit":"text"}

,{field:"reason", title: "标注理由","edit":"text"}

]]

});

//监听单元格编辑

table.on("edit(test)", function(obj){

var value = obj.value //得到修改后的值

,data = obj.data //得到所在行所有键值

,field = obj.field; //得到字段

if(value){

$.post("doclass.php",{"id":data.id,"field":field,"value":value},function(data){

console.log(data)

data = $.parseJSON(data);

if(data.status == 1){

layer.msg("修改成功,请等待管理员的审核");

location.href=location.href;

}else{

layer.msg(data.msg);

}

})

}

});

});

在表格初始化的时候加上 "edit":"text" 就可以编辑

然后再添加一个监听的单元格事件

希望本文所述对大家基于layui框架的程序设计有所帮助。

原文链接：https://blog.csdn.net/huangyuxin_/article/details/90714665