jquery - 带有胡子排序的 jQuery 从数组问题中排序
问题描述
我使用 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;
});
解决方案
该sort
方法属于 Array 原型。在您的情况下,您正在尝试排序data
实际上是一个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>
推荐阅读
- javascript - 如何以编程方式查找 svg 的大小?
- angular - 如何在 Angular Validators 中更改 required 的验证消息
- c# - 评估的嵌套括号顺序 - 深度与 Ltr
- javascript - Javascript:未从数组中删除元素
- c# - 控制台中的 C# 简单“Hello World”缺少一行代码?
- java - 安全使用 CyclicBarrier.reset
- list - 从groovy中的String列表创建对象列表
- regex - 段落的正则表达式匹配
- c# - 用于存储 SynchronizationContext 或其他视图模型对象以编组到 Ui 线程上的任何普遍接受的模式?
- python - DNN,targets[3] 超出范围错误