JQuery可编辑表格插件etable

简介

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

插件特点：

支持列配置，通过传入对象数组配置列，有点类似于 datagrid 的传参方式

支持参数配置，通过调用 config 方法，传入 json 对象格式的参数

支持工具按钮，目前实现了上方插入行、下方插入行、删除行这三个功能

支持键盘按键操作，支持上下左右方向键、回车键、TAB 键等操作

支持最后一个元素上按 TAB 键新增行功能（这点在快速录单中特别需要）

支持获取列数据，可用于表单提交

支持序号自维护（这点也是客户特别需要的）

支持某行某列不启用编辑功能

支持是否启用按键、是否启用工具按钮等独立配置参数，支持 module 方式引入”

使用

1.  引入 JQuery 和 etable 文件

2. HTML

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

<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>

3.  调用

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'}},
  ]
});

相关链接

GitHub 地址 ：https://github.com/oxcow/eTable

文档地址：https://www.mm.bme.hu/~gyebro/files/ans_help_v182/ans_cmd/Hlp_C_ETABLE.html