# easytable

**Repository Path**: yuanhang2018/easytable

## Basic Information

- **Project Name**: easytable
- **Description**: 无任何第三方依赖，基于原生js实现的高效动态表格
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2019-01-23
- **Last Updated**: 2022-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# easytable

#### 介绍
无任何第三方依赖，基于原生js实现的高效动态表格


#### 快速开始
在网页中引入以下文件

```
<script src="../lib/easytable.js"></script>  
<link type="text/css" rel="stylesheet" href="../lib/easytable.css" />  
```

创建表格   


```
<table id='table'></table> 

<script>
let table = new easytable('table',option);
</script>
```



#### 配置说明        

 **option**                 

| 名称 |  类型  |  说明  |
| -- | -- | -- |
|    cols  |  数组  |  列配置，由多个col组成 ,示例：[{ title: '名字', field: 'name' },{ title: '学号', field: 'num' }, { title: '成绩', field: 'mark' }, { title: '性别', field: 'sex' }] |
|  data  |   数组 |  表格数据 ,注意数据字段名须与列字段名值一致，示例：[{ name: 'yh', num: 123, mark: 99, sex: '男' }, { name: 'yh', num: 123, mark: 99, sex: '男' }, { name: 'yh', num: 123, mark: 99, sex: '男' }]|


 **option->cols->col**               

|  名称  |  类型  |  说明  |
| -- | -- | -- |
|  field  |  字符串  |  列字段  例如：name|
|  title  |  字符串  |  列标题，例如 ：名字|
|  width |  字符串  |  列宽度， 例如：80px |
|  minWidth |  字符串  | 列最小宽度，例如：80px   |
|  editable  |  布尔值  |  是否可编辑，值为true或false,默认为false  |
|  type |  字符串  |  列类型，选项如下：  <br>1.normal(普通)；<br>2.index(序号)；<br>3.radio(单选)；<br>4.checkbox(多选)；<br>5.select(下拉框)；<br>6.button(按钮)；<br> 默认值为 normal  |
|  buttons  |  数组  |  按钮配置,由多个button组成  |
|  select|  数组  |  下拉框配置,由多个selectOpt组成  |


 **option->cols->col->buttons->button**           
          
|  名称  |  类型  |  说明  |
| -- | -- | -- |
|  text|  字符串  |  按钮文字  例如：删除|
|  click|  函数  |  按钮点击回调函数，参数如下：<br>1.col(列)<br>2.rawData(行数据)<br>3.index(行号)<br>4.tabelObj(表格对象)|


 **option->cols->col->select->selectOpt**                 

|  名称  |  类型  |  说明  |
| -- | -- | -- |
|  text|  字符串  |  选项文本  例如：男生|
|  value|  字符串  |  选项值   例如：boy|


#### 对象属性说明
|  名称  |    说明  |
| -- | -- |
|  id|    表格id|
|  tableElem|  表格元素 |
|  cols|   表格列|
|  data|  表格数据|


#### 对象方法说明
|  名称  |    参数  |   说明  |
| -- | -- | -- |
|  setOption|    option：表格参数 | 设置表格参数 |
|  render|    无 | 重新渲染表格 |
|  getSelectedData|  无          |             |
|  getSelectedIndex|   无        |             |
|  appendRaw|   rawData：行数据；例如：{ name: 'xx', num: 789, mark: 54, sex: '女' }     |增加一行，当rawData为空时，增加一行空行                |
|  deleteRaw|    rawIndex：行号     |删除行                   |
|  deleteRaws|    indexArr：行号数组    |删除多行                 |

#### 官方示例
示例位于项目demo文件夹下，可直接点击查看