About the implementation of two-level directory drag-and-drop sequencing (source code example download) _php instance

Source: Internet
Author: User
The two-level directory format is often encountered in development projects. For example, the article module, product module, many should be based on the two-level classification form. The general solution sorting scheme, whether it is a first-class classification or a multilevel classification, is set by the administrator to manually edit the sorted values of sibling classifications in the background, depending on the size of the value to determine the order of the display. This way of operation is more cumbersome. jquery has a drag-and-drop approach to sorting, from the user level, such operations are very intuitive, easy to operate. Once in a project, the product classification is a class two classification, showing as shown in the following:

On the sorting issue, the decision was made to use jquery's drag-and-drop plug-in to sort the first-level categories and drag-and-drop the sub-categories below a classification.

Drag and drop the "+" icon at the foreground of the first class category and drag-and-drop sorting of the first class category.

Drag-and-drop the "-" icon in front of category two classification under a category, and drag the rank of category two.

Here is the database structure and program code to implement the above functions

database structure

Copy CodeThe code is as follows:
CREATE TABLE IF not EXISTS ' product_classify ' (
' id ' int (ten) unsigned not NULL auto_increment,
' ParentID ' int (ten) unsigned not NULL,
' Name ' varchar (DEFAULT NULL),
' Sort ' int (ten) unsigned not NULL DEFAULT ' 0 ',
PRIMARY KEY (' id ')
) Engine=myisam auto_increment=27 DEFAULT Charset=utf8;

Import Data
Copy CodeThe code is as follows:
INSERT into ' product_classify ' (' id ', ' parentid ', ' name ', ' sort ') VALUES
(1, 0, ' magic props ', 1),
(2, 1, ' Close-up Magic ', 2),
(3, 1, ' stage magic ', 1),
(4, 1, ' Liu Qian Magic ', 3),
(5, 0, ' thousand props ', 2),
(6, 5, ' Mahjong Pai Gow series ', 3),
(7, 5, ' Poker series ', 1),
(8, 5, ' Dice series ', 5),
(9, 5, ' Variable Card series ', 4),
(10, 5, ' High-tech series ', 2);

Style code
Copy CodeThe code is as follows:


loading JS file and code
Copy CodeThe code is as follows:




Display Code
Copy CodeThe code is as follows:


Filter subclasses by where condition, show only categories (level one)
$sql = ' Select A.id,a.parentid,a.name,a.sort,count (b.id) as Count from Product_classify as a ';
$sql. = ' LEFT join Product_classify as B on b.parentid=a.id where a.parentid=0 ';
$sql. = ' GROUP by a.id Order by A.sort ';
$query =mysql_query ($sql);
if (mysql_num_rows ($query)) {
while ($arr =mysql_fetch_array ($query)) {
Echo '

      ';
      echo "
    • $arr [Name] ($arr [count]) ";
      $sql = "Select A.id,a.name,a.sort from Product_classify as a where a.parentid= $arr [id] GROUP by a.id order by A.sort";
      $query 2=mysql_query ($sql);
      if (Mysql_num_rows ($query 2)) {
      echo "";
      while ($arr 2=mysql_fetch_array ($query 2)) {
      echo "
        ";
        echo "
      • $arr 2[name]
      • ";
        echo "
      ";
      }
      Echo ';
      }
      echo "
";
}
}else{
Echo '
  • No Product Categories
  • ';
    }
    ?>


    Sort Operation sort.php
    Copy CodeThe code is as follows:
    Include (".. /conn.php ");
    $menu =$_get[' menu '];
    Switch (strtolower ($menu [0])) {
    Case ' productclassify ':
    $table = ' product_classify ';
    Break
    }
    for ($i =1; $i <>
    $sql = ' UPDATE '. $table. ' SET sort= '. $i. ' WHERE id= '. $menu [$i];
    mysql_query ($sql);
    }
    ?>

    Example download
    The realization and demonstration of the two-level catalogue drag-and-drop sorting source download

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.