javascript - 从其数组值升序附加元素
问题描述
我正在使用selectize.js,其中数据由数组添加。我想实现DISPLAYORDER
对象中定义的订单下拉列表。
下面的代码正在生成列表。
option: function(item, escape) {
var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
}
var countries_list = [
{COUNTRY: "Canada", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 2},
{COUNTRY: "Thailand", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 3},
{COUNTRY: "Australia", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 5},
{COUNTRY: "Switzerland", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 4},
{COUNTRY: "United Kingdom (UK)", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 6},
{COUNTRY: "Singapore", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 7},
{COUNTRY: "Indonesia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 8},
{COUNTRY: "Malaysia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 9},
{COUNTRY: "Germany", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 11},
{COUNTRY: "South korea", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
{COUNTRY: "USA", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 1},
{COUNTRY: "Iraq", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
{COUNTRY: "Afghanistan", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
{COUNTRY: "Albania", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0},
{COUNTRY: "Italy", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 10},
{COUNTRY: "Algeria", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0}
];
$('#select-coutries').selectize({
hideSelected:false,
preload:true,
selectOnTab:true,
plugins: ['remove_button'],
valueField: 'COUNTRY',
labelField: 'COUNTRY',
searchField: 'COUNTRY',
options:countries_list,
openOnFocus: true,
render: {
item: function(item, escape) {
return '<div class="item" data-scope="'+escape(item.TRAVELSCOPE)+'" data-value="'+escape(item.COUNTRY)+'">' + item.COUNTRY + '</div>';
},
option: function(item, escape) {
var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
}
},
});
<link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<select id="select-coutries" name="countires[]" multiple class="demo-default" placeholder="Type countries...">
<option value="">type in here...</option>
</select>
解决方案
您需要countries_list
在传递之前对其进行排序,selectize
如下所示:
countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
? a.DISPLAYORDER - b.DISPLAYORDER
: a.DISPLAYORDER ? -1 : 0)
所以你的代码看起来像:
$('#select-coutries').selectize({
options: countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
? a.DISPLAYORDER - b.DISPLAYORDER
: a.DISPLAYORDER ? -1 : 0),
// ... rest of the configuration for selectize
});
工作版本可以在这里看到
推荐阅读
- codeigniter - 如何在codeigniter中获取uri的值?
- ruby-on-rails - LoadError:库版本不兼容 - /home/ubuntu/.rvm/gems/ruby-2.3.1@lm5/gems/nokogiri-1.8.2/lib/nokogiri/nokogiri.so
- css - CSS vw但包含块宽度的百分比?
- sprite-kit - isPaused 在 SKNode() 中无法正常工作
- statistics - Power BI 小计行
- powershell - 将多个参数传递给高级安装程序中的 Powershell 内联脚本
- android - 什么是非 SDK 接口
- windows - Windows 上的 Ansible:成为 / become_user 权限/所有者问题
- python-3.x - 有没有人尝试在 Centos6/7 上集成 Tox 和 SCL?
- wicket - 将 Wicket 1.4.x 迁移到 Wicket 7.9.x