layui实现显示数据表格、搜索和修改功能示例
版权申诉
7 浏览量
2020-12-28
17:48:24
上传
评论 1
收藏 44KB PDF 举报
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,
资源评论
