layui表格添加icon

您可以使用 table.render 方法中的 templet 参数来添加表格行中的 icon。以下是一个示例代码：

//定义数据
var data = [
    {name: 'John', age: 28},
    {name: 'Mike', age: 32},
    {name: 'Tom', age: 24}
];

//定义表格列
var cols = [
    {field: 'name', title: '姓名', width: 100},
    {field: 'age', title: '年龄', width: 100},
    {title: '操作', width: 100, templet: '#iconTpl'}
];

//定义模板
var iconTpl = '<i class="layui-icon layui-icon-delete"></i>';

//渲染表格
table.render({
    elem: '#demo',
    data: data,
    cols: [cols],
});

//将模板添加到表格中
$('body').append('<script type="text/html" id="iconTpl">' + iconTpl + '</script>');

此示例使用 layui-icon-delete 图标作为示例 icon。您可以在该示例中更改图标，以符合您的需求。

相关问题

layui动态改变数据表格状态

您可以使用 layui 的表格渲染方法 `table.render()` 来渲染数据表格，并通过该方法的回调函数 `done` 来动态改变表格状态。

以下是一个示例代码，其中数据表格初始化时默认显示“未审核”状态的数据，点击“审核”按钮后，将数据状态改为“已审核”，并重新渲染表格。

<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm" id="audit-btn">审核</button>
</div>

<table id="data-table" lay-filter="data-table"></table>

<script>
layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;

  // 初始化数据表格
  table.render({
    elem: '#data-table',
    url: '/api/getData',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '名称'},
      {field: 'status', title: '状态'}
    ]],
    where: {status: 'unaudited'}, // 默认显示未审核状态的数据
    done: function(res, curr, count) {
      // 渲染完表格后的回调函数
      if (res.code === 0) {
        // 数据加载成功
        if (curr === 1) {
          // 第一页的数据已加载完成，可以进行状态处理
          handleStatus();
        }
      } else {
        // 数据加载失败
        layer.msg(res.msg, {icon: 2});
      }
    }
  });

  // 处理数据状态
  function handleStatus() {
    $('#data-table tbody tr').each(function(){
      var tr = $(this);
      var rowData = table.cache['data-table'][tr.data('index')];
      if (rowData.status === 'unaudited') {
        tr.addClass('unaudited');
      } else {
        tr.addClass('audited');
      }
    });
  }

  // 监听审核按钮点击事件
  $('#audit-btn').on('click', function(){
    // 手动修改数据状态
    $('#data-table tbody tr.unaudited').each(function(){
      var tr = $(this);
      var rowData = table.cache['data-table'][tr.data('index')];
      rowData.status = 'audited';
    });
    // 重新渲染表格
    table.reload('data-table', {where: {status: 'audited'}});
  });
});
</script>

<style>
.audited td {color: #aaa; text-decoration: line-through;}
.unaudited td {background-color: #f2dede;}
</style>

在上述示例中，我们通过添加 `.unaudited` 和 `.audited` 两个 CSS 类来改变表格行的样式，以便区分已审核和未审核数据。同时，我们还使用了 layui 的分页功能，只对当前页的数据进行状态处理，以避免性能问题。

通过var定义data数组，通过layui表格里面cols方式，将一个带索引的表格插入到表格的最后一行，最后一行第一个空展示索引的值，第二空展示新增按钮

好的，让我来回答你的问题。

首先，你可以通过以下方式定义一个带索引的data数组：

var data = [
  {id: 1, name: '张三', age: 18},
  {id: 2, name: '李四', age: 20},
  {id: 3, name: '王五', age: 22}
];

接下来，你可以通过layui表格的cols配置项来设置最后一行的表格内容，例如：

var cols = [[
  {field: 'id', title: '编号'},
  {field: 'name', title: '姓名'},
  {field: 'age', title: '年龄'},
]];

// 最后一行新增按钮
cols.push([
  {field: 'id', title: '编号', templet: '#indexTpl'},
  {field: 'addBtn', title: '操作', templet: '#addBtnTpl'}
]);

// 表格渲染
layui.table.render({
  elem: '#test',
  data: data,
  cols: cols
});

在上面的代码中，我们通过push方法添加了一个带有自定义模板的最后一行，并将其渲染到id为test的表格中。

最后，你可以在页面中定义两个自定义模板`#indexTpl`和`#addBtnTpl`，例如：

<script type="text/html" id="indexTpl">
  {{# if(d.LAY_TABLE_INDEX === 0) { }}
    {{ layui.table.getSelect(table) + 1 }}
  {{# } }}
</script>

<script type="text/html" id="addBtnTpl">
  <button class="layui-btn layui-btn-sm" lay-event="add">
    <i class="layui-icon">&#xe654;</i> 新增
  </button>
</script>

这里，我们使用了`LAY_TABLE_INDEX`来判断当前数据是否为最后一行，并通过`table.getSelect(table) + 1`来获取当前数据的索引值。同时，我们还在最后一列显示了一个新增按钮。

希望这个回答对你有所帮助！