# xq-tablelist
一个基于Bootstrap5的表格列表，可以在HTML的Table中显示列表数据，并支持添加、更新、删除等操作，同时还可以拖动排序。
## 安装与使用
```bash
npm i xq-tablelist
```
#### typescript方式
在typescript代码中引入xq-tablelist的代码
```ts
import xqTablelist from 'xq-tablelist';
```
同时还需要在HTML页面代码中引入xq-tablelist的scss代码
#### javascript方式
同时还需要在HTML页面代码中引入xq-tablelist的css代码
导入后在相应的HTML文件代码中的Table标签添加class="xq-tablelist"的属性就可以自动运行。
如果想要开启看拖动排序，需要以class属性添加“xq-drag”，例如：class="xq-tablelist xq-drag"。
#### 备注说明
在相应的页面还得引入bootstrap的js和css文件。
#### HTML示例代码
```ts
```
#### 相关的处理接口
###### 自动处理的class
xq-add为添加按钮
xq-edit为编辑按钮
xq-delete为删除按钮
xq-batch为批处理按钮，具体操作为name属性的数据。
###### 修改数据： /change
post信息：{id: "节点的id", field:"更改的字段名称",value: "最新的值"}
返回信息示例：
```json
{
"success":true,
"message": "修改成功.",
"code": 200
}
```
###### 删除数据： /delete
post信息：{id: "节点的id"}
返回信息示例：
```json
{
"success":true,
"message": "删除成功.",
"code": 200
}
```
###### 拖动排序： /b-order
post信息（所有id和序号）：
[
{
"id": "610a012092ee9a2b935bc324",
"ordernum": 1
},
{
"id": "610a012092ee9a2b935bc323",
"ordernum": 2
}
]
返回信息示例：
```json
{
"success":true,
"message": "排序成功.",
"code": 200
}
```