xq-tablelist

一个基于Bootstrap5的表格列表，可以在HTML的Table中显示列表数据，并支持添加、更新、删除等操作，同时还可以拖动排序。

安装与使用

npm i xq-tablelist

typescript方式

在typescript代码中引入xq-tablelist的代码

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示例代码

<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-tablelist 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: "最新的值"} 返回信息示例：

{
    "success":true,
    "message": "修改成功.",
    "code": 200
}

删除数据： /delete

post信息：{id: "节点的id"} 返回信息示例：

{
    "success":true,
    "message": "删除成功.",
    "code": 200
}

拖动排序： /b-order

post信息（所有id和序号）： [ { "id": "610a012092ee9a2b935bc324", "ordernum": 1 }, { "id": "610a012092ee9a2b935bc323", "ordernum": 2 } ] 返回信息示例：

{
    "success":true,
    "message": "排序成功.",
    "code": 200
}