onesea

Layui中的table

首先抄送一下官网的话
在这里插入图片描述
我们先来看一下案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Layui中的表格</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
  </head>
  <body>
    <!--  -->
    <table id="test" lay-filter="test"></table>
  </body>
</html>
<script>
  layui.use(\'table\', function () {
    var table = layui.table

    // 第一个实例
    table.render({
      elem: \'#test\', // 指定table模板  也就是上方的table DOM
      height: 400, // 指定Table模板的高度
      url: \'/config/user.json\', // 对应的数据接口,这边直接是请求的json文件
      page: true, // 开启分页 
      cols: [
        [
          //表头》》》指定的对应字段
          { field: \'id\', title: \'ID\', sort: true, fixed: \'left\' },
          { field: \'username\', title: \'用户名\' },
          { field: \'sex\', title: \'性别\', sort: true },
          { field: \'city\', title: \'城市\' },
          { field: \'sign\', title: \'签名\' },
          { field: \'experience\', title: \'积分\', sort: true },
          { field: \'score\', title: \'评分\', sort: true },
          { field: \'classify\', title: \'职业\' },
          { field: \'wealth\', title: \'财富\', sort: true },
        ],
      ],
    })
  

分类:

技术点:

相关文章: