Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(table): 重写列宽度计算方式，以实际内容宽度为准 #1900

Closed
wants to merge 19 commits into from
Closed

feat(table): 重写列宽度计算方式，以实际内容宽度为准 #1900

wants to merge 19 commits into from

Conversation

15810208908
Copy link

@15810208908 15810208908 commented May 13, 2024 •
edited

😃 本次 PR 的变化性质

请至少勾选一项

  • 功能优化
  • 分支合并

🌱 本次 PR 的变化内容

  • 新增width参数支持：auto值
  • 重写列宽度计算方式，以每行数据所占用的实际宽度为准，但不超过设定的最大宽度值；
  • 新增nowrap参数，指定当内容宽度超过所设定的列宽度时，进行强制换行，更好的视觉呈现

✅ 本次 PR 的满足条件

请在申请合并之前，将符合条件的每一项进行勾选

  • 已对每一项的改动均测试通过
  • 已提供具体的变化内容说明

@stackblitz StackBlitz
Copy link

stackblitz bot commented May 13, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@15810208908
Update table.js
a560602 
增加nowrap参数支持强制换行
@15810208908
Update layui.css
1a06330 
增加nowrap类
@15810208908
Update table.js
fdb669b 
增加事件处理方式，支持在render(options)的参数中直接定义lay-event指定的需要执行的时间方法；我认为现在的layui事件处理是需要优化的，同时在回调的参数，增加了（index,rows,cols），index：当前事件行索引，rows：当前事件行数据，cols：录前事件列配置信息
@15810208908
优化分页
3d328e9 
优化分页逻辑，增加onselect方法，去掉原在渲染的时候就执行jump方法的不合适的逻辑，改为当页码、页数被选择后执行onselect方法；同步修改表格中的分页逻辑
@15810208908
Merge branch 'layui:main' into main
32e7db8
@15810208908
去掉对分页的依赖
e3808af 
表格数据不在与分页页数进行关联依赖，更灵活的处理动态或静态的数据，也更是允许在整合在其他框架中（主要是可以自己独立用其他ajax类库获取数据在用layui呈现）
@15810208908
Update table.js
85118bd 
修正当不使用分页时的BUG
@Sight-wcg
Copy link
Collaborator

感谢您的 PR

  • 建议增加一个选项来设置列宽分配策略，因为根据单元格实际内容宽度分配列宽，性能受行数影响
  • 不同的问题建议拆分为单个 PR 来解决，一个 PR 尽量只解决一个问题
  • 请恢复代码格式。也许 layui 需要配置 lint 工具

@Sight-wcg Sight-wcg changed the title 重写列宽度计算方式，以实际内容宽度为准 feat(table): 重写列宽度计算方式，以实际内容宽度为准 May 14, 2024
@15810208908
修复resize后不重新计算列宽的问题
6ad6057
@15810208908
分页默认增加刷新按钮
2c6fb63 
refresh
@15810208908
调整刷新按钮元素为span
a85b8b9 
优化事件注册判断方式
@15810208908
列宽度计算增加表头名称
5f53503 
当列数据少的时候防止表头显示不全，提高视觉呈现的直观性
@15810208908
优化表格工具栏
7e762f2 
增加自定义工具栏功能，支持toolbar参数传递数据对像进行工具栏定义以及事件定义，修改工具栏父容器为表单（form）元素，以方便在工具栏中出现表单元素时获取元素值，支持工具栏增加分割符
[
                            {
                                "icon": "layui-icon-edit",
                                "text": "好啊好啊",
                                "handler": function () {
                                    alert("")
                                }
                            },
                            "-",
                        ],
@15810208908
Copy link
Author

谢谢你的公关

  • 建议增加一个选项来设置列分配策略，因为根据单元格实际内容宽度分配列宽，性能受行数影响
  • 不同的问题建议拆分为单个 PR 来解决，一个 PR 尽量只解决一个问题
  • 请恢复代码格式。也​​​​许layui 需要配置lint工具

经过这几天使用表格相关的功能，现已优化到最佳状态了，扩展或优化了一些常用功能，实际效果：
image

@15810208908
Copy link
Author

谢谢你的公关

  • 建议增加一个选项来设置列分配策略，因为根据单元格实际内容宽度分配列宽，性能受行数影响
  • 不同的问题建议拆分为单个 PR 来解决，一个 PR 尽量只解决一个问题
  • 请恢复代码格式。也​​​​​​许layui 需要配置lint工具

经过这几天使用表格相关的功能，现已优化到最佳状态了，扩展或优化了一些常用的功能，实际效果： 图像

建议合并我所有提交的代码，可能用部份改动影响初始值；但不建议增加多分支的方式，我认为这样能提高性能；关于代码格式，我直接使用的Visual Studio，而VScode 的代码格式方式真的是一言难尽了。。。

@15810208908 15810208908 reopened this May 15, 2024
sentsim
sentsim requested changes May 15, 2024
View reviewed changes
src/css/layui.css
Copy link
Member

@sentsim sentsim May 15, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

