前几天开发的web快速录单插件，收到很多用户私信

前几天因疫情原因蹲在家里，就想着实际项目中需要，抽空开发了etable这个支持键盘操作的web快速录单插件。

没想到的是自从发布到头条和gitee上后，收到了不少朋友的私信和加QQ，已有朋友反馈刚好用到项目上，对其帮助很大，并对插件提出了部分bug和不合理的地方改进意见，真的特别感谢这些朋友对插件提出的众多宝贵建议意见，没想到这个插件这么受开发者朋友欢迎。

本人表示会持续优化完善该插件。

收到反馈私信后，本人第一时间修复了插件的一些已知问题，这里再次感谢大家。

etable 一款基于jQuery的轻量级可编辑表格插件，适用于快速录单等应用场景，支持键盘操作

在此，把这几天修复后的成果重新介绍下：

插件开发背景和介绍

工作中常碰到一种需求，当我们在添加表单数据的时候，其附带的一些相关数据需要一同添加，比如采购录单、添加人员履历、人员经验和获奖证书等情况，而这些相关数据本身又是二维表格记录，所以需要在填写表单同时添加这些相关数据。

为重复利用这些开发成果，本人在网上找了一些相关的插件，但不是太复杂就是操作太繁琐，往往附带了很多添加数据以外的东西，为此本人就抽时间单独开发了etable这个插件，用以解决上述问题。

etable这个插件主要是用在web页面上，方便集成到已有的表单中。该插件基于jQuery开发，主要就是为了实现表格自动转成可编辑状态，并且可以方便的通过鼠标点击或者键盘操作来插入新行和删除旧行。是一款类似于datagrid的轻量级web开发组件。

插件地址

国内开源代码托管平台：https://gitee.com/funsent/etable

国外开源代码托管平台：https://github.com/funsent/etable

插件使用

严格按照如下方式建立页面结构

<div> <!-- 这层结构是必须的 -->
    <table id="etable1">
        <thead> <!-- thead是必须的 -->
            <tr>
                <th style="width:40px;"></th> <!-- 注意是th不是td -->
                <th style="width:100px;">证书名称</th>
                <th style="width:100px;">证书编号</th>
                <th style="width:100px;">颁发日期</th>
                <th style="width:100px;">颁发机构</th>
                <th style="width:100px;">备注</th>
            </tr>
        </thead>

        <tbody> <!-- tbody是必须的 -->
            <tr>
                <td></td> <!-- 这里才是td -->
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

    <table id="etable2">
        <thead> <!-- thead是必须的 -->
            <tr>
                <th style="width:40px;"></th> <!-- 注意是th不是td -->
                <th style="width:100px;">证书名称</th>
                <th style="width:100px;">证书编号</th>
                <th style="width:100px;">颁发日期</th>
                <th style="width:100px;">颁发机构</th>
                <th style="width:100px;">备注</th>
            </tr>
        </thead>

        <tbody> <!-- tbody是必须的 -->
            <tr>
                <td></td> <!-- 这里才是td -->
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

引入jQuery.js、layer.js、laydate.js、etable.js

# git clone https://gitee.com/funsent/etable.git

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/laydate/laydate.css" />
<script src="js/laydate/laydate.js"></script>
<script src="js/layer/layer.js"></script>
<script src="../src/etable.js"></script>

jQuery、layer、laydate 可自行到相关官网下载，或使用etable插件目录的现有文件

初始化，两个table转成可编辑的表格

let values = {0:'禁用', 1:'启用'}; // select下拉框的可选数据来源

funsent.etable.init('#etable1', {
    tag: 'etable1_tag',
    row_number: 3,
    editable_row_max: 10,
    enable_keyboard: true,
    enable_tab_insert: true,
    enable_button: true,
    columns: [
        0,//{type:'checkbox', name:'id', value:'', readonly:false},
        {type:'text', name:'name', value:'', align:'left', readonly:false},
        {type:'text', name:'certno', value:'', align:'left', readonly:false},
        {type:'date', name:'issue_time', value:'', align:'center', readonly:true},
        {type:'text', name:'issue_body', value:'', align:'left', readonly:false},
        {type:'select', name:'remark', value:'1', align:'left', readonly:false, values:values, style:{padding:'4px 4px 5px'}},
    ]
});

