摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。
作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。废话少说，下面开始进入主题！先看效果
上图为固定表头 + 嵌套表格 + 可展开列 + MVVM编辑表格数据等功能测试效果。
| ... | 文本 | 枚举 | 简介 | 编辑简介 | 编辑注册时间 |
|---|
注解①：展开行模板
注解③：可编辑单元格模板
注解③：单元格内容显示模板
Javascript主要代码
// 模拟数据 var data = []; for (var i = 0; i < 5; i++) { data.push({ name: "name_" + (i + 1), gender: "MALE", date: new Date().getTime(), note: "我是加粗内容", birthday: new Date().getTime() }); } // 应用插件 var table = jsu.Table($(".grid_2"), true, true); table.data(data);如何使用详细API可在控制台查阅jsu.Table.dir或进入/test.../index.html查阅，这里列出部分内容：
设计目的作者准备为jsu.Table实现以下功能:
基础表格数据展示(已实现)
列顺序调整（已实现）
列宽调整（已实现）
表头固定（已实现）
左侧列固定（已实现）
右侧列固定（开发中）
用户可配置隐藏/显示部分列数据
单元格纵向合并 ---- 合并行
单元格横向合并 ---- 合并列
其中4 / 5 / 6可参考office word的冻结功能。组件结构图：
遇到的问题固定表头宽度何时确定 / 以及修正?
开始调整列宽时隐藏$top，调整结束后显示$top。由于使用中可能存在内容动态变更（并非通过 table.data API去修改，导致宽度超出当前列宽/行高），通过内部API checkScroll()来修正。多部件表格时交换列顺序无效（$top未交换表头， $main交换正常）?
在启用固定表头/列时，暂时取消列顺序交换功能左侧固定列滚动时机
当启用左侧固定列时如果同时配置了表头固定，通过添加左侧顶部固定表头实现上下滚动左侧固定列与expand类型内容如何同步
待修复左侧固定列隐藏滚动条后，鼠标在左侧固定列无法滚动表格
待修复文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100054.html
相关文章
jsu系列之表格组件 ---- jsu.Table
摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。 作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...
jsu系列之表格组件 ---- jsu.Table
摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。 作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...
【从零入门系列-5】Spring Boot 之 前端展示
摘要：务必在之前引入最新的核心文件为了偷懒，我们这里引入的第三方库文件都是采用的方式，也可以选择把库下载到本地然后再引用。 文章系列 【从零入门系列-0】Spring Boot 之 Hello World 【从零入门系列-1】Spring Boot 之 程序结构设计说明 【从零入门系列-2】Spring Boot 之 数据库实体类 【从零入门系列-3】Spring Boot 之 数据库操作...
【从零入门系列-5】Spring Boot 之 前端展示
摘要：务必在之前引入最新的核心文件为了偷懒，我们这里引入的第三方库文件都是采用的方式，也可以选择把库下载到本地然后再引用。 文章系列 【从零入门系列-0】Spring Boot 之 Hello World 【从零入门系列-1】Spring Boot 之 程序结构设计说明 【从零入门系列-2】Spring Boot 之 数据库实体类 【从零入门系列-3】Spring Boot 之 数据库操作...
vue总结系列--组件化
摘要：触发事件可以携带数据，这些数据被用于传递给绑定了事件的其它组件的回调函数上，进而被传递给其它组件。父组件可以在回调函数里做任何事情，颇有灵活性。一般情况下，父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性，这一篇博文就来梳理vue的一个很重要的特性，组件化。自定义组件之于vue，其意义不亚于函数之于C，java之类的编程语言。函数是计算机科学...
发表评论
0条评论
everfly
男|高级讲师
TA的文章
阅读更多
日本什么主机好-买什么游戏主机好？
阅读 1550·2021-09-22 15:52
iis主机a是什么-主机头是什么？
阅读 3458·2021-09-22 14:59
Django下使用celery 异步发送短信验证码
阅读 2841·2021-09-02 15:12
Virtono夏季促销：1核/1G内存/25G [email protected] 可选美国/德国/
阅读 971·2021-08-20 09:35
听说你还不理解JavaScript闭包
阅读 1577·2019-08-30 14:09
记一个ios滚动穿透问题
阅读 2708·2019-08-30 13:56
Vue keepAlive 数据缓存工具，实现返回上一个页面浏览的位置；
阅读 1645·2019-08-26 18:27
pm2 命令使用
阅读 3362·2019-08-26 13:37
最新活动
阅读需要支付1元查看
