看到layui相关的帖子都是20年左右的,官方文档有些地方还是有点笼统,这里做一些简单的探索。
后端:PHP
数据库:MySQL
问题:
数据表格(table)方法渲染,案例中采用js文件,网上案例多为Java案例,PHP可读性较好,读取数据库相对简单,但案例缺乏。
思路:
阅读官方文档后发现,数据表格方法渲染中URL属于一种传值方法(get方式)的实现,所以思路为后端输出layui.table
支持的数据格式,然后返回到前端即可。
案例:
简单数据表格,如图所示:
HTML声明头略过,body
部分前端如下:
<table id="demo" class="layui-table" lay-filter="test"></table>
<script>
layui.use('table', function () {
var table = layui.table,
url = 'test_table_data.php';
// render the table component
table.render({
elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
,url: url
,cols: [[ {field: 'id', title: 'ID'},
{field: 'real_name', title: 'Name'},
{field: 'sex', title: 'Sex'},
{field: 'birthday', title: 'Birthday'}
]]//设置表头
,even: true //开启隔行背景
,parseData:function(res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": 0, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.total, //解析数据长度
"data": res //解析数据列表
};
}
});
});
</script>
其中lay-filter
参数此案例中可以取消(用于toolbar
对象定义,其他用途待探索)。
URL参数test_table_data.php
与此前端在同目录下,其余地址对应更改。
parseData
为数据格式解析回调参数,用于规范返回数据的回调,若返回数据不符合layui.table
支持格式会报错(多为回调参数的名称与支持的回调参数名称不同,需要在parseData
中重新定义,官方文档较为详细)。格式相符可不使用。
后端PHP输出json格式数据,为layui.table
支持数据格式。
<?php
include "../connectDB.php";//连接数据库,不再展示
$sql = "select * from testtable1";
$result = mysqli_query($conn,$sql);
$data = array();
//人工定义解析回调
//if($result){
// echo json_encode(array("code"=>0,"msg" => "success"));
//}else{
alert('评价失败','task_rate.php');
// echo json_encode(array("code"=>1,"msg" => "failed"));
//}
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
$json_data = json_encode($data);
echo $json_data;
此案例中读取MySQL数据直接输出打包json数据。
Tips:
也可以把后端代码嵌入前端,将打包好的json文件输出到data参数,可达到相同的渲染效果。
table.render({
elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
,data:<?php echo json_encode($data)?>
// ,url: url1
,id: 'test_table'
,cols: ……