摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。
作者注: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/54708.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条评论
soasme
男|高级讲师
TA的文章
阅读更多
tensorflow
阅读 3547·2023-04-26 02:05
GDI绘制Winform工作流组件、具有独立图层的增删处理、防PPT效果
阅读 1912·2021-11-19 11:30
外贸网站如何选择服务器?外贸网站服务器价格多少钱?
阅读 4155·2021-09-30 09:59
新型硅阳极电池走向市场,有望改变电子设备和电动汽车市场
阅读 3149·2021-09-10 10:51
安科视频监控产品中的远程代码执行漏洞允许黑客入侵设备
阅读 2572·2021-09-01 10:30
raksmart:韩国独立服务器测评(大陆优化线路)
阅读 1443·2021-08-11 11:20
css3 动画(二)贝塞尔曲线
阅读 2575·2019-08-30 15:54
CSS双飞翼布局
阅读 525·2019-08-30 10:49
阅读需要支付1元查看