layui数据表格

最新推荐文章于 2024-09-13 15:08:29 发布

wunianisme

最新推荐文章于 2024-09-13 15:08:29 发布

阅读量342

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29645505/article/details/90219280

版权

layui数据表格提供了快速使用的方法，包括三种初始化渲染方式：方法渲染、自动渲染和转换静态表格。方法渲染允许在JS中设定基础参数，推荐用于项目的频繁改动。自动渲染则依赖于HTML中的lay-data配置。此外，还可以通过lay-data转换已有静态表格，添加动态功能。

摘要由CSDN通过智能技术生成

快速使用

创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: