javascript - PHP JS .sortable 与多个表（主类别和子元素）

问题描述

这是我想要完成的，但是当我尝试在我的桌子周围制作包装器时（请参阅下面的所有相关代码），它不起作用。这是一个使用 .sortable 的 jsfiddle，它的工作方式与我想要的完全一样（https://jsfiddle.net/phpdeveloperrahul/3dbgov8b/）。

目前的状态和我有什么：

我有几个连接表（question、survey_question、question category、question_questioncategory）和一个查询来提取所有问题及其各自的类别。提取所有内容后，我将使用表格和 foreach 循环来显示类别和问题。一旦我开始从上面的 jsfiddle 添加类 'sortable1' 和 'sortable2' + 's1', 's2'，它就不起作用了。

查询：

从问题 q 中选择 q.question_id、q.question_name、qc.questioncategory_parent 左加入调查问题 sq ON sq.question_id = q.question_id AND sq.survey_id=".$survey_id 。" 左连接 question_questioncategory qqc ON (qqc.question_id = q.question_id) 左连接 questioncategory qc ON (qc.questioncategory_id = qqc.questioncategory_id) + 我在这里有一些 ORDER BY...

查询输出：

+-------------------------------------------------- ---------------------+
| 问题ID | 问题名称 | questioncategory_parent |
+-------------------------------------------------- ---------------------+
| 100 | CAT A 问题 1 | 甲类 |
| 101 | CAT A 问题 2 | 甲类 |
| 102 | CAT B 问题 1 | B 类 |
| 103 | CAT B 问题 2 | B 类 |
+-------------------------------------------------- ---------------------+

PHP：我正在使用一个表和两个 foreach 循环来查找类别（questioncategory_parent）和问题（question_id 和 question_name）。

echo "<table class='table table-sm table-hover table-vcenter'>";
    echo "<tbody class='sortable1'>";

        echo "<tr>"; // start unordered list of categories
            $currentCategory = "";
            $first = true;
                                        
            foreach($query_all_questions_row as $row_cat_qstn) {
            if($currentCategory != $row_cat_qstn['questioncategory_parent']) { // if new category
                if($first) {
                    echo "</tr>"; // end previous sub-category list
                } else {
                    $first = false;
                }                                           
                // category name header row                                         
                echo "<th class='bg-primary-dark text-white'>ID</th>";
                echo "<th class='bg-primary-dark text-white'>".$row_cat_qstn['questioncategory_parent']."</th>";
                                            
                echo "<tr>"; // start new sub-category list
                $currentCategory = $row_cat_qstn['questioncategory_parent']; // remember current category   
                }

                // child elements                                       
                echo "<tr>";
                    echo "<td>";
                        echo $row_cat_qstn['question_id'];
                    echo "</td>";
                    echo "<td>";
                        echo $row_cat_qstn['question_name'];
                    echo "</td>";
                echo "</tr>";   
            }   
                                    
            echo "</tr>"; // end last unordered list of sub-categories                                      
        echo "</tr>"; // end unordered list of categories
    echo "</tbody>";
echo "</table>";

这会按预期输出 - 参见图片： PHP 输出 - A 类和 B 类，下面列出了相应的问题

JS：根据 jsfiddle，我想让这一项工作，但不确定在哪里包含“sortable1”、“sortable2”和各自的“项目：s1 和 s2”。

$(".sortable1").sortable({
    items: ".s1"
});

$(".sortable2").sortable({
    items: ".s2"
});

我尝试了许多变体，将“.sortable”添加到不同的部分（在 PHP 中），但没有一个对我有用...例如，当前版本与“sortable1”一起使用，我只能将问题和类别作为独立项目进行排序. 但是，我想做的是移动整个类别（以及其中的各个问题）并移动问题，但不可能将它们从其类别中移出。 抱歉，如果它看起来很复杂，虽然我觉得这里需要的东西很小，但可能是我需要重新考虑并重写我的整个“PHP”部分来完成这个。

标签： javascriptphpmysql

javascript - PHP JS .sortable 与多个表（主类别和子元素）

问题描述

解决方案

推荐阅读