Question

我正在研究一系列“点击功能”，这些功能实际上将已经通过迭代到HTML中的数据字段值来“排序”或重新排列Obj数据内容的输出。

例如；下面，我试图用“大小”数据字段值创建一个“排序”功能-因此，当点击功能被触发时； HTML中的数据将按照从小到大的顺序重新排列。我正在实现这种排序逻辑，我遇到的是问题； 执行排序功能时，内容不会以HTML格式重新排列。我可以在控制台中验证逻辑，但是无法获取HTML输出以进行相应的排序。有什么想法吗？

这是视觉效果。因此，点击“大小”标题应按大小执行“排序/重新排列”...。

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },
];

var string ="";

for (i in json) {
    string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="ck"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
};

// Just outputs data into bootstrap columns, rows, from Obj data source

document.getElementsByClassName('update-data')[0].innerHTML =string

// Click function to reorganize data accordingly as 'sort' function

document.getElementById('size').addEventListener('click', function () {
    json.sort(function(a, b) {
        return parseFloat(a.Size) - parseFloat(b.Size);
    });
});

以下是相关的HTML。

<!-- etc -->
        <div>
          <div class="col-md-15 col-sm-1">
            <span id="size">Size</span>
            </div>
        </div>   

        <div class="update-data">
          <!-- output-->
        </div>

我正在控制台中获得结果。只是无法更新输出的HTML。

Answer 1

您已经使用JSON数据生成了html字符串，并将其插入到页面的HTML中。 此后排序JSON不会自动更改HTML输出。您要做的是，每次对JSON进行排序时，都会生成并插入新的排序HTML来代替原始HTML。像这样...

document.getElementById('size').addEventListener('click', function () {
    json.sort(function(a, b) {
        return parseFloat(a.Size) - parseFloat(b.Size);
    });

    var str ="";

    for (i in json) {
        str +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="ck"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
    };

    document.getElementsByClassName('update-data')[0].innerHTML =str;
});

单击“排序”功能以重新排列HTML中的obj数据输出

1 个答案: