【问题标题】:How does data-sort-name in Bootstrap table Js work?Bootstrap 表 Js 中的 data-sort-name 是如何工作的?
【发布时间】:2015-10-09 16:24:05
【问题描述】:

我正在使用以下库:http://bootstrap-table.wenzhixin.net.cn/documentation/

我将 json 对象加载到这个工作正常的表中,但现在问题来了。我希望能够对列进行排序。

我的 Json 布局如下:

[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]

  <table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
                <thead>
                    <tr>
                        <th data-field="Name">Name</th>
                        <th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
                    </tr>
                </thead>
            </table>

我想显示 TotalFormatted 数据,但我想使用 Total 属性对该列进行排序,因为 TotalFormatted 不能用于此。在文档中,我看到了以下内容:

data-sort-name :提供可自定义的排序名称,而不是默认的 标题中的排序名称,或列的字段名称。例如, 列可能会显示“html”的 fieldName 的值,例如 "abc",但要排序的字段名 是“内容”,值为“abc”。

但是数据如何没有正确排序,有没有人经历过这个或者我误解了什么?

【问题讨论】:

    标签: javascript jquery twitter-bootstrap bootstrap-table


    【解决方案1】:

    实际上data-sort-name 不是这样工作的。 data-sort-name选项的主要目的是控制表格数据的默认排序。

    要使data-sort-name 选项使用默认排序,它需要指向表中列的data-field 属性之一。

    注意:简而言之,data-field 就像添加到每一列的 id,data-sort-name 选项指的是在加载时对表进行排序。

    为了更好地理解这一点,这里有一个来自Bootstrap site的代码示例

    • 尝试将data-sort-name 更改为data-field 列之一的值并执行代码,您就会明白我刚才解释的内容。

    HTML 代码:

    <table data-toggle="table"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
       data-sort-name="stargazers_count"
       data-sort-order="desc">
    <thead>
    <tr>
        <th data-field="name" 
            data-sortable="true">
                Name
        </th>
        <th data-field="stargazers_count" 
            data-sortable="true">
                Stars
        </th>
        <th data-field="forks_count" 
            data-sortable="true">
                Forks
        </th>
        <th data-field="description" 
            data-sortable="true">
                Description
        </th>
    </tr>
    </thead>
    

    现场演示@JSFIDDLE:http://jsfiddle.net/dreamweiver/ptxj8Lao/

    【讨论】:

    • 根据文档列也有 data-sort-name 选项,我该如何使用它?
    • 没关系,如果我将 data-sort-name="stargazers_count" 添加到 description 列,它将像 stargazers_count 列一样排序。
    猜你喜欢
    • 1970-01-01
    • 2013-09-06
    • 2011-08-09
    • 1970-01-01
    • 2011-02-15
    • 2013-12-15
    • 2023-03-06
    • 2021-07-03
    • 2018-05-02
    相关资源
    最近更新 更多