首页 > 其他分享 >jquery 封装 bootstrap table

jquery 封装 bootstrap table

时间:2024-06-09 16:12:29浏览次数:23  
标签:jquery sort const title bootstrap cols field table true

简易代码如下:

JS 如下:

$.fn.extend({
    table: function (opts) {

        const tableConfig = {
            mode: 'debug'
        }

        const tablePreset = {
            limit: 10,
        }

        // The instance
        const Table = {
            page: 1,
        }

        const { data, cols, limit } = opts

        if (tableConfig === 'debug') {
            Table.options = opts
        } else {
            Table.options = {
                cols: cols,
                limit: limit,
            }
        }


        const $rootEle = $(this)
        const tHead = Table.tHead = $rootEle.find('thead')
        const tBody = Table.tBody = $rootEle.find('tbody')


        //#region Render

        function renderTableHead() {
            const ths = cols.map(z => {
                const sortable = z.sort ? ` sortable` : ''
                const dataField = ` data-field="${z.field}"` || ''
                return `<th scope="col"${dataField}${sortable}>${z.title || ''}</th>`
            })
            tHead.html(`<tr>${ths.join('')}</tr>`)
        }

        function renderTableBody() {

            const renderRows = getRenderRows()

            const _trs = renderRows.map((row, i) => {
                const _cols = cols.map((col, j) => {

                    if (col.type === 'index') {

                        const checkbox = col.checkbox ? `<input type="checkbox" style="margin-right: 7px;" />` : ''

                        return `<th scope="row">${checkbox}${i + 1}</th>`
                    }


                    return `<td>${row[col.field] || ''}</td>`
                })

                return `<tr data-index="${i}">${_cols.join('')}</tr>`
            })
            tBody.html(_trs.join(''))
        }

        //#endregion

        //#region Template



        //#endregion


        //#region Utils

        const getPagedRows = (rows) => {
            const pageIndex = Table.page;
            const pageSize = limit || tablePreset.limit;

            const startIndex = (pageIndex - 1) * pageSize;
            const stopIndex = startIndex + pageSize;

            return (rows || data).slice(startIndex, stopIndex);
        }

        const getRenderRows = () => {

            if (limit) {
                return getPagedRows()
            }

            return data
        }

        //#endregion


        renderTableHead()
        renderTableBody()
    }
})

HTML:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>jquery-table</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
    <style>
        body,
        #root {
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            overflow: hidden;
        }

        #root {
            display: flex;
            place-items: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="container">
            <table id="jTable" class="table table-striped table-dark">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.1-beta1/mock-min.js"
        integrity="sha512-C6haFoe26x0I8R2daqjCKMYlOvq++RXhACOBluxWpZdScv5kuIMrQtxAVweoRqWUlvF0bKtCSEI0f561tRQhtw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="/table.js"> </script>
    <script>
        let data = [{
            name: 'hello',
            gender: 'boy',
            age: '19',
            city: 'beijing',
            phone: '15423235656',
            email: '[email protected]',
            identity: '364202200102121245',
        }]


        for (let i = 0; i < 36; i++) {
            data.push({
                name: 'hello',
                gender: 'boy',
                age: '19',
                city: 'beijing',
                phone: '15423235656',
                email: '[email protected]',
                identity: '364202200102121245',
            })

        }

        const cols = [
            {
                type: 'index',
                checkbox: true,
                title: '#'
            },
            {
                field: 'name',
                title: 'name',
                sort: true,
            },
            {
                field: 'gender',
                title: 'gender',
                sort: true,
            },
            {
                field: 'age',
                title: 'age',
                sort: true,
            },
            {
                field: 'city',
                title: 'city',
                sort: true,
            },
            {
                field: 'phone',
                title: 'phone',
                sort: true,
            },
            {
                field: 'email',
                title: 'email',
                sort: true,
            },
            {
                field: 'identity',
                title: 'identity',
                sort: true,
            },
        ]

        $('#jTable').table({
            data: data,
            cols: cols,
            limit: 10,
            events: {
                'action-delete': function (row) {

                },
                'action-check': function (row) {

                }
            }
        })
    </script>
