yelog / layui-soul-table Goto Github PK
View Code? Open in Web Editor NEWlayui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
Home Page: http://yelog.org/layui-soul-table
License: MIT License
layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
Home Page: http://yelog.org/layui-soul-table
License: MIT License
@yelog 大佬你好,我现在遇到了一个问题。首先,我设置主表和子表的宽度为百分比,在子表未展开的情况下,主表的列宽可以随着浏览器窗口的大小变化而做出适应调整。可是展开子表后,列宽就固定不变了,没办法实现自适应效果。
图二是点击了全屏后的效果
error
解决办法:
修改layui源码CSS中z-index=-1,如下:
.layui-table-fixed { position: absolute; left: 0; top: 0; z-index: -1; }
点击子表行的toolBar, 如何获取主表行得obj.data ?
如果能获取到主表行的obj data, 那就非常有帮助
谢谢
看了老哥代码 很是羡慕 跪求老哥告知下 设计soul-table的逻辑和思路 以及用到的一些方法 以供学习
谢谢 膜拜
yelog, 您好
如何设置父表行的 children 子表直接展开 ?
而不需要等用户点击再展开
尤其在 父表行不多, 直接展开就非常直观
一个页面有多个table,
其中一个表格应用了soulTable后,
其他没有应用 soultable 的table 右下角都会出现 "编辑筛选条件" 的按钮?
点击会弹框, 无法添加条件,
是我哪里设置不对吗? 应该如何处理
可以对行,自定义功能,如:删除,编辑,状态等等。。
类似这样
http://www.jq22.com/jquery-info14890
但是是对行的。。
我使用的是SSM编写的
在添加了子表后发现父子表的操作都无法完成
准确的来说是由于无法选中行引起的。。
希望可以给个修改的思路
子表dbclick会触发父表的dbclick
在子表存在的时候,并且父表所有列都没有filter的时候,原始的排序按钮就会出现,这时候点排序子表就没了
列下拉列表->筛选数据->相关操作框
此操作框包含三部分:a、关键字搜索。b、全选 清空 反选。c、勾选筛选数据
问题描述:当我在(a)关键字搜索中输入了一个关键字,(c)的勾选数据进行了过滤,当我选择(b)中的全选时会把所有初始化加载的数据全部选中,没有做到通过关键字搜索后想要全选的意义,不能发图片 只能描述
`{
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);
}`
请在souTable.css中添加
.childTr > td {z-index: 102;background-color: #fff;}
从表如何取主表字段数据当参数请求数据?
开启筛选功能后,筛选的小漏斗不显示,是什么原因
有两个问题需要请教,
树形数据如何绑定主子表?
目前示例的子表 用的是url 通过where 设置过滤条件来绑定数据,
子表的数据可否用 data ? 因为我的子表数据就是主表行数据的一个子集数组
目前设置了列固定 的列, 就没有办法实现soultable的过滤效果,
要如何设置才能实现 即能固定列 又有筛选效果?
谢谢
@yelog 大佬,我已经更新了tableChild.js,soulTable.js,tableFilter.js这三个文件,怎么还是不行呢?
请问 你的 mybatis是哪个版本的呢?
当设置锁定列后,拖动非锁定列到锁定列位置,出现错位。
查看页面代码,对锁定列的遮罩层进行隐藏,发现锁定列被遮罩部分发生移动
数据绑定后(分页),列筛选时 结果集为什么只有当前页的数据?
我的数据绑定方式是一次性从后台获取,然后直接绑定给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 //不显示尾页
}
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:
, 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')
// }
//});
});
}
不支持的[object Object]表单渲染
https://yelog.org/layui-soul-table/
中的子表示例,在点击父表表头上的排序按钮后,最左边子表展开功能消失
如何实现像 Excel 中,单元格内按 Alt+Enter 实现换行呢? 只能通过输入
嘛?感觉用户使用不太方便呢?
yelog, 你好
导出Excel时,如何避免数字被导出成了文本
请教
如何重新加载 某一个子表?
在新增了一条子表行后, 如何重新加载这个子表?
谢谢
日期筛选能不能增加时间范围选择
重载表格后,表格下方的筛选条件就没了,实际条件还存在
表头筛选数据,后台传入非字符串参数tableFilter第822行的list[i].toLowerCase会出报错,可以先转下字符串
导出excel是多一列重复的
1.先点击编辑筛选条件,输入某个筛选条件,正常。
2.点击另外一个字段排序,下面的筛选条件消失了。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.