jQuery 来自数组问题的小胡子排序

Question

我使用 Mustache (0.7.2/) / jQuery (2.1.3) 创建了一些模板，并希望根据下拉列表中的选择对数组进行排序。我什至无法使用 Mustache 刷新数组。

我不是开发人员，所以我对其中的大部分内容都是摸不着头脑。只是想为我的原型做一些快速而肮脏的事情。这是我正在尝试的简单示例。

https://codepen.io/gzuiderweg/pen/XvpXxy

小胡子模板：


    <script type="text/template" id="sumview">

    {{#panels}}

        <div class="row">
            <div class="col-4">{{company-name}}<br/>{{prod-name}}</div>
            <div class="col-2">{{version-count}}</div>
            <div class="col-2">{{issue-count}}</div>
            <div class="col-2">{{injury-count}}</div>
            <div class="col-2">{{malfunction-count}}</div>
            </div>
        </div>
        {{/panels}}

     </script>

HTML:


    <select id="sort">
    <option selected>Sort By</option>
    <option value="company-name">Company Name</option>
    <option value="prod-name">Product Name</option>
    <option value="version-count">Version Count</option>
    <option value="issue-count">Issue Count</option>
    <option value="injury-count">Injury Count</option>
    <option value="malfunction-count">Malfunction Count</option>
    </select>

    <div class="view-summary" id="sumview-container">
    </div>

jQuery


    var template = $('#sumview').html();  
    var outputsum = $('#sumview-container');
    var data = {

    "panels": [

    { "company-name": "Acme", "prod-name": "productA", "version-count": "2", "issue-count": "1", "injury-count": "5", "malfunction-count": "10" },

    { "company-name": "BankA", "prod-name": "productB", "version-count": "15", "issue-count": "6", "injury-count": "2", "malfunction-count": "8" },

    { "company-name": "CorpA", "prod-name": "productC", "version-count": "6", "issue-count": "9", "injury-count": "4", "malfunction-count": "1" }


       ]
     }


    var resultSum = Mustache.render(template, data)
        outputsum.append(resultSum);

我试过各种 jquery 排序函数，例如：


    $("#sort").on("change", function () {

    data.sort(function(a, b){
        var a1= a.company-name, b1= b.company-name;
        if(a1== b1) return 0;
        return a1> b1? 1: -1;

    });

Answer 1

sort method belongs to the Array prototype. In your case you are trying to sort data which is actually an object。您希望将您的排序定位到 data.panels 属性，对该数组进行排序，然后将 data.panels 设置为您已排序的数组。

我认为当您想按数字排序时，真正的问题就会浮出水面。排序函数需要能够区分数字和字符串。

此外，您可能还想确定要按哪个方向对数字进行排序。在此示例中，我默认为降序。您可以更改为适合您的需要。

const data = {
  "panels": [
    {
      "company-name": "BankA",
      "prod-name": "productB",
      "version-count": "15",
      "issue-count": "6",
      "injury-count": "2",
      "malfunction-count": "8"
    },
    {
      "company-name": "Acme",
      "prod-name": "productA",
      "version-count": "2",
      "issue-count": "1",
      "injury-count": "5",
      "malfunction-count": "10"
    },
    {
      "company-name": "CorpA",
      "prod-name": "productC",
      "version-count": "6",
      "issue-count": "9",
      "injury-count": "4",
      "malfunction-count": "1"
    }
  ]
}

const sortBy = (key, array) => {
  return array.sort((a, b) => {
    const numericA = Number(a[key]);
    const numericB = Number(b[key]);
    if (!isNaN(numericA) && !isNaN(numericB)) {
      // a - b ascending sort
      // b - a descending sort
      return numericB - numericA;
    }
    return a[key].toLowerCase().localeCompare(b[key].toLowerCase());
  })
}

const renderTemplate = () => {
  $('#sumview-container').html(Mustache.render($('#sumview').html(), data));
}

$("#sort").on("change", function() {
  sortBy($(this).val(), data.panels);
  renderTemplate();
})

renderTemplate();

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="sort">
  <option selected>Sort By</option>
  <option value="company-name">Company Name</option>
  <option value="prod-name">Product Name</option>
  <option value="version-count">Version Count</option>
  <option value="issue-count">Issue Count</option>
  <option value="injury-count">Injury Count</option>
  <option value="malfunction-count">Malfunction Count</option>
</select>

<div id="sumview-container"></div>

<script type="text/template" id="sumview">
  {{#panels}}
    <div class="row">
      <div class="col-4">{{company-name}}<br/>{{prod-name}}</div>
      <div class="col-2">{{version-count}}</div>
      <div class="col-2">{{issue-count}}</div>
      <div class="col-2">{{injury-count}}</div>
      <div class="col-2">{{malfunction-count}}</div>
    </div>
  {{/panels}}
</script>

jQuery 来自数组问题的小胡子排序

jQuery with mustache sorting from an array issue

jquery

sorting

mustache