layui框架快速入门_layui框架table

在Web开发中，当需要以表格形式展示大量数据时，layui框架的table模块是一个非常优秀的解决方案。layui框架提供了简洁、易用且功能强大的table组件，它不仅能够快速构建出美观的数据表格，还支持分页、排序、筛选等实用功能。

一、引入layui框架

在项目中正确引入layui框架是使用其table模块的前提。可以通过下载官方提供的layui.js和layui.css文件到本地项目中，然后在HTML文件头部通过<link>标签引入css文件，通过<script>标签引入js文件。也可以直接使用在线CDN的方式引入，例如：
```html

</p>

<h2><h2>二、创建基本表格结构</h2></h2>

<h3>1. 简单表格定义</h3>

<p>下面是一段简单的代码来创建一个基本的表格：</p>

<p>```html</p>

<table id="demo"></table>

<p>``<code>
这里的id属性用于标识这个表格，lay-filter`属性用于给表格设置一个过滤器名称，方便后续操作。


```javascript
// 执行实例化
layui.use('table', function(){
  var table = layui.table;

// 渲染表格
  table.render({
    elem: '#demo' //绑定表格元素
    ,height: 312 //设置高度
    ,url:'/data/json' //获取数据的接口地址
    ,cols: [[ //表头
      {field:'id', title:'ID', width:80, sort: true}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'sex', title:'性别', width:80, sort: true}
      ,{field:'city', title:'城市', width:100}
      ,{field:'sign', title:'签名', width:200}
      ,{field:'experience', title:'积分', width:100, sort: true}
      ,{field:'score', title:'评分', width:100}
      ,{field:'classify', title:'职业', width:100}
      ,{field:'wealth', title:'财富', width:135, sort: true}
    ]]
    ,page: true //开启分页
  });
});

这段代码实现了从指定的url获取数据，并按照设定的表头字段渲染成表格，同时开启了分页功能。

2. 使用本地数据

如果不想从接口获取数据，而是使用本地数据源，可以这样做：

javascript
var data = [
  {
    "id": 1,
    "username": "张三",
    "sex": "男",
    "city": "北京",
    "sign": "前端工程师",
    "experience": 100,
    "score": 90,
    "classify": "程序员",
    "wealth": 1000
  },
  {
    "id": 2,
    "username": "李四",
    "sex": "女",
    "city": "上海",
    "sign": "设计师",
    "experience": 200,
    "score": 80,
    "classify": "设计师",
    "wealth": 2000
  }
];</p>

<p>layui.use('table', function(){
  var table = layui.table;</p>

<p>table.render({
    elem: '#demo'
    ,data: data //本地数据源
    ,cols: [[
      {field:'id', title:'ID', width:80, sort: true}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'sex', title:'性别', width:80, sort: true}
      ,{field:'city', title:'城市', width:100}
      ,{field:'sign', title:'签名', width:200}
      ,{field:'experience', title:'积分', width:100, sort: true}
      ,{field:'score', title:'评分', width:100}
      ,{field:'classify', title:'职业', width:100}
      ,{field:'wealth', title:'财富', width:135, sort: true}
    ]]
    ,page: true
  });
});

三、实现表格事件交互

有时候我们希望对表格中的某些行或者列进行交互操作，比如点击某一行获取该行的数据，这就需要用到监听事件。
javascript
table.on('row(test)', function(obj){
console.log(obj.data); //获得当前行数据
console.log(obj.tr); //获得当前行 tr 的DOM对象
});

上述代码表示监听具有test过滤器名称的表格的行点击事件，当用户点击某一行时会在控制台打印出该行的数据以及对应的tr元素。

以上就是layui框架table模块的一些基本用法，通过这些内容可以快速构建出满足需求的数据表格。layui的table还有很多高级功能等待大家去探索，如自定义工具栏、复选框、单元格编辑等。