funsent.etable.init('#etable2', {
    tag: 'etable2_tag',
    row_number: 3,
    editable_row_max: 10,
    enable_keyboard: true,
    enable_tab_insert: true,
    enable_button: true,
    columns: [
        {type:'checkbox', name:'id', value:'', readonly:false},
        {type:'text', name:'name', value:'', align:'left', readonly:false},
        {type:'text', name:'certno', value:'', align:'left', readonly:false},
        {type:'date', name:'issue_time', value:'', align:'center', readonly:true},
        {type:'text', name:'issue_body', value:'', align:'left', readonly:false},
        {type:'select', name:'remark', value:'1', align:'left', readonly:false, values:values, style:{padding:'4px 4px 5px'}},
    ]
});

以上步骤后就完成了etable插件的页面载入和使用

数据收集

如果需要提交表单数据到后台，可用如下方法

// 获取方法一：参数以字符串样式给出
let arr = funsent.etable.data('#etable1'); // 获取etable1数据
let arr = funsent.etable.data('#etable2'); // 获取etable2数据

// 获取方法二: 参数以dom对象或jQuery对象形式给出
let arr = funsent.etable.data(document.querySelector('#etable1')); // 获取etable1数据
let arr = funsent.etable.data(document.querySelector('#etable2')); // 获取etable2数据
let arr = funsent.etable.data($('#etable1')); // 获取etable1数据
let arr = funsent.etable.data($('#etable2')); // 获取etable2数据

// 获取方法三：参数以实例化顺序索引给出
let arr = funsent.etable.data(0); // 获取etable1数据
let arr = funsent.etable.data(1); // 获取etable2数据

// 获取方法四：参数以自定义标签给出
let arr = funsent.etable.data({tag:'etable1_tag'}); // 获取etable1数据
let arr = funsent.etable.data({tag:'etable2_tag'}); // 获取etable2数据

返回的是json对象数组，如果提交到服务器后，则请自行处理

数据填充（回填）


// 输入填充格式，如果从后台返回，则需要时对象数组形式传入
let records = [
    {name:"", age:"", address""},
    {name:"", age:"", address""},
    {name:"", age:"", address""},
    {name:"", age:"", address""}
];

// 同样有如下几种填充方式，任选一种
funsent.etable.fill('#etable1', records);
funsent.etable.fill(document.querySelector('#etable1'), records);
funsent.etable.fill($('#etable1'), records);
funsent.etable.fill(0, records);
funsent.etable.fill({tag:'etable1_tag'}, records);

fill方法返回true表示成功，false表示失败

数据调试

// 新增的info方法用于输出etable内部存储的数据格式，供大家开发调试时使用
console.log(funsent.etable.info());

已实现列类型

序号列（不可编辑，由插件内部自动维护序号）
原始数据列（不可编辑，保持原有td元素的值，或者可选择设置空字符串值）
复选框checkbox列（编辑列，始终居中，可传入默认值，支持常用样式定义）
下拉选择select列（编辑列，可传入默认值和下拉数据源，支持常用样式定义）
普通文本text列（编辑列，可传入默认值，支持常用样式定义）
日期选择date列（编辑列，普通文本text列的变种，默认只选不写）

插件特性

支持列配置，通过传入对象数组配置列，有点类似于datagrid的传参方式
支持参数配置，通过调用config方法，传入json对象格式的参数
支持工具按钮，目前实现了上方插入行、下方插入行、删除行这三个功能
支持键盘按键操作，支持上下左右方向键、回车键、TAB键等操作
支持最后一个元素上按TAB键新增行功能（这点在快速录单中特别需要）
支持获取列数据，可用于表单提交
支持序号自维护（这点也是客户特别需要的）
支持某行某列不启用编辑功能
支持是否启用按键、是否启用工具按钮等独立配置参数、
支持module方式引入

意见建议

联系方式
QQ: 2018708，微信：younggf

加好友时请备注：etable插件

前几天开发的web快速录单插件，收到很多用户私信