0.1.3 • Published 1 year ago
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>