bootstrap Table DetailView 的使用

中国坏学霸

已于 2024-04-17 17:19:51 修改

阅读量269

点赞数 1

文章标签： bootstrap 前端 html

于 2024-04-17 16:56:31 首次发布

本文链接：https://blog.csdn.net/qq_44714317/article/details/137876219

版权

效果展示图如下：

前要说明：

本次效果实现由python实现，版本为python3。使用的bootstrap框架版本为3.4.1

前端JS实现：

$('#ioppo1').bootstrapTable({

        detailView: true,

        detailFormatter: function (index, row) {
            var alldate = {
                'putype': row[0],
                'shareorderno': row.shareorderno
            };
            console.log(row[0])
            var str = "";
            $.ajax({
                url: "/UnitDataTest/",
                method: 'post',                      //请求方式（*）
                dataType: "json",
                data: alldate,
                success: function (data) {
                    $.each(data, function (index, DesignEchartsDetail) {
                        console.log(DesignEchartsDetail)
                        var num = index + 1;
                        var ondblclick = "dblclick" + num;
                        tree = "tree" + num;
                        str += "<tr id=" + "'" + ondblclick + "'" + " class='detail-view'>";
                        str += "<td style='width: 50px' align='center'></td>";
                        // index 为后端传送的json数据中的键
                        str += "<td style='width: 150px' align='center'>" + index + "</td>";
                        // DesignEchartsDetail 为后端传送的json数据中的值
                        str += "<td style='width: 150px' align='center'>" + DesignEchartsDetail.unitPersonNum + "</td>";
                        str += "<td style='width: 150px' align='center'>" + DesignEchartsDetail.unitKpi + "</td>";

                        str += "</tr>";
                    });
                    //获取到加减号的class .detail-icon，然后获取第index个  拿到他的父亲的父亲（也就是当前行）
                    $(".detail-icon").eq(index).parent().parent().after(str);
                }
            })
            return '';
        },

    })

JS中只对展开的数据进行了处理，无需展开直接放在表格的数据在html的Table中实现，故在Js中我们只需要关注对展开数据的处理即可。

HTML的Table里有个坑，Table中th的个数需要与td的个数完全相同，不然会有异常。

html代码：

<!-- 注意，在该bootstrap版本中，直接在table添加JS代码中的属性无法生效 -->
<!-- <table id="ioppo1" data-detail-view="true" data-detail-formatter="treeDetail">  这些不生效，即没有展开的效果-->
<table id="ioppo1">
    <thead>
    <tr>
        <!-- 这里有个坑，th的个数需要与td的个数完全相同，不然会有异常  -->
        <th style="font-size: 20px">单位名称</th>
        <th style="font-size: 20px">单位人数</th>
        <th style="font-size: 20px">目标值</th>


    </tr>
    </thead>
    <tbody>

    <tr>
        <td>网一</td>
        <td>789</td>
        <td>908</td>
    </tr>
    <tr>
        <td>腾训</td>
        <td>683</td>
        <td>1</td>
    </tr>

    </tbody>
</table>

完整前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/Tree/dist/bootstrap-table/bootstrap-table.min.css">
</head>
<body>


<table id="ioppo1" >
    <thead>
    <tr>
        {#                <th>序号</th>#}
        <th style="font-size: 20px">单位名称</th>
        <th style="font-size: 20px">单位人数</th>
        <th style="font-size: 20px">目标值</th>


    </tr>
    </thead>
    <tbody>

    <tr>
        <td>网一</td>
        <td>789</td>
        <td>908</td>
    </tr>
    <tr>
        <td>腾训</td>
        <td>683</td>
        <td>1</td>
    </tr>

    </tbody>
</table>


<script src="../../static/js/jquery-3.6.0.min.js "></script>
<script src="../../static/Tree/dist/bootstrap-table/bootstrap-table.js "></script>
<script src="../../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

<script>

    $('#ioppo1').bootstrapTable({

        detailView: true,

        detailFormatter: function (index, row) {
            var alldate = {
                'putype': row[0],
                'shareorderno': row.shareorderno
            };
            console.log(row[0])
            var str = "";
            $.ajax({
                url: "/UnitDataTest/",
                method: 'post',                      //请求方式（*）
                dataType: "json",
                data: alldate,
                success: function (data) {
                    $.each(data, function (index, DesignEchartsDetail) {
                        console.log(DesignEchartsDetail)
                        var num = index + 1;
                        var ondblclick = "dblclick" + num;
                        tree = "tree" + num;
                        str += "<tr id=" + "'" + ondblclick + "'" + " class='detail-view'>";
                        str += "<td style='width: 50px' align='center'></td>";
                        // index 为后端传送的json数据中的键
                        str += "<td style='width: 150px' align='center'>" + index + "</td>";
                        // DesignEchartsDetail 为后端传送的json数据中的值
                        str += "<td style='width: 150px' align='center'>" + DesignEchartsDetail.unitPersonNum + "</td>";
                        str += "<td style='width: 150px' align='center'>" + DesignEchartsDetail.unitKpi + "</td>";

                        str += "</tr>";
                    });
                    //获取到加减号的class .detail-icon，然后获取第index个  拿到他的父亲的父亲（也就是当前行）
                    $(".detail-icon").eq(index).parent().parent().after(str);
                }
            })
            return '';
        },

    })
</script>

</body>
</html>

后端代码：

from django.http import JsonResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt


@csrf_exempt
def UnitDataTest(request):

    # 注意，数据格式需按如下格式来进行数据传输
    result = {
         
        "网一子单位1": {"unitPersonNum": 300, "unitKpi": 400},
        "网一子单位2": {"unitPersonNum": 300, "unitKpi": 400},
        "网一子单位3": {"unitPersonNum": 189, "unitKpi": 108},
    }



    return JsonResponse(result)

在找前端bootstrap-table.min.css和bootstrap-table.js时，用了很多时间。这也是第一次在CSDN上编写文档，在CSDN中上传资源不是很熟悉。发布文章后发现了JS和CSS在资源里，有需要的话去那里下载即可。

需要注意：对于bootsrap的DetailView中收起折叠信息是一行一行收起折叠数据的，若要一次性收起所有数据可在bootstrap-table.js代码中，通过查询$tr.next().is('tr.detail-view')快速定位到需要修改的位置，按图中修改代码即可。（如果下载我上传的代码的话，那里已经修改过了，核实一遍即可）

参考博客：https://blog.csdn.net/qq_41247642/article/details/88969322

参考博客：https://blog.csdn.net/dlutsunmingze/article/details/103345027

中国坏学霸

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
bootstrap Table DetailView 的使用

需要注意：对于bootsrap的DetailView中收起折叠信息是一行一行收起折叠数据的，若要一次性收起所有数据可在bootstrap-table.js代码中，通过查询$tr.next().is('tr.detail-view')快速定位到需要修改的位置，按图中修改代码即可。（如果下载我上传的代码的话，那里已经修改过了，核实一遍即可）CSS的代码如下，直接复制即可用。JS中只对展开的数据进行了处理，无需展开直接放在表格的数据在html的Table中实现，故在Js中我们只需要关注对展开数据的处理即可。
复制链接

扫一扫