layui的表格自带的隐藏列的功能问题？

Question

layui的表格自带的隐藏列的功能问题？

passerby

10238106

发布于
2024-03-05 湖南

使用的说layui的表格自带的隐藏表格列的功能

现在想要实现的功能说如何在隐藏其中的几列以后，获取显示的列的数据，主要是获取除影藏以外的列的表头数据，这个数据需要传给后端
第一次用这个框架，麻烦各位大佬给个解决方法

前端 javascript layui table toolbar

阅读 1.7k

AI BotBETA

在Layui的表格组件中，隐藏列的功能是通过CSS的display: none属性来实现的。当某列被隐藏时，它不会出现在DOM结构中，因此你不能直接通过常规的DOM操作来获取隐藏列的数据。

如果你需要获取当前显示的列的数据，特别是表头数据，你需要通过编程的方式来跟踪这些显示状态。以下是一个基本的步骤和示例代码，帮助你实现这个功能：

初始化表格时记录列的状态：
在创建Layui表格时，你需要知道哪些列是初始时显示的，哪些列是隐藏的。你可以通过Layui的cols配置来设置这些列的初始显示状态。
监听列的显示/隐藏事件：
Layui的表格组件提供了列显示/隐藏的接口，你可以监听这些事件来更新你的列状态跟踪。
获取当前显示的列数据：
当需要获取当前显示的列数据时，你可以遍历你的列状态跟踪，只选择那些标记为显示的列，并从表格数据中提取相应的数据。

以下是一个简化的示例代码：

// 1. 初始化表格和列状态跟踪
var table = layui.table;
var cols = [ // 你的列配置
  {field: 'id', title: 'ID', sort: true},
  {field: 'username', title: '用户名'},
  {field: 'email', title: '邮箱', templet: function(d){ return d.email.replace('@', '***@***.'); }},
  // ... 其他列
];
var shownCols = cols.map(function(col) { return col.field; }); // 初始时所有列都显示

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

// 2. 监听列的显示/隐藏事件
table.on('column(demo)', function(obj){
  var type = obj.type; // 得到事件类型，一般是：show、hide
  var field = obj.field; // 得到当前列的 field 名称
  if(type === 'show'){
    shownCols.push(field); // 显示列，添加到显示的列数组中
  } else if(type === 'hide'){
    shownCols = shownCols.filter(function(col) { return col !== field; }); // 隐藏列，从显示的列数组中移除
  }
});

// 3. 获取当前显示的列数据并传递给后端
function getShownColumnsData() {
  var tableData = table.cache('demo'); // 获取当前表格数据
  var result = tableData.map(function(row) {
    var shownRow = {};
    shownCols.forEach(function(col) {
      shownRow[col] = row[col]; // 只选择当前显示的列的数据
    });
    return shownRow;
  });
  
  // 现在你可以将 result 传递给后端了
  // 例如使用 AJAX: $.ajax({...})
}

请注意，这只是一个基本示例，你可能需要根据你的具体需求进行调整。此外，确保你的后端接口能够处理这种部分列数据的情况。

1 个回答

得票最新

热饭班长

3.7k20236347

发布于
2024-03-08 广东

更新于
2024-03-08

抱歉，这个框架太老了，不太了解呀。

暴力查询可行吗，在需要发送数据给后端时，手动查一下被隐藏的是哪些dom元素，然后解析出需要的数据发给后端可行吗？

撰写回答