引导表中的多个数据字段

Posted 2023-05-08

【中文标题】引导表中的多个数据字段

【英文标题】：Multiple data fields in bootstrap table

【发布时间】：2017-10-05 03:04:43

【问题描述】：

在我的数据库中，我有字段 fname 和 lname。我正在使用引导表向用户显示结果。我想要做的是连接两个字段以显示在一个名为 Name 的列下。

这目前有效，尽管名字和姓氏在不同的列中。我想将它们合并到同一列中。

<th data-field="fname">First Name</th>
<th data-field="lname">Last Name</th>
<th data-field="title">Title</th>
<th data-field="position">Position</th>
<th data-field="cell">Cell</th>
<th data-field="home">Home</th>
<th data-field="workgroup">Workgroup</th>

我搜索了文档，但没有看到任何示例。 谢谢！

【参考方案1】：

也许可以试试http://bootstrap-table.wenzhixin.net.cn/documentation/ 的列部分中的“数据格式化程序”？

模板：

<table>
<th data-field="firstname"
    data-formatter="nameFormatter"></th>
</table>

javascript：

function nameFormatter(value, row, index) 
    return value + " " + row.lastname;

【讨论】：

这行不通，变量行无法解析。

如果姓氏有空格，例如（约翰摩尔威廉姆斯，其中“摩尔威廉姆斯”是姓氏

如果姓氏有空格，您需要使用JSON.stringify(row.lastname)

【参考方案2】：

@sasha 的解决方案对我有用。

例如显示一个点的纬度和经度：

<table>
<th data-field="id"
    data-formatter="nameFormatter"></th>
</table>

javascript：

<script>
function nameFormatter(value, row, index) 
   return 'lat:'+ row.lat + " ,lon:" + row.lon;
 
</script>

【参考方案3】：

以防万一有人使用 React Bootstrap Table，我们使用formatter。

const columns = [
    
        dataField: 'Product.name',
        formatter: (value, row) => 
            return value + " " + Product.image_url
        ,
        text: 'Price',
    

【参考方案4】：

大多数编程语言的连接是由"+" 运算符完成的，现在你需要在你的表列<td> firstname+""+lastname</td> 中写这样的东西在你各自的表行内，可能对你有帮助

【讨论】：

这是我尝试的第一件事，无论是数组格式 []、对象格式 ，还是字符串“fname”+“lname”，但都没有成功。

它是否给出任何错误或什么？它必须给出想要的结果，没有其他办法，bootstrap 只是一个前端，它与您的数据库无关，您需要提供正确的值，可能是您连接不正确

你正在使用哪个中间件 bdw？

没有错误，它什么也没做。我将link 用于表格并将Ruby/Sinatra 与Mongoid 一起使用。我尝试使用 data-field="fname" + "lname" 添加一个新的

，我将返回的只是 fname 值。所以我尝试将连接放在方括号、花括号和圆括号中，但都没有奏效。

这是在 ruby​​/sintara gist.github.com/migane/3425304987654322@中连接字符串的方式

【参考方案5】：

您需要一个函数来格式化列bootstrap-table#column-options：

index.html

<table id="my-table"></table>

controller.js

//jQuery is used to manipulate the table

$.ajax(
    url: 'https://jsonplaceholder.typicode.com/users',
    type: 'GET'
).done((data) => 
        $('#my-table').bootstrapTable(
            data: data,
            search: true,
            pagination: true,
            columns: [
                field: 'id',
                title: 'ID'
            , 
                field: 'name',
                title: 'NAME'
            , 
                field: 'address.street',
                title: 'ADDRESS',
                formatter: (value, row, index, field) => 
                    return value + ' - ' + row.address.suite + ' - ' + row.address.city
                
            ]
        );
    )
    .fail((jqXHR, textStatus, errorThrown) => 
        console.log(jqXHR)
    );