资讯专栏INFORMATION COLUMN

jsu系列之表格组件 ---- jsu.Table

soasme / 2368人阅读

摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。

作者注: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系列所有组件开发过程...

    everfly 评论0 收藏0
  • jsu系列表格组件 ---- jsu.Table

    摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...

    张巨伟 评论0 收藏0
  • 【从零入门系列-5】Spring Boot 前端展示

    摘要:务必在之前引入最新的核心文件为了偷懒,我们这里引入的第三方库文件都是采用的方式,也可以选择把库下载到本地然后再引用。 文章系列 【从零入门系列-0】Spring Boot 之 Hello World 【从零入门系列-1】Spring Boot 之 程序结构设计说明 【从零入门系列-2】Spring Boot 之 数据库实体类 【从零入门系列-3】Spring Boot 之 数据库操作...

    freewolf 评论0 收藏0
  • 【从零入门系列-5】Spring Boot 前端展示

    摘要:务必在之前引入最新的核心文件为了偷懒,我们这里引入的第三方库文件都是采用的方式,也可以选择把库下载到本地然后再引用。 文章系列 【从零入门系列-0】Spring Boot 之 Hello World 【从零入门系列-1】Spring Boot 之 程序结构设计说明 【从零入门系列-2】Spring Boot 之 数据库实体类 【从零入门系列-3】Spring Boot 之 数据库操作...

    Mr_houzi 评论0 收藏0
  • vue总结系列--组件

    摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...

    cuieney 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<