通过layui给数据表格添加序号-猿码集

通过layui给数据表格添加序号

layui是一款适用于web开发的前端框架，它提供了丰富的UI组件和交互接口，能够大大提高开发效率。数据表格是我们在开发中常用的组件之一，而数据表格中的序号列也是非常重要的一列。本文将介绍通过layui给数据表格添加序号列的方法。

引入layui

首先我们需要在html页面中引入layui的相关文件。可以通过layui官网的下载页面或者下面的链接下载layui相关文件。

下载链接：


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>加表格</title>
  
  //引入layui的CSS文件
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
  //引入jQuery文件
  <script src="jquery.min.js"></script>
  
  //引入layui的JavaScript文件
  <script src="layui/layui.all.js"></script>
   
</body>
</html>

创建数据表格

在html页面中创建数据表格并引入layui相关组件。

示例代码：


<table lay-filter="demo" id="demo" class="layui-hide"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
  </div>
</script>
//引入layui的JavaScript代码
<script>
  layui.use(['table', 'form'], function(){
    var table = layui.table
    ,form = layui.form;
    ...
  });
</script>

以上代码中，我们创建了一个id为demo的数据表格，并添加了一个工具栏，用于添加和删除数据。同时，我们还引入了layui的JavaScript代码，用于初始化数据表格。

添加序号列

为数据表格添加序号列需要重写其渲染函数，并在其中加入序号列的代码。在layui中，我们可以使用templet属性来设置表格列的渲染函数。

示例代码：


//渲染数据表格
table.render({
  elem: '#demo'
  ,url: '/demo/table/user/'
  ,toolbar: '#toolbarDemo'
  ,title: '用户数据表格'
  ,cols: [[
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width: 80, sort: true}
    ,{field: 'username', title: '用户名', width: 120}
    ,{field: 'email', title: '邮箱', minWidth: 150}
    ,{field: 'sex', title: '性别', width: 80, sort: true}
    ,{field: 'city', title: '城市'}
    ,{field: 'sign', title: '签名', minWidth: 200}
    ,{field: 'experience', title: '积分', width: 80, sort: true}
    ,{field: 'ip', title: 'IP', minWidth: 120}
    ,{field: 'logins', title: '登入次数', minWidth: 100, sort: true}
    ,{field: 'joinTime', title: '加入时间', minWidth: 120}
    ,{fixed: 'right', title: '操作', width: 150, toolbar: '#barDemo'}
    ,{title: '序号', templet: function(d){ return d.LAY_INDEX; }}
  ]]
  ,page: true
});
//监听头工具栏事件
table.on('toolbar(demo)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id)
  ,data = checkStatus.data; //获取选中的数据
  switch(obj.event){
    case 'add':
      layer.msg('添加操作');
      break;
    case 'delete':
      if(data.length === 0){
        layer.msg('请选择一行');
      } else {
        layer.msg('删除');
      }
      break;
  };
});

以上代码中，我们在数据表格的最后一列中添加了序号列，并使用templet函数来进行渲染。在templet函数中，我们可以使用d.LAY_INDEX获取当前行的序号，并返回其值。这样，我们就成功的为数据表格添加了序号列。

效果演示

最终效果如下所示。

总结

通过以上代码的实现，我们成功的为数据表格添加了序号列，在实际开发中，我们可以根据实际需求对其进行修改。同时，我们也了解了layui渲染数据表格并添加序号列的一般方法。

通过layui给数据表格添加序号