yelog / layui-soul-table

layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等

Hi there 👋

layui-soul-table's Issues

移动列之后用隐藏显示列问题

现有设定为：当我在哪列上进行筛选操作-表格列进行隐藏列时，选中哪列则不能隐藏哪列
发现问题：
1.移动非锁定列，例：第二列和第三列互换位置
2.当我再次再第二列进行列隐藏操作时，不能隐藏的不是第二列而是第三列

当设置锁定列后，拖动非锁定列到锁定列位置，出现错位

当设置锁定列后，拖动非锁定列到锁定列位置，出现错位。
查看页面代码，对锁定列的遮罩层进行隐藏，发现锁定列被遮罩部分发生移动

mybatis 版本号

请问 你的 mybatis是哪个版本的呢？

编辑条件筛选这个模块可以不使用吗

上图中的这一整行 可以在渲染页面的时候就不展示 或者 直接不调用这个模块

子表设置冻结列后 标题冻结了 但是表内容没有冻结

`{
title: '表格二'
,autoSort: false
//,url: 'data.json'
,height: 0.74*hi
,limit: 100
,page: {layout:['prev','page','next','count','limit','skip'],
groups:100,
limits:[100,200,500,1000,99999]
}
,cols: [[
{field:'spu',width: 110, title: '货号',filter: true,fixed:'left'},
{field:'spn',width: 110, title: '产品名称',filter: true,fixed:'left'},
{field:'color',width: 110, title: '颜色',filter: true,fixed:'left'},
{field:'dl',width: 80, title: '大类',filter: true,},
{field:'zl',width: 80, title: '类别',filter: true,},
{field:'xl',width: 90, title: '小类',filter: true,},
{field:'season',width: 80, title: '季节',filter: true,},
{field:'wyear',width: 110, title: '年份',filter: true,},
{field:'sex',width: 110, title: '性别',filter: true,},
{field: 'B09AX', width: 110, title: 'B09AX', filter: true, sort: true},
{field: 'B11AX', width: 110, title: 'B11AX', filter: true, sort: true},
{field: 'B13AX', width: 110, title: 'B13AX', filter: true, sort: true},
{field: 'B15AX', width: 110, title: 'B15AX', filter: true, sort: true},
{field: 'B17AX', width: 110, title: 'B17AX', filter: true, sort: true},
{field: 'XTO', width: 110, title: 'XTO', filter: true, sort: true},
{field: 'B09AD', width: 110, title: 'B09AD', filter: true, sort: true},
{field: 'B11AD', width: 110, title: 'B11AD', filter: true, sort: true},
{field: 'B13AD', width: 110, title: 'B13AD', filter: true, sort: true},
{field: 'B15AD', width: 110, title: 'B15AD', filter: true, sort: true},
{field: 'B17AD', width: 110, title: 'B17AD', filter: true, sort: true}
]]
, filter: {
items:['column','data','condition','excel']
}
,data:function(d){
var query=son(d);//console.log(query);
var data = [];
$.ajax({
url: 'http://127.0.0.1:8090/web/my_sale/php/SelectDate.php',
data: {
query:query
},
method:'post',
dataType: 'json',
async: false,
cache: false,
success: function (res) {
data = res.data;console.log(data);
}
})
return data;
}

                       done: function () {
                            var table = layui.table,soulTable = layui.soulTable;
                            soulTable.render(this)；
                        }`

看了下html 好像冻结列的table的高度为0 不知道为什么

这个本地筛选有个缓存，我第一次查的数据是多少，以后每次的查的数据再进行筛选，得到的还是第一次查询的数据

重载和筛选的问题

重载表格后，表格下方的筛选条件就没了，实际条件还存在

表头筛选数据，后台传入非字符串参数tableFilter第822行的list[i].toLowerCase会出报错，可以先转下字符串

soul-table是否支持合计行（totalRow）

有一个问题想请教

在table.render中新增totalRow: true属性 合计行的区域会被开启 但是单元格内并没有数据
在您的html中也测试了 效果一致

请问 soul-table目前是否还不支持 原table的合计行属性

排序的问题

在子表存在的时候，并且父表所有列都没有filter的时候，原始的排序按钮就会出现，这时候点排序子表就没了

为啥我的合并列还是有问题

如图

子表删除后可以修改父表信息吗？

为什么主表点击事件不起作用

@yelog 大佬，我已经更新了tableChild.js，soulTable.js，tableFilter.js这三个文件，怎么还是不行呢？

父表可不可以增加checkbox列

