无法对Gatsby站点的Ant设计表中的列进行排序

时间：2019-12-25 15:25:15

标签： javascript reactjs graphql gatsby antd

我已经在Gatsby站点中实现了一个Ant设计表。我从graphql提取数据。到目前为止，一切都很好。数据显示正确，分页工作正常等等。

现在，我想添加对列进行排序的功能。为此，我将表和列设置如下：

var draggable_list_value = [];
var ElementsQuantity = 3;
var AllSet = false;
var SolveAll = false;
var VisibleHelp = false;
var ResetActivity = true;
var Visible_Message= false;
var SolvedList= [];
var DraggablePosition=[], Draggable_ii=[];
var ChangeActivity = false;

$(start)
function start () {
message('','',1);
$('.ui-draggable').draggable('enable');
$('#Button_Check').addClass('Blocked');
$('#Button_TryAgain').addClass('Blocked');
if (!VisibleHelp)	{ $('#Button_Hint').css('visibility','hidden'); }

AllSet = false;
draggable_list_value = [];


if (ResetActivity)
 {
   Draggable_ii = [];
   DraggablePosition=[];	
for ( var i=0; i<ElementsQuantity; i++ ) {DraggablePosition.push( 22+(62.6*i) +'px');Draggable_ii.push(i);}
VectorRandom(Draggable_ii);
}

for (var i =0; i<ElementsQuantity; i+=1)
{
draggable_list_value.push(false);
var I=Draggable_ii[i];

$('#Draggalbe_Button0'+(i)).appendTo('#Draggalbe_Column').data('ubicacion_top',DraggablePosition[I]).data('DropId' , null).data('value', i).draggable({
containment: '#limit',
stack: '#Draggalbe_Column div',
cursor: 'move',
revert: true,
start: start_arrastre,
stop: quitar_movimiento
}).css('top', DraggablePosition[I]).css('left', '0px').removeClass('Correct')

/////////////////////////////////////////////////////////--
$('#Droppable_Container0'+(i)).appendTo('#Droppable_Column').data( 'DragId', null ).data('value', i).droppable({
accept: '#Draggalbe_Column div',
hoverClass: 'hovered',
drop: set
}).droppable('enable')
}

if ((SolveAll)
&& (!ResetActivity))
{
for(var i=0; i < SolvedList.length; i+=1)
      {
         
         var I = SolvedList[i];
         
         var DragR = $('#Draggalbe_Button0' + (I));
         var DropR = $('.Droppable_Container0' + (I));
 
         DragR.addClass('Correct').css('z-index',1);
         DragR.position({of:$('.Droppable_Container0'+(I)), my: 'left top', at: 'left top'});
 
         DragR.data('DropId', DropR);
         DropR.data('DragId', DragR);

         draggable_list_value[ I ] = true;

         //Habilitando los botones
         if ($('.Correct').length == ElementsQuantity)
         {
            AllSet = true;
            $('#Button_Check').removeClass('Blocked');
         }else{
            AllSet=false;
            $('#Button_Check').addClass('Blocked');
            $('#Button_TryAgain').addClass('Blocked');
         }
 
      }
}


$('#Draggalbe_Column').droppable({

accept: '#Draggalbe_Column div',
drop: restaurar
})

}

function dragMoveListener (event) {
  var target = event.target
  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

function quitar_movimiento (event, ui) {
  $(this).removeClass('Drag_Movimiento');
}

function set (event, ui) {

//if (ui.draggable.data('dropId') != null){
//ui.draggable.data('dropId').droppable('enable');
//ui.draggable.data('dropId' , null)

/* -----------------------  <====  */
if ($(this).data('DragId') != null){

	var _Id;
     _Id = $(this).data('DragId');
     
     var V = _Id.data('value');
     draggable_list_value[V] = false;
     
 }

 $(this).data('DragId', ui.draggable);

   
 /*Sets a draggable in a droppable*/
  var _IdDrop;
 _IdDrop = ui.draggable.data('DropId');
 if (_IdDrop != null)
 {
      _IdDrop.data('DragId',null);
 }
 //*********************************
 
 ui.draggable.addClass('Correct');
 ui.draggable.draggable('option', 'revert', false);

 var IdContenedor = $('#Droppable_Container0' + $(this).data('value') );
 ui.draggable.position({of:IdContenedor, my: 'left top', at: 'left top'});
//center bottom
/*var Top = ui.draggable.css('top').replace('px','');
ui.draggable.css('top', (Top-2)+'px' );*/


ui.draggable.data('DropId', $(this));
/*$(this).droppable('disable');*/

var v= ui.draggable.data('value');
draggable_list_value[v]=($(this).data('value')==v);

/*-----  <==== */
if ($('.Correct').length == ElementsQuantity)
{
  AllSet = true;
  $('#Button_Check').removeClass('Blocked');
}
else
{
  AllSet = false;
  $('#Button_Check').addClass('Blocked');
  $('#Button_TryAgain').addClass('Blocked');
}
/*************/
var _Counter = Counter();
   if (_Counter>=draggable_list_value.length-1)
   {
     $('#Button_Hint').addClass('Blocked');
   }
   else
   {
     $('#Button_Hint').removeClass('Blocked');
   }

}

function restaurar (event, ui) {

var BotonId = ui.draggable;

if (ui.draggable.data('DropId') != null){
ui.draggable.data('DropId').data('DragId',null);
ui.draggable.data('DropId').droppable('enable');
ui.draggable.data('DropId' , null)
draggable_list_value[ui.draggable.data('value')]=false;
}

if (BotonId.hasClass('Correct')){

BotonId.removeClass('Correct')
var Top = BotonId.data('ubicacion_top');

BotonId.draggable('option', 'revert', false);
BotonId.css('top', Top )
.css('left', 0+'px' );

}
AllSet = false;
$('#Button_Check').addClass('Blocked');
$('#Button_TryAgain').addClass('Blocked');

//ui.draggable.position({of:$(this), my: 'center bottom', at: 'center bottom'});
}

function start_arrastre (event, ui) {
$(this).draggable('option', 'revert', true);
$(this).addClass('Drag_Movimiento');
}
function finalizar_arrastre (event, ui) {
$(this).removeClass('Drag_Movimiento');
}

function VectorRandom(L) {
var E,R;
for ( var i=0; i<L.length; i+=1 )
{
R = Math.round(Math.random() * L.length);
R = (R<L.length-1)?R:L.length-1;
E = L[R];
L.splice(R, 1);
L.push(E);
}

L.reverse();
}

function Reset() {
$('#Draggalbe_Button00').css('pointer-events','auto');
$('#Draggalbe_Button01').css('pointer-events','auto');
$('#Draggalbe_Button02').css('pointer-events','auto');
$('#Draggalbe_Button03').css('pointer-events','auto');
$('#Draggalbe_Button04').css('pointer-events','auto');
$('#Draggalbe_Button05').css('pointer-events','auto');
if ((AllSet)
&& (!$('Button_TryAgain').hasClass('Blocked')))
{
if( Visible_Message==true)
{
$('#Button_Hint').css('visibility','visible');
Visible_Message=false;
}

VisibleHelp = true;
ResetActivity = true;
$(start);
}
}

function Verify () {
$('#Button_TryAgain').removeClass('Blocked');
if (AllSet)
{

ChangeActivity=true;

for(var i=0; i<ElementsQuantity ; i+=1)
{
if (draggable_list_value[i]==false)
{
ChangeActivity=false;
break;
}
}
if (ChangeActivity)
{
message('Good!','', 1);
$('.ui-draggable').draggable('disable');

$('#right_arrow').css('visibility', 'visible');
$('#Button_Check').css('visibility', 'hidden');
$('#Button_TryAgain').css('visibility', 'hidden');
$('#Button_Hint').css('visibility', 'hidden');
$('#Button_Answer').css('visibility', 'hidden');
$('#Draggalbe_Button00').css('pointer-events','none');
$('#Draggalbe_Button01').css('pointer-events','none');
$('#Draggalbe_Button02').css('pointer-events','none');
$('#Draggalbe_Button03').css('pointer-events','none');
$('#Draggalbe_Button04').css('pointer-events','none');
$('#Draggalbe_Button05').css('pointer-events','none');
	
}

else
{
Visible_Message=true;
message('Try one more time','', 0);
$('.ui-draggable').draggable('disable');
$('#Button_Check').addClass('Blocked');
$('#Button_Hint').css('visibility', 'hidden');
$('#Button_Answer').css('visibility', 'hidden');
$('#Draggalbe_Button00').css('pointer-events','none');
$('#Draggalbe_Button01').css('pointer-events','none');
$('#Draggalbe_Button02').css('pointer-events','none');
$('#Draggalbe_Button03').css('pointer-events','none');
$('#Draggalbe_Button04').css('pointer-events','none');
$('#Draggalbe_Button05').css('pointer-events','none');
}
}
}

function BT_Message () {
message('');
if (!ChangeActivity)
{
$('#Button_Hint').css('visibility','visible');
VisibleHelp = true;
ResetActivity = true;
$(start);
}
else{
$('.ui-draggable').draggable('disable');
}
}

function message (texto, texto2, a) {

if (texto!= ''){

if (a ==0)
{
document.getElementById('Message').style.color='white';
}
if(a==1)
{
document.getElementById('Message').style.color='white';
document.getElementById('Message').style.textShadow='0px 0px 7px #white';
}
document.getElementById('Message').innerHTML=texto;
document.getElementById('Sub_Message').innerHTML=texto2;
document.getElementById('message_modal').style.visibility= 'visible';
}
else{
document.getElementById('message_modal').style.visibility= 'hidden';
}
}


function Counter () {

  var Correct_Quantity=0;
        for(var i=0; i<ElementsQuantity ; i+=1)
      {
        if (draggable_list_value[i]==true)
        {
        Correct_Quantity+=1;
        }
      }

      return Correct_Quantity;
}


function Hint() {
  var _Counter = Counter() ;

  if (_Counter<draggable_list_value.length-1)
  {

  ResetActivity = false;
   
  SolveAll = true;

  /**************/
  

  //Verificando los que estan colocados correctamente
  SolvedList = [];
  var RandomI = [];

  for (var i =  0; i < ElementsQuantity; i++){
    if ( draggable_list_value[ i ] ){
      SolvedList.push( i );
    }else{
      RandomI.push(i);
    }
  }
  /*Colocando una pieza random*/
  if (RandomI.length>0)
  {
    var r = Math.round(Math.random() * (RandomI.length-1));
    SolvedList.push( RandomI[r] );
  }

  if (_Counter>=draggable_list_value.length-2)
  {
    $('#Button_Hint').addClass('Blocked');
  }
  /**************/
  $('#Button_Answer').css('visibility','visible');
  VisibleAnswer = true;
  message('','', 0);    
  $(start);
 }
}

function Answer () {
  //ANSWER
  for(var i=0;i<ElementsQuantity;i+=1)
  {
     var Drag = $('#Draggalbe_Button0' + (i));
     var Drop = $('.Droppable_Container0' + (i));
     Drag.addClass('Correct');

     Drag.position({of:$('.Droppable_Container0'+ (i)), my: 'left top', at: 'left top'});
     Drag.draggable('disable');

     draggable_list_value[i] = true;
  }
  AllSet = true;

  $('#Button_Hint').addClass('Blocked');
  $('#Button_Answer').addClass('Blocked');
  $('#Button_TryAgain').addClass('Blocked');
  $('#Button_Check').removeClass('Blocked');
}

/*Link*/
function ArrowClick (id, arrow) {
 if (arrow==0){
   /*URL Atras*/
   Link_Anterior();
 }else{
   if (ChangeActivity){/*URL Adelante*/Link_Siguiente();}
 }
}

现在，确实出现了用于对该列进行排序的图标，但是当我单击它时什么也没有发生。

如果我从排序函数#MainDiv{ position: absolute; left: 50%; top: 0px; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%,0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); width: 1260px; height: 540px; background-size: 100% 100%; user-select:none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; cursor: default; background-color: gray; font-family: Calibri; } #activity_background{ position: absolute; float: left; width: 1260px; height: 400px; margin-top: 70px; margin-left: 3px } #limit{ position: absolute; float: left; width: 1100px; height: 406px; background-size: 100% 100%; background-color: rgba(255,255,255, 0); margin-left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); } #activity{ position: relative; float: left; top: -1%; width: 1100px; height: 400px; background-size: 100% 100%; margin-left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); } #Draggalbe_Column{ position: relative; float: left; top: .7%; width: 600px; height: 100%; } .ui-draggable{ position: absolute; background-color: orange; background-size: 100% 100%; width: 250px; height: 52px; background-repeat: no-repeat; float: left; font-family: Calibri; font-weight: bold; color: white; font-size: 100%; text-align: center; line-height: 50px; cursor: pointer; } .ui-draggable:hover{ background-color: rgba(255,255,255, 0.6); } .Drag_Movimiento{ background-color: orange !important; } #Droppable_Column{ position: absolute; float: left; width: 448px; height: 100%; margin-left: 56%; padding-top: 1.4%; } .ui-droppable{ margin: 0px; width: 213px; height: 74px; float: left; margin-bottom: 10px; margin-left:10px; } #Droppable_Container00{ margin-left: -1.3%; } #Droppable_Container01{ margin-left: 8.7%; } .image { width: 213px; height: 74px; margin-top: -32%; margin-left: -2%; z-index: 20; } .ImageText{ font-family: Calibri; font-size: 23px; font-weight: bold; color: white; text-align: center; } .Buttons{ position: absolute; background-color: red; width: 88px; height: 32px; background-size: 100% 100%; background-repeat: no-repeat; float: left; font-family: Calibri; font-weight: bold; color: white; font-size: 100%; text-align: center; line-height: 30px; font-size: 11pt; cursor: pointer; text-shadow: 0px 0px 3px rgb(83,70,62); top: 500px; } #Button_Check{ left: 800px; } #Button_TryAgain{ left: 700px; } #Button_Hint{ visibility: hidden; left: 500px; } #Button_Answer{ visibility: hidden; left: 600px; } .Buttons:hover{ background-color: yellow; border-radius: 5px; } .Buttons:active{ background-color: green; border-radius: 5px; } #left_arrow{ position: absolute; float: left; width: 77px; height: 128px; margin-left: 0px; top: 206px; cursor: pointer; background-color: brown; background-size: 100% 100%; color: white; font-weight: weight; text-align: center; line-height: 125px; z-index: 100; } #right_arrow{ position: absolute; float: left; width: 77px; height: 128px; margin-left: 1185px; margin-top: 206px; cursor: pointer; background-color: brown; background-size: 100% 100%; color: white; font-weight: weight; text-align: center; line-height: 125px; z-index: 100; visibility: hidden; } #left_arrow:hover{ transform: scaleX(1.1) scaleY(1.1); -moz-transform: scaleX(1.1) scaleY(1.1); -o-transform: scaleX(1.1) scaleY(1.1); -webkit-transform: scaleX(1.1) scaleY(1.1); } #right_arrow:hover{ transform: scaleX(-1.1) scaleY(1.1); -moz-transform: scaleX(-1.1) scaleY(1.1); -o-transform: scaleX(-1.1) scaleY(1.1); -webkit-transform: scaleX(-1.1) scaleY(1.1); } .Correct{ width: 203px !important; height: 48px !important; margin-top: 24px; background-color: #02ff0247 !important; font-size: 100% !important; line-height: 44px !important; } .dropContainer{ position: relative; float: left; width: 200px; height: 300px; background-color: black; margin-left: 4px; margin-top: 70px; } #Message_background{ visibility: hidden; position: absolute; float: left; width: 100%; height: 100%; background-color: black; opacity: .7; z-index: 100; } #message_modal{ visibility: hidden; position: absolute; float: left; width: 555px; height: 352px; border-radius: 10px; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } #Message{ position: relative; float: left; width: 542px; height: 100px; margin: 50px 6px; font-family: Calibri; font-weight: bold; font-size: 20pt; line-height: 260px; text-align: center; } #Sub_Message{ position: relative; float: left; width: 542px; height: 80px; margin: 0px 6px; font-family: Calibri; font-size: 11pt; line-height: 0px; text-align: center; color:white; } .Blocked{ opacity: .5; cursor: default !important; pointer-events: none; }中删除<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.8.9/jquery-ui.js"></script> </head> <body> <div id = 'MainDiv' > <div id='activity_background'> <div id='limit'></div> <div id='activity'> <div id='Draggalbe_Column' > <div id='Draggalbe_Button00' class='Draggalbe_Button00 ui-draggable drag-drop countries' > Canada </div> <div id='Draggalbe_Button01' class='Draggalbe_Button00 ui-draggable drag-drop countries' > USA </div> <div id='Draggalbe_Button02' class='Draggalbe_Button01 ui-draggable drag-drop cities' > Chicago </div> </div> <div id='Droppable_Column'> <div id='Droppable_Container00' class= 'dropContainer Droppable_Container00 Droppable_Container01 countries ui-droppable dropzone'> <div id='Image1' class='image'> <div id = 'ImageText1' class='ImageText'> Countries </div> </div></div> <div id='Droppable_Container01' class= 'dropContainer Droppable_Container02 cities ui-droppable dropzone'> <div id='Image2' class='image'> <div id = 'ImageText2' class='ImageText'> Cities </div> </div></div> </div> </div> </div> <div id='Button_TryAgain' class='Buttons' onClick= 'Reset()'> Try again </div> <div id='Button_Check' class='Buttons' onClick= 'Verify()'> Verify </div> <div id='Button_Hint' class='Buttons' onClick= 'Hint()'> Help </div> <div id='Button_Answer' class='Buttons' onClick= 'Answer()'> Solve </div> <div id='left_arrow' onClick= 'ArrowClick (this,0)'>Previous </div> <div id='right_arrow' onClick= 'ArrowClick (this,1)' >Next </div> <div id='Message_background'> </div> <div id= 'message_modal'> <div id='Message'> </div> <div id='Sub_Message'> </div> </div> </div> </div> </body> </html>，也会发生同样的事情。

所以，我陷入了困境–知道为什么它不起作用以及如何解决？

谢谢。

2 个答案:

答案 0 :(得分：3)

我想您可以使用String.prototype.localeCompare代替a.node.title - b.node.title进行正确的排序。如文档所述：

  

localeCompare（）方法返回一个数字，该数字指示参考字符串是按排序顺序位于给定字符串之前还是之后还是与之相同。

以某种方式：

const values = ['random', 'something', 'else', 'text'];
const result = values.sort((a,b) => {
  return a.localeCompare(b);
});

console.log(result);

所以我想在上述情况下应该是

<Column title="Title"
        dataIndex="node.title"
        key="title"
        sorter={(a, b) => a.node.title.localeCompare(b.node.title)}
        sortDirections={["descend", "ascend"]} />

我希望这会有所帮助！

答案 1 :(得分：2)

@norbitrial's answer是正确的，作为参考，这里是一个通用排序器（用于数字和字符串）：

const sorter = (a, b) => (isNaN(a) && isNaN(b) ? (a || '').localeCompare(b || '') : a - b);

// Usage example with antd table column
[
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    width: '10%',
    // status can be Number or String
    sorter: (a, b) => sorter(a.status, b.status),
    render: Name
  }
]
相关问题
最新问题