Bootstrap Table -detailView和detailFilter的使用

╰半橙微兮° 2023-01-16 11:16 127阅读 0赞

detailFilter
    属性：data-detail-filter
    Type:Function
    Default:function(index,row){ return true}
    
    detailView
    属性：data-detail-view
    Type:Boolean
    Default:false

<table id="table" data-toggle="table" data-height="460" data-detail-view="true" data-detail-formatter="detailFormatter" data-detail-filter="detailFilter">
        <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
    </table>

<script>
    console.log(data)
    $("#table").bootstrapTable({  data: data })
    
    function detailFormatter(index, row) { 
        //var html=[];
        //$.each(row.children,function(key,value){ 
        //html.push('<p> key is '+key+'</p>')
        //})
        //return html.join("")
        var html = `<ul class="list-unstyled"> <li style="float:left;margin-right:20px;"><b>name</b>:${ row.children["child-name"]}</li> <li style="float:left;margin-right:20px;"><b>price</b>:${ row.children["child-price"]}</li> <li style="float:left;margin-right:20px;"><b>amount</b>:${ row.children["child-amount"]}</li> </ul>`
        return html;
    }
    
    function detailFilter(index, row) { 
        return row.children
        //return index % 2 === 0
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap-table

<head> <meta charset="utf-8"> <title></title> <link rel="stylesh...

痛定思痛。/ 2024年04月17日 05:30/ 0 赞/ 73 阅读

相关 Bootstrap Table -detailView和detailFilter的使用

detailFilter 属性：data-detail-filter Type:Function Default:function(index,

╰半橙微兮°/ 2023年01月16日 11:16/ 0 赞/ 128 阅读

相关 bootstrap-table使用

Bootstrap-table的基本使用这是一款很好的前端分页和表格显示的插件官方地址：[https://bootstrap-table.com/][https_

梦里梦外;/ 2022年10月02日 04:50/ 0 赞/ 228 阅读

相关 bootstrap table使用小记

bootstrap table是一个非常不错的，基于bootstrap的插件，它扩展和丰富了bootstrap表格的操作，如格式化表格，表格选择器，表格工具栏，分页等等。最

待我称王封你为后i/ 2022年08月08日 17:50/ 0 赞/ 171 阅读

相关 bootstrap table使用总结

> 使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：因为之前在官网也找了

墨蓝/ 2022年07月13日 12:22/ 0 赞/ 298 阅读

相关 Bootstrap Table使用整理（三）

一、单元格内容格式化 / data-formatter 扩展处理单元格内容 / $('table1').bootstrapTable({

客官°小女子只卖身不卖艺/ 2022年06月14日 03:46/ 0 赞/ 321 阅读

相关 Bootstrap-table使用教程

-------------------- 前言我们先从Bootstrap-table（以下简称BS-table）的基础使用开始讲起，写法来说，BS-table主要分为

女爷i/ 2022年05月20日 03:12/ 0 赞/ 272 阅读

相关 Bootstrap-table使用小结

1.首先，先上全部配置： $tomcatBootstrapTable = $("connectionInstances").bootstrapTable({ //

淩亂°似流年/ 2022年05月14日 12:19/ 0 赞/ 188 阅读

相关 bootstrap table

1. bootstrap table 1) ：jsp 部分 <div class="panel-body"> <table id="brid">

た入场券/ 2022年05月13日 12:54/ 0 赞/ 218 阅读

相关使用bootstrap Table

bootstrap Table是一个基于ajax异步获取数据的插件可以实现查询分页等多种功能本文博主将从零开始，一步一步的告诉大家如何在前端用bootstrap Tab

落日映苍穹つ/ 2022年03月26日 13:06/ 0 赞/ 914 阅读