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

作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。废话少说，下面开始进入主题！

先看效果

上图为固定表头 + 嵌套表格 + 可展开列 + MVVM编辑表格数据等功能测试效果。

主要配置代码

<table class="table" data-max-height="500">
    <thead>
    <tr>
        <th data-type="index" data-text></th>
        <!-- 注解① -->
        <th data-type="expand">...</th>
        <th data-type="selection" data-selection="checkbox"></th>
        <th data-type="text" data-prop="name">文本</th>
        <th data-type="enum" data-prop="gender" data-enum='{"MALE":"男","FEMALE":"女"}'>枚举</th>
        <th data-type="date" data-prop="date" data-date-format="yyyy-MM-dd hh:mm:ss:S" data-text="注册时间"></th>
        <th data-type="html" data-prop="note">简介</th>
        <th data-type="html" data-prop="note" data-writable>编辑简介</th>
        <th data-type="date" data-prop="date" data-date-format="yyyy-MM-dd hh:mm:ss:S" data-writable>编辑注册时间</th>
        <!-- 注解② -->
        <th data-type="enum" data-prop="gender" data-writable data-enum='{"MALE":"男","FEMALE":"女"}' data-text="编辑性别"></th>
        <!-- 注解③ -->
        <th data-type="template" data-text="操作"></th>
    </tr>
    </thead>
</table>

• 注解①：展开行模板

<th data-type="expand">
    <!-- 展开行模板 -->
    <div data-expand>
        <table class="table" style="color:#AAA; display:none;".../table>
    </div>
</th>

• 注解③：可编辑单元格模板

<th data-type="enum" data-prop="gender" data-writable data-enum='{"MALE":"男","FEMALE":"女"}' data-text="编辑性别">
    <div data-writable>
        <label>
            <select name>
                <option value="MALE">男</option>
                <option value="FEMALE">女</option>
            </select>
        </label>
    </div>
</th>

• 注解③：单元格内容显示模板

<th data-type="template" data-text="操作">
    <div data-template>
        <a href="javascript:" class="row-data">Get Data</a>
        <button class="update-name">Update Name</button>
    </div>
</th>

• Javascript主要代码

// 模拟数据
var data = [];
for (var i = 0; i < 5; i++) {
    data.push({
        name: 'name_' + (i + 1),
        gender: 'MALE',
        date: new Date().getTime(),
        note: '我是<b>加粗</b>内容',
        birthday: new Date().getTime()
    });
}

// 应用插件
var table = jsu.Table($('.grid_2'), true, true);
table.data(data);

如何使用

详细API可在控制台查阅jsu.Table.dir或进入/test.../index.html查阅，这里列出部分内容：

设计目的

作者准备为jsu.Table实现以下功能:

1. 基础表格数据展示(已实现)
2. 列顺序调整（已实现）
3. 列宽调整（已实现）
4. 表头固定（已实现）
5. 左侧列固定（已实现）
6. 右侧列固定（开发中）
7. 用户可配置隐藏/显示部分列数据
8. 单元格纵向合并 ---- 合并行
9. 单元格横向合并 ---- 合并列

其中4 / 5 / 6可参考office word的冻结功能。组件结构图：

遇到的问题

• 固定表头宽度何时确定 / 以及修正?
  开始调整列宽时隐藏$top，调整结束后显示$top。由于使用中可能存在内容动态变更（并非通过 table.data API去修改，导致宽度超出当前列宽/行高），通过内部API checkScroll()来修正。
• 多部件表格时交换列顺序无效（$top未交换表头， $main交换正常）?
  在启用固定表头/列时，暂时取消列顺序交换功能
• 左侧固定列滚动时机
  当启用左侧固定列时如果同时配置了表头固定，通过添加左侧顶部固定表头实现上下滚动
• 左侧固定列与expand类型内容如何同步
  待修复
• 左侧固定列隐藏滚动条后，鼠标在左侧固定列无法滚动表格
  待修复