javascript - 如何使用加载时的 react 进行字母排序？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

在这里我需要帮助对负载进行字母排序

这里我使用jsp中的ractive every方法获取json数据:

这是我的jsp代码:

{{#each criteriaList:i}}//这是我的 json 迭代对象
{{健康状况类型}}

这是我的js代码:

R_PersonList = new Ractive({
    el: "#health-information-details-container",
    template: "#health-information-details-template",
    data: {
        personList: personJson,
        allergiesList: personAllergiesJson,
        conditionsList: personConditionsJson,
    },
    sort: function (array, column) {
        array = array.slice(); // clone, so we don't modify the underlying data
        return array.sort( function (a, b) {
            return a[column] < b[column] ? -1 : 1;
        });
    }

Answer 1

您的示例有些......不确定，因此我为您制作了一个简单的表格示例，使用“您的”排序函数按列按字母顺序对列表进行排序。

有了这个，您的尝试应该会更进一步。

Working JSFiddle

HTML:

<div id="output"></div>
<script id="template" type="text/html">
     <p>Click a column header to sort alphabetically by that property</p>
    <table>
        <tr>
        <th on-click='sort:Name'>Name</th>
        <th on-click='sort:Food'>Favorite food</th>
        </tr>
        {{#Animals}}
        <tr>
        <td>{{Name}}</td>
        <td>{{Food}}</td>
        </tr>
        {{/Animals}}
    </table>
</script>

Javascript:

var ract = new Ractive({
    template: "#template",
    el: "#output",
    data: {
        Animals: [{
            Name: "Rabbit",
            Food: "Cables"
        }, {
            Name: "Crocodile",
            Food: "Humans"
        }, {
            Name: "Owl",
            Food: "Dunno"
        }, {
            Name: "Cat",
            Food: "Wool"
        }, {
            Name: "Shark",
            Food: "Seals"
        }, {
            Name: "Developers",
            Food: "Caffeine"
        }]
    }
});
ract.on("sort", function(event, column) {
    array = this.get("Animals");
    this.set("Animals", array.sort(function(a, b) {
        return a[column] < b[column] ? -1 : 1;
    }));
});