复选框checkbox和子表重叠解决办法

error
解决办法：
修改layui源码CSS中z-index=-1，如下：
.layui-table-fixed { position: absolute; left: 0; top: 0; z-index: -1; }

初始化加载，请求了两次后台。

表中内容如果有回车则无法完全显示内容

从表如何取主表字段数据当参数请求数据

从表如何取主表字段数据当参数请求数据？

如何重新加载 某一个子表？

请教
如何重新加载 某一个子表？
在新增了一条子表行后， 如何重新加载这个子表？
谢谢

固定列错行

右侧固定列 和 活动列 的行错开了

点击子表行， 如何获取主表行得obj.data ?

点击子表行的toolBar， 如何获取主表行得obj.data ?
如果能获取到主表行的obj data, 那就非常有帮助
谢谢

列按条件筛选不起作用

示例

能否加一个右键行的操作

可以对行，自定义功能，如：删除，编辑，状态等等。。
类似这样
http://www.jq22.com/jquery-info14890
但是是对行的。。

如何设置父表行的 children 子表直接展开， 而不是等用户点击再展开

yelog, 您好
如何设置父表行的 children 子表直接展开 ？
而不需要等用户点击再展开
尤其在 父表行不多， 直接展开就非常直观

导出excel是多一列重复的

导出excel是多一列重复的

子表可以实现类似主表的myTable.reload({data: data.data,});的功能吗？

yelog 您好！
我这边有一个需求 类似 点击展开按钮 展开子表 后 再加载对应的数据
实际上 主表类似是我的合计行 而子表类似我的明细表 因此 子表的数据只展示主表对应类别的数据

按钮的点击事件和数据加载我这边都解决了 但是不是很清楚怎么才能让数据加载到myTable下的子表内 主表的话可以用myTable.reload解决 但是子表 我就不是很清楚 麻烦老哥指点

页面有一个表格应用了soulTable后， 其他没有应用的table 右下角都会出现 "编辑筛选条件" 的按钮

一个页面有多个table,
其中一个表格应用了soulTable后，
其他没有应用 soultable 的table 右下角都会出现 "编辑筛选条件" 的按钮?
点击会弹框， 无法添加条件，
是我哪里设置不对吗？ 应该如何处理

点击排序后，子表功能消失

https://yelog.org/layui-soul-table/
中的子表示例，在点击父表表头上的排序按钮后,最左边子表展开功能消失

合并之后的单元格设置开启编辑功能，输入框会占满表格

设置完合并之后，页面中表格已经合并
但是点击合并之后的表格进行编辑，输入框变成了整个表格的大小

子表dbclick不好使

子表dbclick会触发父表的dbclick

树形数据如何绑定主子表

有两个问题需要请教，

1. 树形数据如何绑定主子表?
   目前示例的子表 用的是url 通过where 设置过滤条件来绑定数据，
   子表的数据可否用 data ? 因为我的子表数据就是主表行数据的一个子集数组

2. 目前设置了列固定 的列， 就没有办法实现soultable的过滤效果，
   要如何设置才能实现 即能固定列 又有筛选效果？
   谢谢

父子表格在小屏幕上右侧操作按钮与表格的行对应不起来

一点功能上的细节问题

刚看到这个扩展，我是被子表吸引过来的，bootstraptable不太符合审美，哈哈，大致看了下源码，在拖拽事件最后是否应该加一行$this.removeAttr('style');，毕竟拖拽过程中添加了大量css，如果不移除，有通过css更改过表格样式的话那一列会非常突兀，还有就是如果从后台获取数据，筛选列数据会为空，我再仔细看看吧，前端小白中的小白路过

更新soulTable等相关文件后， 没有了排序的功能

您好
更新soulTable等相关文件后， 没有了排序的功能

更新前 带排序：

更新后 没有了排序选项：

拖动列导致border被隐藏

大佬，你好。是火狐浏览器。

使用了子表之后就没有办法监听原生的表头排序了吗？

筛选数据中相关问题

列下拉列表->筛选数据->相关操作框
此操作框包含三部分：a、关键字搜索。b、全选 清空 反选。c、勾选筛选数据
问题描述：当我在（a）关键字搜索中输入了一个关键字，（c）的勾选数据进行了过滤，当我选择（b）中的全选时会把所有初始化加载的数据全部选中，没有做到通过关键字搜索后想要全选的意义，不能发图片 只能描述

【需求】新增一个tips

如图：文本超出列宽时，鼠标移动上去不点击显示tips【内容】 点击时正常显示

