bootstrap-table 相关问题

Bootstrap Table是一个扩展的Bootstrap表,包含无线电,复选框,排序,分页和其他附加功能。

当选中一行时,整行变黑

在引导表中使用复选框时,所选的每一行都会变黑,我如何管理颜色或者我缺少库或其他东西 已检查引导表 我尝试了 CSS 属性 chan...

回答 1 投票 0

如何向bootstrap-table添加水平滚动条?

我在引导表中遇到问题,其中的列不适合屏幕,所以我想通过在引导表中提供水平滚动条来处理该问题。

回答 3 投票 0

将引导表中所有已检查行的数据存储在数组中

我在我的reactJS应用程序中使用引导表。为了填充该表,我调用一个 api 并将响应映射到该表的行。看起来像这样 我在我的reactJS应用程序中使用引导表。为了填充该表,我调用一个 api 并将响应映射到该表的行。看起来像这样 <TableBody showRowHover={true} deselectOnClickaway={false}> { this.state.MediaFiles.map((item,i)=> ( <TableRow key={i} className={`table-item-${i}`} selected={this.props.selectedRows.includes(i)}> <TableRowColumn className='td-filename'> <div className='item-file-details'> <div className='file-image' style={{backgroundImage: `url('${item.poster.list_thumbnail}')`}}/> <div className='details'> <p className='detail-name'> {item.title} </p> </div> </div> </TableRowColumn> <TableRowColumn> <p className="file-channel">Zee</p> </TableRowColumn> <TableRowColumn> <p className="file-duration">Movie </p> </TableRowColumn> </TableRow> )) } </TableBody> 我想将我签入 {item.title} 的每个文件的 table 保存在 array 中。选中 Id checkbox,然后该 {item.title} 或项目的 row 应附加到 array。当我取消选中它时,数据应该从数组中删除。我的主要问题是如何获取 {item.tiltle} 数据。是否有 onChecked 和 onUnchecked 之类的引导方法? 也许这个答案来得有点晚了;) “onChecked”和“onUnchecked”方法如下: $table.on('check.bs.table uncheck.bs.table' , function (e, row, $row, colname) { // do something getIdSelections($table) }); 如果您单击“全部”复选框,则这将覆盖所有事件 $table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function (e, row, $row, colname) { // do something getIdSelections($table) }); 参数“row”将包含所选行的所有字段,您可以访问类似“row.title”的数据。 这是一个函数,它收集所有 id 并将其作为逗号分隔的字符串返回 function getIdSelections($table) { // collect all table rows which tick box is marked for action and return an array try { return $.map($table.bootstrapTable('getSelections'), function (row) { return row['colname_of_the_id_column']; }); } catch (e) { console.log(arguments.callee.name + ": " + e.message, e); } } 在这里您可以找到所有活动 引导表事件

回答 1 投票 0

引导程序在网格列中固定位置

我被要求看一些引导程序,我以前没有与 BS 合作过。 我需要改变什么才能实现以下目标: 单击按钮时,我想要两个表,左侧的数据表和选项卡...

回答 2 投票 0

bootstrap-table-filter-control选项排序

使用whenzhixin的Boostrap表和过滤控制扩展。 http://bootstrap-table.wenzhixin.net.cn/extensions/#table-filter-control 我希望对选择中显示的选项进行排序...

回答 2 投票 0

使用 bootstrap-table 我无法显示使用 data-url 检索的数据

我正在使用 bootstrap-table,希望从 URL 加载 JSON 数据并将其显示在表中。我尝试遵循库文档,虽然我可以看到数据正在加载,但...

回答 1 投票 0

如何更改 Bootstrap Table Paginator 的位置?

我正在使用 Bootstrap Table 源 CSS。我想将文本和页面大小如下所示从表格底部移动到顶部。这是一个例子。 显示 159 行 [20] 行中的 1 到 20...

回答 2 投票 0

bootstrap-table - 在 getAllSelections 中,我可以只获取某些列吗?

我正在使用 bootstrap-table (https://bootstrap-table.com/)。我通过 ajax 从 Active Directory 加载用户列表,在数据加载后,我想从行中获取两列数据 (cn,dn)

回答 1 投票 0

如何删除引导表中的此边框?

我正在使用 bootstrap 4 上的表; 最后更新 我正在使用 Bootstrap 4 上的表;<div class="col-md-9"><h3>last updated</h3> <div class="liste"> <table class="table table-dark table-md table-responsive-md" id="tablex"> <thead class="thead-inverse"> <tr> <th>#</th> <th>Manga Adı</th> <th>Bölümler</th> <th>Yükleyen</th> <th>Linkler</th> </tr> </thead> <tbody> <tr> <td><i class="fas fa-file-download"></i></td> <td>Deneme deneme</td> <td>1-56</td> <td>libero1i</td> <td>yadi.sk/bilmemne</td> </tr> CSS: #tablex { border-collapse: collapse; border-radius: 1em; overflow: hidden; border: 0px; } #tablex tr, th { padding: 1em; border-bottom: 2px solid white; } 当我添加 border: 0px; 时,我也想删除半径。我怎样才能做到这一点? 我认为您正在查看错误的元素 - 该边框要么位于表格的父元素上,要么位于顶部的标题上。

回答 1 投票 0

带有 symfony 6 和 webpack 的 bootstrap-table 无法编译

我正在尝试更新 symfony 项目及其节点插件。我刚刚发现,在运行我的应用程序时,我收到一个关于 Uncaught bootstrap (not work after that) 表的 webpack 错误: 键入呃...

回答 1 投票 0

在引导表列中过滤多个徽章

我有一个用 bootstrap-table 制作的表格,并且有一列“状态”,其中一个单元格可以包含多个 html 徽章。 我有一个选择数据过滤器控件,但它无法正常工作......

回答 1 投票 0

从控制器接收到的数据显示“bootstrap-table”中的数据

从 Laravel 中的控制器我以这种方式将数据发送到视图 公共静态函数index():工厂|视图 { $products = Products::where('visible',true)->get(); 返回

回答 1 投票 0

Webpack 的引导表错误:无法设置未定义的属性

我正在尝试将 BootstrapTable 库与 Webpack 一起使用。这似乎与 Jquery 的处理方式有关,但我不是 100% 确定。 我收到以下错误(在我尝试添加...

回答 1 投票 0

如何在Nuxt 3中安装Bootstrap Table

我正在尝试在 Nuxt 3 项目中安装 Bootstrap Table,并且我尝试按照 vue 文档中的步骤进行操作。但是我没有成功安装它,因为没有 nuxt 3

回答 1 投票 0

印度货币符号未出现在 Bootstrap-Table 生成的 PDF 导出中

我利用 bootstrap-table 来显示我的数据。但是,当我将内容导出为 PDF 格式时,印度货币符号不会出现在生成的 PDF 文档中。 示例:https://live。

回答 1 投票 0

修复 Bootstrap 表的第一列

我按照@koala_dev 在这篇文章中的代码尝试锁定我的表格水平滚动的第一列。不幸的是,该代码对我的桌子没有影响。我想知道是否有人可以给我...

回答 4 投票 0

如何使用“bootstrap-table-rails”添加另一个相同的分页

我想在单个表中添加另一个相同的分页。 现在表格底部显示分页,但我想在表格顶部显示另一个分页。 我找过了,没找到……

回答 2 投票 0

带有 Bootstrap 问题的手风琴表

我有带手风琴的引导表 我需要默认隐藏第二行 但是当我点击桌子移动时 如何让动画和开场流畅,不移位? 我有带手风琴的引导表我需要默认隐藏第二行但是当我点击桌子时如何让动画和打开流畅,不移位?<table class="table table-hover"> <tbody> <tr data-bs-toggle="collapse" href="#collapse"> <td>Info</td> <td>Some more Info</td> <td>And some Info</td> </tr> <tr id="collapse" class="collapse"> <td>Hidden by default</td> <td>Hidden by default</td> <td>Hidden by default</td> </tr> </tbody> https://jsfiddle.net/ejdy462h/2/ 我的目的是让你使用 jQuery fadeToggle() 和 selector 属性 如果你想使用这个,你只需要从你的第一个tr中删除data-bs-toggle="collapse" $("tr[href$='#collapse']").click(function() { $(this).next("tr#collapse:first").fadeToggle(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover"> <tbody> <tr href="#collapse"> <td>Info</td> <td>Some more Info</td> <td>And some Info</td> </tr> <tr id="collapse" class="collapse"> <td>Hidden by default</td> <td>Hidden by default</td> <td>Hidden by default</td> </tr> </tbody>

回答 1 投票 0

Vuex - 如何使用 $store 在组件之间共享数据?

我希望能够使用 $store 在组件之间(从父级到子级)共享对象属性。如何将 user_name 共享给子组件并能够在表中看到它? 家长

回答 0 投票 0

固定的标题网格线不适合 Bootstrap-Table 中的主体

我有一个包含 4 个冻结行(标题)的表格。直到 3 个月前,标题与正文栏完全对齐。但现在布局被打破了。 有人能帮我吗? 输入图片描述

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.