Layui Table 行号

在Layui的table组件中,可以通过设置number参数来显示行号。以下是一个简单的示例代码:

html 复制代码
<!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'来定义一个行号列。这样,在表格渲染后,每一行前面将会自动添加一个序号。

相关推荐
前端的日常1 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
Struggler28112 分钟前
Chrome插件开发
前端
前端 贾公子24 分钟前
Monorepo + vite 怎么热更新
前端
coding随想33 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf