Home>

When we are manipulating list data,Need to adjust the order of data rows,Like moving up and down,Pin row data, etc.These operations can be completed by clicking the button on the front end,And with simple dynamic effects,Easily sort table data.

Operation effect diagram:

html

On the page is a simple data table,We place three links, "Move Up", "Move Down" and "Top" in the data row,And define three class attributes respectively, let's implement these operations through jquery.

<table>
 <tr>
  <td>html5 Get geolocation information</td>
  <td>2015-04-25</td>
  <td><a href="#">Move up</a><a href="#">Move down</a><a href="#">Sticky<;/a></td>
 </tr>
 <tr>
  <td>Fixed footer advertising bar implemented by css + cookie</a></td>
 </tr>
 ...
</table>

jquery

We need to load the jquery library file in advance,Then bind the click events of the three operations, move up, move down, and top. Take "move up" as an example, when clicked,Get the content of the currently clicked row,And tr, and then determine whether the line is the first line,If not the first line,Then insert that line before the previous line,Realized the purpose of interchange.Of course we can add fadeout () and fadein () transition effects to the line,It will look more vivid,Otherwise the process of moving up will flash.The "Move Down" and "Top" operations are similar.Please see the code:

$(function () {
 //Move up
 var $up=$(". up")
 $up.click (function () {
  var $tr=$(this) .parents ("tr");
  if ($tr.index ()!=0) {
   $tr.fadeout (). fadein ();
   $tr.prev (). before ($tr);
  }
 });
 //move down
 var $down=$(". down");
 var len=$down.length;
 $down.click (function () {
  var $tr=$(this) .parents ("tr");
  if ($tr.index ()!=len-1) {
   $tr.fadeout (). fadein ();
   $tr.next (). after ($tr);
  }
 });
 //Sticky
 var $top=$(". top");
 $top.click (function () {
  var $tr=$(this) .parents ("tr");
  $tr.fadeout (). fadein ();
  $(". table"). prepend ($tr);
  $tr.css ("color", "#f60");
 });
});

Of course, your project should be combined in practical applications,When the operations "Move Up", "Move Down" and "Sticky" are completed, ajax asynchronous interaction with the background program should be performed.Ensure that the sorted data is actually recorded in the background,After refreshing, the new sorting results will be displayed,This article does not explain the asynchronous operation in detail.

  • Previous Detailed mouse event design in Java graphical programming
  • Next php + ajax implement input read database display matching information