xq-admin-page/README.md

基于Bootstrap5的表格列表，主要有后台管理的列表与搜索、添加、编辑、删除、导出等功能，同时列表支持自定义排序、分页大小等。

# xq-admin-page

一个基于Bootstrap5的后台管理的相关页面，主要包括管理列表、添加、编辑、删除、导出等操作，可以在HTML的Table中显示列表数据，并支持添加、更新、删除等操作，同时还可以拖动排序、自定义排序、分页大小等。

## 安装与使用

```bash
npm i xq-admin-page
```

#### typescript方式
在typescript代码中引入xq-admin-page的代码

```ts
import xqAdminPage from 'xq-admin-page';
```

同时还需要在HTML页面代码中引入xq-admin-page的scss代码
<link rel="stylesheet" href="./scss/xq-admin-page.scss">

#### javascript方式

<script type="text/javascript" src="/xq-admin-page/js/xq-admin-page.min.js"></script>
同时还需要在HTML页面代码中引入xq-admin-page的css代码
<link rel="stylesheet" href="/xq-admin-page/xq-admin-page.min.css">

导入后在相应的HTML文件代码中的Table标签添加class="xq-table"的属性就可以自动运行。
如果想要开启看拖动排序，需要以class属性添加“xq-drag”，例如：class="xq-table xq-drag"。
如果某一列要设置排序按钮，可以以class属性添加“xq-order",例如：<th class="xq-order">姓名</th>
#### 备注说明
在相应的页面还得引入bootstrap的js和css文件。

## [点击查看演示](https://www.xqkeji.cn/demo/xq-admin-page/)

#### HTML示例代码
```ts
<form enctype="application/json" method="post">
<div class="table-responsive">
    <table id="advert_table" class="table table-bordered xq-table-hover xq-table-striped xq-table xq-drag" pid="60c1dbe1856e892084014e33">
        <thead>
            <tr class="text-center">
                <th style="text-align:center;width:60px;">选择</th>
                <th style="text-align:center;width:100px;">广告类型</th>
                <th style="text-align:center;width:160px;">广告名称</th>
                <th style="text-align:center;width:auto;">链接地址</th>
                <th style="text-align:center;width:60px;">序号</th>
                <th style="text-align:center;width:60px;">状态</th>
                <th style="text-align:center;width:120px;">创建日期</th>
                <th style="text-align:center;width:120px;">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr id="610a012092ee9a2b935bc323" class="text-center">
                <td>
                    <input type="checkbox" id="id" name="610a012092ee9a2b935bc323[id]" value="610a012092ee9a2b935bc323" class="form-check-input" />
                </td>
                <td>文字广告</td><td>文字广告1</td>
                <td>http://www.xqkeji.cn/</td>
                <td>3</td>
                <td style="width:70px;">
                    <div style="width:32px;margin:auto;" class="form-check form-switch">
                        <input type="checkbox" id="status_610a012092ee9a2b935bc323" name="610a012092ee9a2b935bc323[status]" value="1" class="form-check-input" checked="checked">
                    </div>
                </td>
                <td>2021-08-04</td>
                <td>
                    <input type="button" id="" name="" value="编辑" class="btn btn-secondary btn-sm xq-edit" style="margin-right:5px;" />
                    <input type="button" id="" name="" value="删除" class="btn btn-danger btn-sm xq-delete" style="margin-right:5px;" />
                </td>
            </tr>
            <tr id="610a012092ee9a2b935bc324" class="text-center">
                <td>
                    <input type="checkbox" id="id" name="610a012092ee9a2b935bc324[id]" value="610a012092ee9a2b935bc324" class="form-check-input" />
                </td>
                <td>文字广告</td><td>文字广告2</td>
                <td>http://www.xqkeji.cn/</td>
                <td>4</td>
                <td style="width:70px;">
                    <div style="width:32px;margin:auto;" class="form-check form-switch">
                        <input type="checkbox" id="status_610a012092ee9a2b935bc324" name="610a012092ee9a2b935bc324[status]" value="1" class="form-check-input" checked="checked">
                    </div>
                </td>
                <td>2021-08-04</td>
                <td>
                    <input type="button" id="" name="" value="编辑" class="btn btn-secondary btn-sm xq-edit" style="margin-right:5px;" />
                    <input type="button" id="" name="" value="删除" class="btn btn-danger btn-sm xq-delete" style="margin-right:5px;" />
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="text-center">
                <td>
                    <input type="checkbox" id="check_all" name="check_all" class="form-check-input xq-check-all" />
                </td>
                <td class="text-start" colspan="99">
                    <input type="button" id="add" name="add" value="添加" class="btn btn-primary me-1 xq-add" />
                    <input type="button" id="b-delete" name="b-delete" value="删除" class="btn btn-danger mr-1 xq-batch" />
                </td>
            </tr>
        </tfoot>
    </table>
</div>
</form>	
```


#### 相关的处理接口
###### 自动处理的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
}

```