layui table 参数设置方法

下面我为你详细讲解“layui table 参数设置方法”的完整攻略。

简介

layui table 是一款基于 layui 前端框架的表格组件，提供了丰富的功能以及灵活的参数设置，支持数据分页、排序、编辑等功能，使得在前端页面上展示数据更加简单、高效。

参数设置方法

layui table 的参数设置可以通过 render 函数的第二个参数进行配置，常用的参数如下：

1. elem：指定当前要渲染的表格元素，可以是 DOM 元素或者选择器字符串。
2. url：接口地址，用于从后台获取数据。
3. data：静态数据，用于展示预设的数据。
4. cols：指定表头和列内容，通过数组设置，每个数组表示一列，数组的元素包含 field（列属性名）和 title（列标题）等属性。
5. page：是否开启分页，默认为 true。
6. limit：每页显示的数据条数。
7. height：表格高度。
8. cellMinWidth：最小单元格宽度。
9. done：表格渲染完成的回调函数。

下面以两个示例说明参数设置方法。

示例一

下面这个示例演示了如何从接口地址中获取数据，并对表格进行基本的参数设置：

layui.use(['table'], function(){
  var table = layui.table;

  // 指定要渲染的表格元素和接口地址
  table.render({
    elem: '#demo', 
    url: '/api/table',

    // 设置表头和列内容
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'sex', title: '性别', templet: '#sexTpl'},
      {field: 'city', title: '城市'},
      {field: 'sign', title: '签名'},
      {field: 'experience', title: '积分'},
      {field: 'score', title: '评分'},
      {field: 'classify', title: '职业'},
      {field: 'wealth', title: '财富', sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]],

    // 开启分页，并设置每页显示的数据条数
    page: true,
    limit: 10,

    // 设置表格高度和最小单元格宽度
    height: 500,
    cellMinWidth: 80,

    // 表格渲染完成的回调函数
    done: function(res, curr, count){
    }
  }); 
});

示例二

下面这个示例演示了如何从静态数据中获取数据，并对表格进行更加复杂的参数设置：

layui.use(['table'], function(){
  var table = layui.table;

  // 指定要渲染的表格元素和静态数据
  table.render({
    elem: '#demo',
    data: [{
      id: '10001',
      username: '张三',
      sex: '男',
      city: '北京',
      sign: '人生就是要做自己喜欢做的事情。',
      experience: '86',
      score: '92',
      classify: '工程师',
      wealth: '63'
    }, {
      id: '10002',
      username: '李四',
      sex: '男',
      city: '上海',
      sign: '天生我才必有用，千金散尽还复来。',
      experience: '12',
      score: '33',
      classify: '公务员',
      wealth: '125'
    }, {
      id: '10003',
      username: '王五',
      sex: '女',
      city: '深圳',
      sign: '不要让你的梦想只是梦想。',
      experience: '16',
      score: '48',
      classify: '老师',
      wealth: '17'
    }, {
      id: '10004',
      username: '赵六',
      sex: '女',
      city: '杭州',
      sign: '一起来跳舞吧！',
      experience: '36',
      score: '99',
      classify: '设计师',
      wealth: '83'
    }, {
      id: '10005',
      username: '田七',
      sex: '男',
      city: '广州',
      sign: '生命在于运动。',
      experience: '48',
      score: '65',
      classify: '作家',
      wealth: '27'
    }, {
      id: '10006',
      username: '周八',
      sex: '男',
      city: '成都',
      sign: '好吃好喝好玩。',
      experience: '21',
      score: '38',
      classify: '学生',
      wealth: '4'
    }],

    // 设置表头和列内容
    cols: [[
      {type: 'checkbox'},
      {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: '签名'},
      {field: 'experience', title: '积分', sort: true},
      {field: 'score', title: '评分', sort: true},
      {field: 'classify', title: '职业', width: 150},
      {field: 'wealth', title: '财富', sort: true}
    ]],

    // 开启分页，并设置每页显示的数据条数
    page: {
      layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'],
      limit: 5,
      groups: 3,
      first: false,
      last: false
    },

    // 设置表格高度和最小单元格宽度
    height: 'full-250',
    cellMinWidth: 80,

    // 表格渲染完成的回调函数
    done: function(res, curr, count){
    }
  });
});

结语

以上就是“layui table 参数设置方法”的完整攻略了。在实际编码过程中，还会根据需求来定制更多的配置参数，所以希望大家可以结合官方文档进行深入学习和实践。