layui 表格 设置行宽

要设置layui表格的行宽，可以使用css样式来实现。在表格的HTML代码中，为表格的每一行添加一个class，然后使用CSS样式来设置行宽。

例如，假设我们有一个id为"table"的表格，我们想要设置行宽为200px，可以按照以下步骤进行操作：

1. 在表格的HTML代码中，为每一行添加一个class，例如"table-row"：

<table id="table">
  <tr class="table-row">
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr class="table-row">
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

2. 在CSS样式中设置行宽为200px：

.table-row {
  width: 200px;
}

这样，所有带有"class='table-row'"的表格行都会被设置为200px的宽度。你可以根据需要自定义宽度值。

相关问题

layui表格设置下拉框

在layui表格中设置下拉框可以使用laytpl模板引擎的方式来实现。具体步骤如下：

1. 在表格的列中定义一个templet模板，例如：

{field: 'status', title: '状态', templet: '#statusTpl'}

2. 在html中定义下拉框的模板，例如：

<script type="text/html" id="statusTpl">
  <select name="status">
    <option value="0">未审核</option>
    <option value="1">已审核</option>
  </select>
</script>

3. 在JavaScript中使用laytpl模板引擎将模板渲染到表格中，例如：

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

  // 渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: '用户名', width:120},
      {field: 'email', title: '邮箱', minWidth:150},
      {field: 'status', title: '状态', templet: '#statusTpl'},
      {field: 'operate', title: '操作', toolbar: '#barDemo', width:150}
    ]],
    page: true
  });

  // 渲染下拉框模板
  laytpl($('#statusTpl').html()).render({}, function(html){
    $('#demo').html(html);
  });
});

以上代码将会在表格中的“状态”列中渲染一个下拉框，并且下拉框中有两个选项：“未审核”和“已审核”。

layui表格删除行

### 回答1：
要删除layui表格中的行，可以使用`table.reload()`方法重新加载数据，包括删除行后的数据。具体实现步骤如下：

1. 获取表格对象和表格数据。

var table = layui.table;
var data = [{
  id: 1,
  name: '张三',
  age: 18
}, {
  id: 2,
  name: '李四',
  age: 20
}];

2. 渲染表格。

table.render({
  elem: '#demo',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'},
    {fixed: 'right', title: '操作', toolbar: '#barDemo'}
  ]],
  data: data
});

这里在表格的最后一列添加了一个操作栏，用于删除行。

3. 监听操作栏中的删除按钮。

// 监听表格中的工具条
table.on('tool(demo)', function(obj){
  var data = obj.data;
  if(obj.event === 'del'){
    layer.confirm('真的删除行么？', function(index){
      // 删除行
      var newData = [];
      for(var i=0;i<data.length;i++){
        if(data[i].id != obj.data.id){
          newData.push(data[i]);
        }
      }
      table.reload('demo', {data: newData});
      layer.close(index);
    });
  }
});

这里通过监听表格中的工具条，判断点击的是删除按钮，然后弹出确认框，确认后删除行。

4. 删除指定行。

// 删除指定行
var newData = [];
for(var i=0;i<data.length;i++){
  if(data[i].id != 1){
    newData.push(data[i]);
  }
}
table.reload('demo', {data: newData});

这里删除id为1的行，可以根据需求修改。

### 回答2：
在layui表格中删除行，需要先获取到要删除的行的索引，然后使用layui表格的API方法进行删除操作。

首先，在表格中设置一个删除按钮，绑定点击事件，并传递要删除的行的索引作为参数：

<table id="test">
  <!-- 表格内容省略 -->
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(0)">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mike</td>
      <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(1)">删除</button></td>
    </tr>
    <!-- 更多行省略 -->
  </tbody>
</table>

然后，在JavaScript中定义一个deleteRow函数来处理删除行的逻辑：

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

    // 获取表格对象
    var tableIns = table.render({
      elem: '#test'
    });

    // 获取当前数据表格的所有数据
    var data = tableIns.config.data;

    // 删除指定索引的行数据
    data.splice(index, 1);

    // 更新数据表格
    tableIns.reload({
      data: data
    });
  });
}

在函数中，首先获取到表格对象tableIns，然后通过config.data属性获取到当前表格中的所有数据，并使用splice方法删除指定索引的行数据。最后，调用reload方法重新加载数据，传递更新后的数据给data参数。

这样，当点击删除按钮时，对应的行数据将会被从表格中删除。

### 回答3：
在Layui表格中删除行的操作是比较简单的。下面我就具体的步骤进行介绍。

首先，我们需要先获得表格实例对象，可以通过Layui提供的 table.render() 方法来实现。这个方法的参数一般是一个对象，包含了一些配置和回调函数。

在获取到表格实例对象后，我们可以使用实例对象的方法 table.on(event, callback) 来实现行的删除操作。其中，event 是事件类型，我们可以使用 "row(multiple)" 来实现行的多选删除，也可以使用 "row(single)" 来实现行的单选删除，callback 是回调函数，表示执行删除操作后的处理逻辑。

接下来，我们在回调函数中实现删除的具体逻辑。使用 table.checkStatus(id) 方法获取当前选中的行数据，返回的是一个对象，其中 data 属性包含了当前选中的行数据。然后，我们可以遍历选中的数据，获取到行对应的索引值，再通过实例对象的方法 table.trDel(index) 来删除行。

最后，为了使删除操作生效，我们还需要引入一些必要的样式和库文件，如 layui.css、layui.js 等。

这样，我们就可以使用Layui表格删除行了。需要注意的是，删除行的操作是基于实例对象进行的，所以要确保在操作前已经成功获取到表格实例对象。