npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

xq-admin-page

v1.0.10

Published

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

Downloads

9

Readme

xq-admin-page

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

安装与使用

npm i xq-admin-page

typescript方式

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

import xqAdminPage from 'xq-admin-page';

同时还需要在HTML页面代码中引入xq-admin-page的scss代码

javascript方式

同时还需要在HTML页面代码中引入xq-admin-page的css代码

导入后在相应的HTML文件代码中的Table标签添加class="xq-table"的属性就可以自动运行。 如果想要开启看拖动排序,需要以class属性添加“xq-drag”,例如:class="xq-table xq-drag"。 如果某一列要设置排序按钮,可以以class属性添加“xq-order",例如:姓名

备注说明

在相应的页面还得引入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-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: "最新的值"} 返回信息示例:

{
    "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
}