</body>

</html>

标签:jquery,sort,const,title,bootstrap,cols,field,table,true
From: https://www.cnblogs.com/fires/p/18239645

相关文章

  • Stable Diffusion教程
    第一章、前言StableDiffusion介绍OpenArt介绍提示词(Prompt)工程介绍先说一下前言能学到什么吧,对StableDiffusion、OpenArt这个平台、提示词工程等简介,然后以一系列提问的方式对提示词的格式进行了示例:这一系列的提问是有逻辑的,如果你经常在为写提示词不知道该从何开始......
  • element-ui el-table表格固定表头代码示例
    在使用element-ui的el-table组件时,固定表头是一个常见的需求,特别是当表格内容较多时。以下是固定表头的一个基本示例代码:<template><el-table:data="tableData"style="width:100%"height="300px"><el-table-columnprop="date"label="日期"......
  • windows11搭建 stable-diffusion-webui
    2024年5月22日23:46:57建议电脑配置电脑配置:Intel(R)Core(TM)Ultra5125H1.20GHz32.0GB(31.6GB可用)系统:windows11注意:最好挂上外网,或者设置好访问github的dns,不然很可能失败1,安装Anacondahttps://www.anaconda.com/download/success下载:64-BitGraphical......
  • 执行 flux bootstrap 时 ansible 超时
    我正在使用HyperledgerBevel管理HyperledgerFabric2.2网络。到目前为止,它一直运行正常,但我在执行游戏本时没有尝试执行一些维护操作。ansible-playbookplatforms/shared/configuration/site.yaml-e"@./build/network-iprd-qa.yaml";这个方法曾经有效,但现在当fl......
  • 免费实用!16款 Stable Diffusion 插件全面测评
    一、前方高能1.prompt-all-in-one提示词翻译补全(自动翻译)推荐指数:☆☆☆☆☆易上手程度:☆☆☆☆☆使用频率:☆☆☆☆☆能做什么:prompt-all-in-one提示词翻译补全可以帮助英文不好的用户,快速弥补英文短板。其中包含,中文输入自动转英文、自动保存使用描述词、描述词历史......
  • Meta最新路径搜索算法 Beyond A*: Better Planning with Transformers via Search Dyn
    这篇论文前两个月刚刚放出,研究了如何让人工智能(AI)更好地解决复杂的规划问题,比如在迷宫中寻找最短路径,或者推箱子游戏(Sokoban)中把箱子全部推到指定位置。传统上,这类问题通常使用专门的规划算法来解决,比如A*搜索算法。但是,训练AI模型(如Transformer)来解决这些问题......
  • BLIP-2: Bootstrapping Language-Image Pre-training with Frozen Image Encoders and
    Motivation&Abs端到端大规模视觉语言预训练的开销极大。为此,本文提出了BLIP2,利用现成的冻住的imageencoder以及LLM引导视觉语言预训练。模态差距:通过两阶段训练的轻量级的QueryTransformer(Q-Former)弥补。第一阶段:从冻结的imageencoder引导VL学习;第二阶段:从冻结的LLM引导视......
  • bootstrap.css-表单-登录案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--引入bootstrap.css样式--><linkrel="stylesheet"href="static/plugin......
  • 原来Stable Diffusion是这样工作的
    stablediffusion是一种潜在扩散模型,可以从文本生成人工智能图像。为什么叫做潜在扩散模型呢?这是因为与在高维图像空间中操作不同,它首先将图像压缩到潜在空间中,然后再进行操作。在这篇文章中,我们将深入了解它到底是如何工作的,还能够知道文生图的工作方式与图生图的的工作方式有......
  • 使用jQuery实现鼠标移入展开导航的二级菜单栏
    1、首先写出html结构(举个例子)<divclass="nav"><ul><li><ahref="#">全国导航</a><ulclass="nav_meun"><li><ahref=&qu......