只实现了到了子层， 孙子层的 data: function(d){ return d.lst } 设置不对吗?

yeLog 您好，
测试父子表，表中表，无限层级
发现只能实现一层, 是 孙子层的 data 设置方法不对吗？ 麻烦看下
代码如下:
function setNewTbl(ele, lst) {
if (!lst || lst == null || lst.length <= 0) {
lst = [];
}
layui.use(['table', 'soulTable'], function () {
var table = layui.table;
var soulTable = layui.soulTable;
table.render({
elem: ele
, height: $(document).height() - $(ele).offset().top - 30
, data: lst
, totalRow: true
, page: false
, limit: 100000
, cols: [[ //表头
{ field: 'hid', title: '种编', width: 120, sort: true, filter: true, }
, {
field: 'hId', title: 'hid', width: 80, show: 1, children: [{
title: "大类表"
, data: function (d) {
console.log(d);
return d.lsMidStyleType;
}
, height: 200
, limit: 10000000
, page: false
, cols: [[
{
title: '#', width: 60, show: 1, children: [{
title: "小类表"
, data: function (d) {
console.log(d);
return d.lsBaseStyleType;
}
, height: 200
, limit: 10000
, page: false
, cols: [[
{ field: 'styleType_Id', title: 'sid', width: 60, sort: true, filter: true },
{ field: 'styleType_CName', title: '小类', width: 180, sort: true, filter: true },
]]
}]
},
{ field: 'mId', title: 'midd', width: 100, sort: true, filter: true },
{ field: 'midStyleTypeName', title: '大类', width: 150, sort: true, filter: true },

                         ]]
                    , done: function () {
                        layui.soulTable.render(this);
                    }
                }]
            }

            , { field: 'highStyleTypeName', title: '种类', width: 420, sort: true, filter: true,  }
          ]]
          , done: function (res, curr, count) {
              soulTable.render(this);
          }
        });
        //table.on('tool(packgrn)', function (obj) { 
        //    var data = obj.data; 
        //    var layEvent = obj.event; 
        //    if (layEvent === 'tl-packgrn') 
                
        //    }
        //});
    });
}

浏览器窗口变化时列宽自适应问题

@yelog 大佬你好，我现在遇到了一个问题。首先，我设置主表和子表的宽度为百分比，在子表未展开的情况下，主表的列宽可以随着浏览器窗口的大小变化而做出适应调整。可是展开子表后，列宽就固定不变了，没办法实现自适应效果。
图二是点击了全屏后的效果

前端有很多条数据，选择筛选数据后再取消勾选条件只会显示10条数据是什么情况

导出Excel时，如何避免数字被导出成了文本

yelog, 你好
导出Excel时，如何避免数字被导出成了文本

开启筛选功能后，筛选的小漏斗不显示

开启筛选功能后，筛选的小漏斗不显示，是什么原因

后台分页的话，如果点击排序，最下面的筛选条件消失。

1.先点击编辑筛选条件，输入某个筛选条件，正常。
2.点击另外一个字段排序，下面的筛选条件消失了。

数据绑定后(分页)，列筛选时 结果集为什么只有当前页的数据？

数据绑定后(分页)，列筛选时 结果集为什么只有当前页的数据？
我的数据绑定方式是一次性从后台获取，然后直接绑定给table(分页)
但是使用列筛选时， 筛选到的结果集却只有当前页的数据， 其他页的并没有包括在里面
能否在整个表格中筛选， 而不是只是当前页？

现在的绑定方式如下：

, data: poList
, totalRow: true
, limit: 50
, page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
//,curr: 5 //设定初始在第 5 页
, groups: 1 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
}

引入，提示 不支持的表单渲染

不支持的[object Object]表单渲染

加入子表后父表操作失效

我使用的是SSM编写的
在添加了子表后发现父子表的操作都无法完成
准确的来说是由于无法选中行引起的。。
希望可以给个修改的思路

关于主表 {fixed:'right’} 右固定列 遮挡子表的的解决方法

请在souTable.css中添加

.childTr > td {z-index: 102;background-color: #fff;}

soul-table的封装和闭包是用什么写的

看了老哥代码 很是羡慕 跪求老哥告知下 设计soul-table的逻辑和思路 以及用到的一些方法 以供学习
谢谢 膜拜

date筛选如何筛选时间

日期筛选能不能增加时间范围选择

单元格内如何手动换行？

如何实现像 Excel 中，单元格内按 Alt+Enter 实现换行呢？ 只能通过输入
嘛？感觉用户使用不太方便呢？