如何使用ractive on load进行字母排序?

时间:2015-10-27 13:39:39

标签: javascript jquery ractivejs

在这里,我需要帮助在负载上进行aplhabetical排序

这里我在jsp中使用ractive每个方法获取json数据:

这是我的jsp代码:

{{#each conditionsList:i}} //这是我的json迭代对象                      
            {{healthConditionType}}             
        

这是我的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;
        });
    }

1 个答案:

答案 0 :(得分:1)

你的例子有些......没有定论,所以我给你做了一个简单的表格示例,用列表按字母顺序排序列表,使用&#34;你的&#34;排序功能。

有了这个,你应该希望在你的尝试中得到更多。

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;
    }));
});