layui table template、或toolbar实现超出隐藏、更多展示全部效果

2024-07-17 07:52:24

使用Layui table时，经常会使用template、或toolbar自定义模版属性。当使用该属性自定义HTML时，layui table 单元格原有的文本超出省略号隐藏功能，在该单元格讲不会生效。

前言：首先我们先搞懂layui超出隐藏原理，table单元格只对文本格式或layui本身组件生效，自定义的html不生效。查看css、js源码可得出，

原理：

1）文本不可折行

2）当滚动宽度大于元素外层宽度则在元素结束标签前添加,实现下拉图标展示

<div class="layui-table-grid-down" lay-event="more"><i class="layui-icon layui-icon-down"></i></div>

3）layui 又在下拉按钮上绑定事件，实现展示全部效果。

基础概念

数据返回回调事件

单元格工具事件

单元格工具事件「单击触发」： table.on('tool(filter)', callback);
单元格工具事件「双击触发」： table.on('toolDouble(filter)', callback);

单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。

<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="toolEventDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 支持任意的 laytpl 组件语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
 
<table id="test" lay-filter="test"></table> 
 
<!-- import layui -->
<script>
layui.use(function(){
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#test',
    cols: [[
      {title: '操作', width: 200, templet: '#toolEventDemo'}
    ]]
    // … // 其他属性
  });
  // 单元格工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data; // 得到当前行数据
    var dataCache = obj.dataCache; // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
    var index = obj.index; // 得到当前行索引
    var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
    var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
    var options = obj.config; // 获取当前表格基础属性配置项
    var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
    console.log(obj); // 查看对象所有成员
    
    // 根据 lay-event 的值执行不同操作
    if(layEvent === 'detail'){ //查看
      // do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('确定删除吗？', function(index){
        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
        layer.close(index);
        
        // 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
        /*
        table.reloadData(id, {
          scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
        });
        */
      });
    } else if(layEvent === 'edit'){ //编辑
      // do something
      
      // 同步更新缓存对应的值
      // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
      obj.update({
        username: '123',
        title: 'abc'
      }); 
      // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
      obj.update({
        username: '123'
      }, true); // 注：参数二传入 true 功能为 v2.7.4 新增
   
      // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
      /*
      table.reloadData(id, {
        scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
      });
      */
    }
  });
});
</script>

官网网址：表格组件 table - Layui 文档

弹出贴士层

layer.tips(content, elem, options);

参数 content : 弹出内容
参数 elem : 吸附的目标元素选择器或对象
参数 options : 基础属性配置项。#详见属性

该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。

// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
  var elem = this;
  layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
  tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});

官网地址：通用弹出层组件 layer - Layui 文档

个人案例：

cols内该列明确field值。field：设置字段名。通常是表格数据列的唯一标识

  { title: '关键词', field: 'keywords', toolbar: '#keywords'},

表格加载完成后循环该列，本列单元格限最大高度，超出隐藏。且鼠标经过显示下拉按钮，所以当滚动高度大于外层div高度时则需要添加下拉效果，并将点击显示弹出框事件，绑定在该div上。写法如下：

 done: function (d) {
                    $('#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body [ data-field="keywords"] .border-content').each(function () {
                        if ($(this).outerHeight() > $(this).parent().outerHeight()) {
                            $(this).after('<div class="layui-table-grid-down" lay-event="more"><i class="layui-icon layui-icon-down"></i></div>');
                        }
                    });
                }

 //关键词 弹出层
            var layer = layui.layer;
            table.on('tool(message-autoMessagesTable)', function (obj) {
                var data = obj.data; // 得到当前行数据
                var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
   
                if (layEvent === 'more') {
                    let array = data.keywords.split(','); //获取到的单元格数据为字符串，将其转化为数组
                    let html = '<ul style="display: flex; flex-wrap: wrap;margin-right:13px">';
                    for (var i = 0; i < array.length; i++) {
                        html += '<li style="width: fit-content; line-height: 36px; padding: 0 10px; background-color: #EFF4FF; border-radius: 4px ; margin-bottom: 4px;margin-right: 4px;">' + array[i] + '</li>';
                    };
                    html += '</ul><i class="layui-icon layui-table-tips-c layui-icon-close" id="keywordsPop"></i>';  //关闭按钮

                    //触发弹出层
                    let tips=layer.tips(html, this, {
                        tips: [2, '#ffffff'],
                        time: 0,
                        area: ['400px', 'auto']
                    });


                    //关闭按钮绑定关闭弹出层事件 
                    $('#keywordsPop').click(function () {
                        layer.close(tips);
                    });

                };
            });

CSS样式

/*table 关键词 超出隐藏 更多效果 begin*/
#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-cell {
    max-height: 76px;
}

#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body [ data-field="keywords"] .layui-table-grid-down {
    display:none;
}

#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body .layui-table-hover [ data-field="keywords"] .layui-table-grid-down {
    display: block;
}
/*table 关键词 超出隐藏 更多效果 end*/

码农公寓