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。您可以在该示例中更改图标，以符合您的需求。

相关问题

通过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`来获取当前数据的索引值。同时，我们还在最后一列显示了一个新增按钮。

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

layui表格，表头是（序号，工作内容，完成日期，操作（操作里面是删除功能））通过clos方式（初始的表格是没有内容的只有表头）倒数第二行的位置有一个新增按钮点击，表格增加一行

Sure, 您的第一个问题是如何实现一个带有layui表格的新增按钮和删除功能的表格？可以通过clos方式实现，以实现类似于以下的表头和行：

| 序号 | 工作内容 | 完成日期 | 操作（删除）|
| --- | --- | --- | --- |
| 1 | 完成登录页面 | 2021-01-01 | 删除 |
| 2 | 完成注册页面 | 2021-01-02 | 删除 |
| 3 | 完成订单页面 | 2021-01-03 | 删除 |
| ...| ... | ... | ... |
| 新增 | 添加新任务 | - | - |

这个表格可以通过以下步骤来实现：

1. 在HTML文件中，添加一个空的表格，只有表头。可以通过layui的table组件来实现。

<table id="task-table" lay-filter="task-table">
  <thead>
    <tr>
      <th lay-data="{field:'id', title:'序号'}">序号</th>
      <th lay-data="{field:'task', title:'工作内容'}">工作内容</td>
      <th lay-data="{field:'date', title:'完成日期'}">完成日期</td>
      <th lay-data="{field:'operation', title:'操作', toolbar: '#operation'}">操作</td>
    </tr>
  </thead>
  <tbody></tbody>
</table>

2. 在JavaScript文件中，初始化这个表格，并且添加操作列中的删除功能。

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

  // 初始化表格，使用ajax从服务器获取数据
  table.render({
    elem: '#task-table',
    url: '/api/tasks',
    cols: [[
      {field:'id', title:'序号'},
      {field:'task', title:'工作内容'},
      {field:'date', title:'完成日期'},
      {field:'operation', title:'操作', toolbar: '#operation'}
    ]]
  });

  // 监听操作列中的事件，例如删除
  table.on('tool(task-table)', function(obj) {
    if (obj.event === 'delete') {
      var data = obj.data; // 获取表格中的数据
      // 使用ajax向服务器发送删除请求
      $.ajax({
        url: '/api/delete_task',
        type: 'POST',
        data: {id: data.id}, // 发送删除请求时需要将数据id传递给服务器
        success: function(res) {
          if (res.code === 0) {
            // 删除成功后，重新加载表格
            table.reload('task-table');
          } else {
            // 删除失败，弹出提示框
            layer.alert('删除失败：' + res.msg, {icon: 2});
          }
        },
        error: function() {
          layer.alert('与服务器通信失败', {icon: 2});
        }
      });
    }
  });

  // 监听新增按钮的事件
  $('#task-table').next('.layui-table-tool').find('.layui-btn').on('click', function() {
    // 手动弹出一个表单来添加新任务
    layer.open({
      type: 1,
      title: '添加新任务',
      content: $('#add-task-form'),
      btn: ['确定', '取消'],
      yes: function(index, layero) {
        // 在这里向服务器发送添加请求，并且关闭弹出层
        $.ajax({
          url: '/api/add_task',
          type: 'POST',
          data: {
            task: $('#add-task-form input[name="task"]').val(),
            date: $('#add-task-form input[name="date"]').val()
          },
          success: function(res) {
            if (res.code === 0) {
              // 添加成功后，重新加载表格
              table.reload('task-table');
              // 关闭弹出层
              layer.close(index);
            } else {
              // 添加失败，弹出提示框
              layer.alert('添加失败：' + res.msg, {icon: 2});
            }
          },
          error: function() {
            layer.alert('与服务器通信失败', {icon: 2});
          }
        });
      }
    });
  });
});

在添加新任务的表单中，包含了两个输入框，一个用于输入任务内容，一个用于输入完成日期。用户输入完毕并且点击确认按钮后，允许JavaScript代码向服务器发送POST请求，添加新任务并且返回一个状态码。如果状态码为0，表示添加成功，此时JavaScript代码重新加载表格，从服务器获取最新的数据。如果状态码不为0，则表示添加失败，弹出一个错误提示框。

<div id="add-task-form" style="display:none;">
  <div class="layui-form-item">
    <label class="layui-form-label">任务内容</label>
    <div class="layui-input-block">
      <input type="text" name="task" placeholder="请输入任务内容" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">完成日期</label>
    <div class="layui-input-block">
      <input type="date" name="date" placeholder="请选择完成日期" class="layui-input">
    </div>
  </div>
</div>

好了，这就是一个简单的带有新增按钮和删除功能的layui表格了，如果您还有其他问题，欢迎随时提出。