Question

我目前正在使用tinysort.js插件，我想根据数组对一些div进行排序。我不确定如何通过tinysort解决这个问题。

这就是我目前所拥有的：

HTML：

import { Component, OnInit, OnChanges } from '@angular/core';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';  
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';  

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'This is the title!';
  bodyHTML = 'Here is the content!';
  routerSub:Subscription;

  constructor(private router:Router) { 
      console.log('inside the constructor!');
      console.log(router.url);
   }

  ngOnInit(){       
    // listen to NavigationEnd events
    this.routerSub = this.router.events.filter(e=>e instanceof NavigationEnd)
      // capture the new URL
      .map(e.NavigationEnd => e.url)
      .subscribe(url => {
        /* TODO: use URL to update the view */
      });
  }

  // When the component is destroyed, you must unsubscribe to avoid memory leaks
  ngOnDestroy(){
    this.routerSub.unsubscribe();
  }
}

的javascript：

<div id="list">
    <div class="row" data-type="fruit">banana</div>
    <div class="row" data-type="fruit">apple</div>
    <div class="row" data-type="fruit">avocado</div>
    <div class="row" data-type="dairy">milk</div>
    <div class="row" data-type="other">car</div>
    <div class="row" data-type="dairy">cheese</div>
    <div class="row" data-type="grain">rice</div>
    <div class="row" data-type="grain">wheat</div>
    <div class="row" data-type="grain">barley</div>
</div>

如何应用订单数组以便对div进行相应的排序？

Answer 1

我相信使用Array.prototype.indexOf会有效：

tinysort($rows, {sortFunction:function(a, b) {
    var rowA = order.indexOf($(a.elm).data('type'));
    var rowB = order.indexOf($(b.elm).data('type'));

    return rowA == rowB ? 0 : (rowA > rowB ? 1 : -1);
}});

Answer 2

如果您可以使用对象而不是数组：

var $rows = $('#list .row');

var order = {   // the order is an object that maps types into an integer that represents the precedence (the lower the number the higher the precedence is)
  'grain': 0,
  'fruit': 1,
  'dairy': 2,
  'other': 3
};

tinysort($rows, {sortFunction:function(a, b) {
    var rowA = $(a.elm).data('type');
    var rowB = $(b.elm).data('type');
    
    rowA = order[rowA];  // get the integer representation of this type
    rowB = order[rowB];  // get the integer representation of this type

    return rowA == rowB ? 0 : (rowA > rowB ? 1 : -1); // if the two integers are the same (same precedence) then return 0, otherwise return either 1 or -1 depending on who's should come first using the integer representaion (I think it is self explanatory ;))
}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<div id="list">
    <div class="row" data-type="fruit">banana</div>
    <div class="row" data-type="fruit">apple</div>
    <div class="row" data-type="fruit">avocado</div>
    <div class="row" data-type="dairy">milk</div>
    <div class="row" data-type="other">car</div>
    <div class="row" data-type="dairy">cheese</div>
    <div class="row" data-type="grain">rice</div>
    <div class="row" data-type="grain">wheat</div>
    <div class="row" data-type="grain">barley</div>
</div>

注意如果您仍然需要数组，那么它很容易转换为等效对象：

var orderObject = orderArray.reduce((obj, t, i) => (obj[t] = i, obj), {});

注意应包含所有类型，否则排序将被破坏，因为整数表示将不存在，因此undefined和number < undefined以及{{1}总是undefined < number。如果您不想在false变量中包含所有类型，可以进行测试以检查sort函数中是否为undefined。

tinysort基于自定义数组顺序排序div

2 个答案: