2

プロジェクトで固定データ テーブルを試しています。

しかし、並べ替えに問題があります。

ここでは、この例を使用しています: https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js

降順または昇順でソートされます。しかし、私はそれについて問題があります。

たとえば、最初に名前で並べ替えると、この並べ替えられた配列が表示されます。

id:2 名前:メアリー

id:4 名前:メアリー

id:5 名前:メアリー

id:1 name:アンナ

id:3 name:アンナ

それは問題ありませんが、もう一度名前 desc で並べ替えると、結果が表示されます。

id:4 名前:メアリー

id:2 名前:メアリー

id:5 名前:メアリー

id:3 name:アンナ

id:1 name:アンナ

名前で並べ替えますが、問題は次のとおりです。同じ値のインデックスを変更します。たとえば、(id:4 name:Mary) を最初の行に移動します。

しかし、最初に並べ替えたとき、(id:2 name:Mary) が届きました。

同じ値のインデックスを変更するのはなぜですか?

ソート方法に問題はありますか？

編集:ここに私の完全なコードがあります:

var FixedDataTable = require('fixed-data-table');
var React = require('react');

var Column = FixedDataTable.Column;
var Table = FixedDataTable.Table;

var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC',
};

function renderDate(/*object*/ cellData) {
  return <span>{cellData.toLocaleString()}</span>;
}

var SortExample = React.createClass({
  getInitialState() {
    return {
      rows: [{"id":"1","name":"Mary"},{"id":"2","name":"Felix"},
                   {"id":"3","name":"Mary"},{"id":"4","name":"Felix"},
                   {"id":"5","name":"Mary"},{"id":"6","name":"Felix"},
                   {"id":"7","name":"Mary"},{"id":"8","name":"Felix"},
                   {"id":"9","name":"Mary"},{"id":"10","name":"Felix"},
                   {"id":"11","name":"Mary"},{"id":"12","name":"Felix"},
                   {"id":"13","name":"Mary"},{"id":"14","name":"Felix"},
                   {"id":"15","name":"Mary"},{"id":"16","name":"Felix"},
                   {"id":"17","name":"Mary"},{"id":"18","name":"Felix"} ,
                   {"id":"19","name":"Mary"},{"id":"20","name":"Felix"}],sortBy: 'id',
      sortDir: null,
    };
  },

  _rowGetter(rowIndex) {
    return this.state.rows[rowIndex];
  },

  _sortRowsBy(cellDataKey) {
    var sortDir = this.state.sortDir;
    var sortBy = cellDataKey;
    if (sortBy === this.state.sortBy) {
      sortDir = this.state.sortDir === SortTypes.ASC ? SortTypes.DESC : SortTypes.ASC;
    } else {
      sortDir = SortTypes.DESC;
    }

    var rows = this.state.rows.slice();
    rows.sort((a, b) => {
      var sortVal = 0;
      if (a[sortBy] > b[sortBy]) {
        sortVal = 1;
      }
      if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
      }

      if (sortDir === SortTypes.DESC) {
        sortVal = sortVal * -1;
      }

      return sortVal;
    });

    this.setState({
      rows,
      sortBy,
      sortDir,
    });
  },

  _renderHeader(label, cellDataKey) {
    return (
      <a onClick={this._sortRowsBy.bind(null, cellDataKey)}>{label}</a>
    );
  },

  render() {
    var sortDirArrow = '';

    if (this.state.sortDir !== null){
      sortDirArrow = this.state.sortDir === SortTypes.DESC ? ' ↓' : ' ↑';
    }

    return (
      <Table
        rowHeight={50}
        rowGetter={this._rowGetter}
        rowsCount={this.state.rows.length}
        headerHeight={50}
        width={1000}
        height={500}
        {...this.props}>
        <Column
          headerRenderer={this._renderHeader}
          label={'id' + (this.state.sortBy === 'id' ? sortDirArrow : '')}
          width={100}
          dataKey='id'
        />
        <Column
          headerRenderer={this._renderHeader}
          label={'First Name' + (this.state.sortBy === 'name' ? sortDirArrow : '')}
          width={200}
          dataKey='name'
        />

      </Table>
    );
  },
});









ReactDOM.render(
 <SortExample/>,
  document.getElementById('app')
)
4

2 に答える 2

0

これで問題が解決すると思います 。Lodashライブラリを使用しました

`var data = [
   {
    id:1,
    name: "Anna"
  },
  {
    id:3,
    name: "Anna"
  },
  {
    id:2,
    name: "Mary"
  },
  {
    id:4,
    name: "Mary"
  },
  {
    id:5,
    name: "Mary"
  }
];
var sortArray = _.sortBy(data, function(o) { return o.name; });
var reverseSortArray = _.cloneDeep(sortArray).reverse();
console.log("sort Array: ", sortArray);
console.log("reverse Sort Array", reverseSortArray);`
于 2016-02-21T16:33:07.483 に答える
0

問題を再現できません。

並べ替え機能は正しく、期待どおりに機能しているようです。

更新: スニペットは、呼び出しごとにソート方向が交互になるように変更されました。ただし、結果は同じでした。つまり、関数は正しく、期待どおりに動作しました。さらに、FixedDataTable デモは、何百ものレコードをどの方向にも正しく並べ替えます。

ソート関数は 53 ～ 65 行目にあります。

var rows = this.state.rows.slice();
rows.sort((a, b) => {
     var sortVal = 0;
     if (a[sortBy] > b[sortBy]) {
          sortVal = 1;
     }
     if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
     }
     if (sortDir === SortTypes.DESC) {
         sortVal = sortVal * -1;
     }
     return sortVal;
});

繰り返しソートされたテスト配列は、常に同じデータを同じ順序で返します。

  • 2、メアリー
  • 4、メアリー
  • 5、メアリー
  • 1、アンナ
  • 3、アンナ

    • OP のコード (表示されていません) に問題があるか、ソートされたデータが元の配列にコピーされる方法、つまり setState() に問題がある可能性があります。

    コード スニペットを表示し、[実行] をクリックして試してください。

    var i, sortBy, SortTypes, state,count=0;


SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC'
};

sortBy = 'name';


function test( sortDir ) {

  var rows = state.rows.slice();
  rows.sort((a, b) => {
    var sortVal = 0;
    if (a[sortBy] > b[sortBy]) {
      sortVal = 1;
    }
    if (a[sortBy] < b[sortBy]) {
      sortVal = -1;
    }
    if (sortDir === SortTypes.DESC) {
      sortVal = sortVal * -1;
    }
    return sortVal;
  });

  count++;
  document.getElementById('stdout').innerHTML += 
    'SORT: ' + count + ' ' + sortDir + '\n' +JSON.stringify(rows, null, '  ') + '\n\n';
}



// example data
state = {
  rows: [{
    id: '1',
    name: 'Anna'
  }, {
    id: '2',
    name: 'Mary'
  }, {
    id: '30',
    name: 'Anna'
  }, {
    id: '40',
    name: 'Mary'
  }, {
    id: '100',
    name: 'Mary'
  }]
};


for(i=0; i<4; i++) {
  test( 'ASC' );
  test( 'DESC' );
}
    Results of sorting the test array multiple times:<br>

<xmp id="stdout"></xmp>

    于 2016-02-21T16:11:51.807 に答える