layui实现显示数据表格、搜索和修改功能示例

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

<div style="text-align: center" id='btn'>
<div class="layui-inline">
 <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>

<script>
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) : '';
});

});
</script>

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

后台返回数据格式

{
"code": 0,
"msg": "",
"count": 4,
 "data:{}
}

数据表格单元格数据修改

<script>
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);
    }

})
 }
});

});
</script>

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

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

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

来源：https://blog.csdn.net/huangyuxin_/article/details/90714665