layui table数据表格实例
记录一下出现过的问题:
- script标签是双标签，写成单标签时会出现没有表格出现（就是没能引入layui.js的原因）。
- 当引入了jQuery和layui时确保代码无问题时，还是出现没引入成功的样式建议重新启动idea或者点击右侧的maven，然后再多次点击左上角的刷新。
- layui.use()当只引用了一个时，可以不用加中括号
- 创建table实例时有两种写法：1. var tablerender=（{实例操作}），table.render(tablerender);2.var tablerender=table.render({实例操作})。
- 我这里把搜索框写在了toolbar里面 但是我不建议这样使用，当写在toolbar里面时，你输入了商品类型再点击查询按钮时，toolbar会跟着表格一起更新，导致输入框输入的字段在点击查询后就消失了，且jquery 对按钮的事件会发生改变。
----原来的样子----
$('#query').on('click',function () {
console.log("你点击了查询按钮")
var params={}
params.type=$('#input_type').val();
table.reload('demo',{ //这里要加上id 书写规范要正确 不然会包id的错误
where:params,
page:{
curr: 1
}
})
})
----更改后的样子----
$(document).on('click','#query',function () {
console.log("你点击了查询按钮")
var params={}
params.type=$('#input_type').val();
table.reload('demo',{ //这里要加上id 书写规范要正确 不然会包id的错误
where:params,
page:{
curr: 1
}
})
})
原因是因为toolbar会跟着表格一起更新，导致你点了一次查询按钮过后表格reload(重载)就不能再点击查询按钮了（按钮就失效了）。必须写成更改后的样式。就会多很多步骤，所以建议不要将搜索之类的东西写在toolbar里面(但是我这里还是写了 -_-!)。
6. table的where属性可以携带参数，当返回的数据格式不满足table的数据格式要求时必须加上(parseData为table的一个属性)
parseData:function (res) {
$("#input_type").attr("value",res.type);//因为点击搜索后我的输入框的字段消失了，所以我自己再跟它复制上去
return{
"code":0,
"msg":'success',
"data":res.query,
"count":res.count //出现总条数必须要加(后台代码查询数据库计算出满足条件的总条数，再将总条数合到其他返回数据一起返回到前端)
}
}
- 注意page中的limit，limits属性和table中limit，limits属性的优先级
- 想要修改table表头样式，可以重写css样式或者直接去layui.css中去修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
<script src="js/jquery-3.5.0/jquery-3.5.0.min.js"></script>
</head>
<style>
.layui-table th{ /*修改表头标题栏的样式*/
font-size: 9px;
color: #f3f6f9;
/*background-color: #2D93CA;*/
}
.type_input{
display: flex;
align-items: center;
}
.layui-input-inline{
width: 80px;
padding-left: 3px;
}
.layui-table tbody tr:hover, .layui-table-hover /*解决鼠标放在表格上时的高亮问题*/
{
background-color: transparent;
}
</style>
<body>
<!--想让toolbar不随着更新而更新，分开写就行了 把这个script 删掉 只留下 div部分 可以使用layui table->form元素实现-->
<script type="text/html" id="toolbarDemo">
<div class="type_input">
<div style="text-align: right;width: 60px;font-size: 12px;color: #0C0C0C">商品类型：</div>
<div class="layui-input-inline">
<input type="text" id="input_type" value="" name="input_type" autocomplete="off" class="layui-input" style="color:#85002a; height: 30px;font-size: 13px;">
</div>
<button type="button" class="layui-btn layui-btn-sm" style="margin-left: 10px;" id="query">
<i class="layui-icon layui-icon-search"></i>
</button>
</div>
</script>
<table lay-filter="demo" id="demo" class="layui-hide" ></table>
<script type="text/html" id="barDemo">
<a style="width: 30px;height: 20px;font-size: 10px" class="layui-btn layui-btn-xs layui-btn-xs layui-btn-radius" lay-event="detail">查看</a>
<a style="width: 30px;height: 20px;font-size: 10px" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
<a style="width: 30px;height: 20px;font-size: 10px" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<script src="/js/layui/layui.js"></script>
<script>
layui.config({ //一定要加不然报404错误 找不到tableMerge.JS文件
base: '../js/layui/lay/modules/'
}).extend({
tableMerge:'tableMerge'
})
layui.use(['table','layer','tableMerge'], function(){
var table = layui.table
,layer=layui.layer
,tableMerge=layui.tableMerge
;
var params={
type:'',
}
//第一个实例
var tablerender=({
elem: '#demo' //table的id
,url: 'http://localhost:8088/data3/' //数据接口
,page: {
layout:['count','pre','page','next','limit','skip'],
//支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）
//详见官网文档https://www.layui.com/doc/modules/laypage.html#options
limits:[9,18],
curr:1, //起始页
groups:5, //连续出现的页码个数
limit:9, //一页有多少条数据
} //开启分页
//toolbar开启表格头部工具栏区域 选择自定义的设置时依然能够显示出导出、打印等功能
,toolbar:'#toolbarDemo' //若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数 参数类型String/DOM/Boolean详见官网文档
//,defaultToolbar:[] //设置toolbar的功能 不写defaultToolbar默认三个都有 参数类型Array
,height:'full-12' //设置表格高度 看官方文档介绍 https://www.layui.com/doc/modules/table.html#height
,limits:[10,20,30] //设置多少条一页 优先级小于page中的limits
,limit:10 //每页显示的条数(默认为10) 优先级小于page中的limit
,cols: [[ //表头 //unresize是否禁止拖拽列宽 fixed固定列 edit:'text'将单元格变为可输入框只支持text
//merge:['goodsPrice','ID'] 将id一块儿合并 后面的'ID'为title字段
{field: 'id', title: 'ID',width:60,align:"center",merge:['goodsPrice','ID'],sort:'true',fixed:true,unresize:true,edit:'text',templet:function (res) {
return '<p style="color: #873311;font-size: 10px">'+res.id+'</p>'
}},
{field: 'goodsName', title: '商品名称',align:'center',width:'18%',fixed:true,templet:function (res) {
return '<p style="color: #545354;font-size: 10px">'+res.goodsName+'</p>'
}},
//merge:true 相同字段合并
{field: 'goodsPrice', title: '打折后',align:'center',merge:true,width:100,sort:'true',templet:function (res) {
return '<em style="color: #1e000a;font-size: 12px">'+res.goodsPrice+'</em>'
}},
{field: 'goodsPriceBefore', title: '打折前',align:'center',width:100,sort:'true',templet:function (res) {
return '<em style="color: #1e000a;font-size: 12px">'+res.goodsPriceBefore+'</em>'
}},
{field: 'goodsInfo', title: '信息',align:'center',width:200,templet:function (res) {
return '<b style="color: #1e000a;font-size: 10px">'+res.goodsInfo+'</b>'
}},
{field: 'goodsScore', title: '评分',align:'center',width:80,sort:'true',templet:function (res) {
return '<b style="color: #873311;font-size: 10px">'+res.goodsScore+'</b>'
}},
{field: 'goodsImage', title: '图片路径',align:'center',width:150,templet:function (res) {
return '<b style="color: #009f95;font-size: 8px">'+res.goodsImage+'</b>'
}},
{field: 'goodsPoster', title: '海报路径',align:'center',width:'20%',templet:function (res) {
return '<b style="color: #009f95;font-size: 8px">'+res.goodsPoster+'</b>'
}},
{field: 'goodsType', title: '类别',align:'center',width:100,templet:function (res) {
if(res.goodsType=="shoes"){
return "鞋子";
}
else if(res.goodsType=="clothes"){
return "衣服";
}
}},
//toolbar绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮:https://www.layui.com/doc/modules/table.html#options
{title:'操作',toolbar: '#barDemo',fixed:'right',width:'18%',align:"center"}
]]
,done:function () {
tableMerge.render(this)
}
,where:params
,parseData:function (res) { //当返回数据格式不符合layui table格式时 必须加上这个返回格式
$("#input_type").attr("value",res.type);
console.log(res)
return{
"code":0,
"msg":'success',
"data":res.query,
"count":res.count //出现总条数必须要加
}
}
,loading:false //为false时 点击下一页时不出现加载loading图标
,text: { //当无数据时显示的信息
none: '数据溜走了正在寻找中...' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
,title:"彭山琳的第一个layui表格" //文件导出时出现的文件名
,skin:'none'
});
table.render(tablerender);
$(document).on('click','#query',function () {
console.log("你点击了查询按钮")
var params={}
params.type=$('#input_type').val();
table.reload('demo',{ //这里要加上id 书写规范要正确 不然会包id的错误
where:params,
page:{
curr: 1
}
})
})
//table监听事件
table.on('tool(demo)',function (res) {
//alert与msg的区别 alert类似于实体弹窗 msg类似于遮罩层弹框
if(res.event==='detail'){
layer.alert('查看操作+<br>'+JSON.stringify(res.data))
}
else if(res.event==='edit'){
layer.alert('查看操作+<br>'+JSON.stringify(res.data))
}
else if(res.event==='del'){
layer.msg("你点击了删除")
}
})
});
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
