layui搜索php,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框架的程序设计有所帮助。

希望与广大网友互动？？

点此进行留言吧！