包含了太多 CSS 空格的变动，可能是编辑器进行了格式化处理，建议在本次 PR 中移除 layui.css。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

因为工具不一致导致，我用的Visual Studio，这工具对CSS格式化的时候在值前面加空格了

sentsim
sentsim requested changes May 15, 2024
View reviewed changes
src/modules/table.js
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

table.js 存在提交记录的冲突

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

主要是我重写了不少地方的代码，以及增加了不少新功能与其他版本冲突吧；可以直接用的版本，
重写的部分：单元格的宽度计算，改成了以多行数据中的最多数据实际长度（但不大于设定的最大列宽）作为列宽度，主要是为了让数据能直观全部呈现出来，当大于列宽的时候自动换行或溢出（以nowrap参数控制）；重写分页处理逻辑及增加当选择或改变页码时执行onselect时间，这样更适合在各环境中兼容使用；增加在表格数据渲染时的options中增加自定义事件，不用在额外用layui.event进行处理，这样方便上下文的数据引用及处理；具体可看一下我的代码版本以及对未来其他模块进行重写以及采用我的思路，让使用起来更快捷简便。
image
image
image

@sentsim
Copy link
Member

sentsim commented May 15, 2024

该 PR 由于文件内容出现了大量格式化的差异，以及存在代码冲突，难以进行 Review。暂时设置为 Draft 状态。

@sentsim sentsim marked this pull request as draft May 15, 2024 13:41
@sentsim sentsim marked this pull request as ready for review May 15, 2024 13:42
@sentsim sentsim marked this pull request as draft May 15, 2024 13:42
@15810208908
Copy link
Author

另外增加一个表格布局：工具栏及分页栏上下固定的CSS：

.layui-table-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.layui-table-box { position: absolute; top: 0; left: 0; right: 0; bottom: 45px; z-index: 1; }
.layui-table-body { position: absolute; top: 41px; left: 0; right: 0; bottom: 0; }
.layui-table-page { position: absolute; left: 0; bottom: 0; right: 0; }
.layui-laypage span, .layui-laypage a { font-size: 14px; }
.layui-table-cell { text-align: center; }
.layui-table-tool { position: absolute; top: 0; left: 0; right: 0; height: 45px; min-height: initial; line-height: normal; padding: 8px; overflow: hidden; }
.layui-table-tool + .layui-table-box { top: 46px; }
.layui-table-body .layui-none { text-align: left; }
.layui-table-header .layui-table-cell { white-space: normal; text-overflow: inherit; overflow: visible; }

@15810208908 15810208908 mentioned this pull request May 16, 2024
Open
4 tasks
@15810208908
格式化统一
9d428c3 
格式化统一，把80字符自动换行的代码都统一到一行（换满行后自动换行处理），80字符就换行这个默认格式的玩意有点反人类了
@15810208908
统一格式
14ff879 
增加在父容器内全视口布局（在父容器使用rsseasy类名），（填充满父容器，工具栏、分页栏固定在上下，数据表格高度自动但不超过父容器去掉工具栏与分页栏后的可视高度，当数据行内容超出时，显示滚动条）
增加自定义工具栏按钮及分隔符
@15810208908
优化及升级
b1d6fbc 
1、优化了列计算方式（bug修复）；
2、增加了参数：singleSelect，当采用复选框样式时，只能选择一个；
checkOnClick：当点击行时，选中当前行中的单选或复选框；
onSelectRow：当选择行时的回调方式（idx, rows）,idx:行号,rows：行数据
onCellEdited：当编辑框值改变后执行（idx, rows, params） //params:{ "oldValue": 10, "value": 2}
@15810208908 15810208908 marked this pull request as ready for review May 17, 2024 04:22
@15810208908
Update table.js
1bfaf50
@15810208908
增加选择行功能
f84a631 
增加方法：selectRow(index)，指定选择指定索引行；
优化当没有单选或复选列时，相关的选择交互及样式，同时调整当设置singleSelect:true时采用复选框样式时，但点击全选时，默认选择第一行
@15810208908
Copy link
Author

相关更新后的实例：
image

@15810208908
Copy link
Author

实际界面：
image

sentsim
sentsim requested changes May 17, 2024
View reviewed changes
Copy link
Member

@sentsim sentsim left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感谢您的贡献。
由于您的编辑器对代码进行了格式化处理，导致与当前文本的差异过大，难以进行 review，该 PR 先关闭。
建议：同步仓库 main 的最新代码（避免代码冲突），在本地使用 VScode 或 Sublime Text 编辑器修改，再重新创建 PR。

@sentsim
Copy link
Member

sentsim commented May 17, 2024

接下来会对 Layui 配置 Prettier，以保证代码格式的统一。

@sentsim sentsim closed this May 17, 2024
@hulang
Copy link

hulang commented May 22, 2024

之前一直用Visual Studio，现在用vs code，vs code的格式代码，可以的啊。。

@sentsim sentsim mentioned this pull request May 31, 2024
Closed
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sentsim sentsim sentsim requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@15810208908 @Sight-wcg @sentsim @hulang