bootstrap-table表格点击行展开底部详情页

原创已于 2024-05-16 21:12:23 修改 · 810 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html #bootstrap-table #detailview

于 2024-05-16 18:13:36 首次发布

BootStrap 同时被 2 个专栏收录

5 篇文章

订阅专栏

JS/jQuery

5 篇文章

订阅专栏

简介

本文编写了在使用bootstra-table组件时，点击行展示行详情页（不再是单纯点击"+-"号才能展开关闭了）

环境

建议去若依框架下面取，地址：

RuoYi: 🎉 基于SpringBoot的权限管理系统易读易懂、界面简洁美观。核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用

特别鸣谢：感谢若依爸爸造福程序员

正文

1、详情页内容文本

    /**
     * 详情页内容
     * @param index
     * @param row
     * @returns {string}
     */
    function detailFormatter(index, row) {
            var html = [];
            $.each(row, function(key, value) {
                if(key == "content"){
                    html.push('<p><b>日志信息:</b> ' + value + '</p>');
                }
            });
            return html.join('');
    }

2、默认展开详情页（默认是不展开的，我们借助onPostBody事件在渲染完成后执行展开动作）

    /**
     * 默认展开 status = 0 的所在行的详情页
     * @param row
     */
    function expand (row){
        $.each(row,function(i,r){
            if(r.status == 0){
                $("#bootstrap-table").bootstrapTable('expandRow',i);
            }
        })
    }

3、点击行展开详情页（不再仅仅是点击(+-)号）

    /**
     * 点击行触发操作
     * @param row
     * @param e
     */
    function clickRow(row,e){
        let index = e.data('index');
        let isExpand = $(".detail-icon").eq(index).find("i").hasClass("icon-minus");
        if(isExpand){
            $("#bootstrap-table").bootstrapTable('collapseRow',index);
        }else{
            $("#bootstrap-table").bootstrapTable('expandRow',index);
        }
    }

成功