建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery可编辑表格插件etable

来源:易助科技网浏览量:42收藏

简介


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