@smallpot/demo01/README.md

``` npm install table-layout ```

## Install

```
npm install 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 TableJar from "./TableJar.js"

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

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

</script>
```