在Layui的table组件中,可以通过设置number
参数来显示行号。以下是一个简单的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Table 行号示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo'
,url:'/demo/table/user/' //这里是接口地址
,cols: [[
{type:'numbers', title: '序号', width: 80} //设置行号列
,{field:'id', title: 'ID', width:80, sort: true}
,{field:'username', title: '用户名', width:80}
//... 其他列定义
]]
//,... 其他设置
});
});
</script>
</body>
</html>
在这个示例中,我们使用了type:'numbers'
来定义一个行号列。这样,在表格渲染后,每一行前面将会自动添加一个序号。