Install

npm install @smallpot/table-layout

opts Attributes

| 参数 | 说明 | 类型 | 是否必传 | 默认值 | |-|-|-|-|-| | xDrag | 是否开启横向拖拽 | Boolean | 可选 | true | | yDrag | 是否开启纵向拖拽 | Boolean | 可选 | true | | rowHeight | 默认行高 | Number | 可选 | 32 | | columnWidth | 默认列宽 | Number | 可选 | 100 | | tableProps | table标签配置项(props) | Object | 可选 | { className:[],style:{},attr:{} } | | tbodyProps | tbody标签配置项(props) | Object | 可选 | { className:[],style:{},attr:{} } | | trProps | tr标签配置项(props) | Object | 可选 | { className:[],style:{},attr:{} } | | tdProps | td标签配置项(props) | Object | 可选 | { className:[],style:{},attr:{} } |

标签配置项(props)

| 字段 | 说明 | 类型 | 是否必传 | 默认值 | |-|-|-|-|-| | className | 标签类名，eg：["aClassName","bClassName"] | Array | 可选 | [] | | style | 标签内联样式，eg：{ color:"red",backgroundColor:"green" } | Object | 可选 | {} | | attr | 标签自定义属性，eg：{ isOpen:true } | Object | 可选 | {} |

Events

| 方法名 | 说明 | 参数 | 是否必传 | 默认值 | |-|-|-|-|-| | active | 对象初始化，启用事件监听，这个方法必须执行 | - | - | - | | mergeTdFn | 合并选中单元格 | - | - | - | | disassemblyFn | 拆解选中单元格 | - | - | - | | delEntireColumn | 删除选中单元格整列 | - | - | - | | delEntireRow | 删除选中单元格整行 | - | - | - | | insertColumnBefore | 选中单元格左侧插入列 | Number | 可选 | 1 | | insertColumnAfter | 选中单元格右侧插入列 | Number | 可选 | 1 | | insertRowAhead | 在选中单元格前方插入行 | Number | 可选 | 1 | | insertRowBehind | 在选中单元格后方插入行 | Number | 可选 | 1 | | cancelAllSelected | 取消选中单元格 | - | - | - | | setOpts | 设置opts | Object | 必填 | {} | | setSelectAreaStyle | 设置选择区域样式 | Object | 可选 | { width:"",height:"",boxSizing:"border-box",backgroundColor:"rgba(0, 0, 0, 0.1)",border:"2px solid rgb(31, 187, 125)",position: "absolute",left:"",top:"",pointerEvents:"none"} | | getSelectArr | 获取选中单元格 | - | - | - |

Example

<div class="menu">
     <button type="button" id="mergeTd" >合并</button>
     <button type="button" id="insertColumnAfter">右侧插入列</button>
</div>

<table id="tableBox">
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>


<script type="module">
  import TableLayout from "@smallpot/table-layout/lib"

  let obj=new TableLayout(document.getElementById("tableBox"),{
    yDrag:false,//是否开启纵向拖拽
    tableProps:{
      className:[],
      style:{},
      attr:{}
    }
  });

  obj.active();//这个方法必须执行

   document.getElementById("mergeTd").addEventListener('click',e=>{
      obj.mergeTdFn();
   })
   document.getElementById("insertColumnAfter").addEventListener('click',e=>{
      obj.insertColumnAfter(1);
   })

</script>