在$ _POST上对可排序的动态添加元素进行分组

Question

嗨，我完全没有想到这样做，这是从

开始的形象

*所有框都是文本框（可编辑）
*所有盒子都是可拖动和可分类的 *所有框都是动态添加的

我有一个生成绿色文本框的“添加组”按钮和生成棕色框的“添加问题”
文本框的示例代码

<input type="text" name="question[]">
<input type="text" name="group[]">

任何人都可以帮助我，如果用户喜欢不在小组中的问题，他就像Q1一样把它放在首位，如果他想把问题放在小组中，他就把它放在小组文本框下面。

可拖动和可排序的部分已经在工作

我需要将它像这样保存到数据库中  

Answer 1

首先，您必须确定每个问题包含哪个组。为此，您可以为组和相关问题保留匹配的索引。

例如，请参阅以下html

<input type="text" name="group[1]">
<input type="text" name="question[1][]">
<input type="text" name="question[1][]">
<input type="text" name="question[1][]">

<input type="text" name="group[2]">
<input type="text" name="question[2][]">
<input type="text" name="question[2][]">
<input type="text" name="question[2][]">

这就是我为形成这样的元素所做的工作，其中i是保存索引的全局js变量。每次创建组时，索引都会递增。

$('#addG').on('click', function (e) {
    $('.divGroup').removeClass('active');
    var div = $('<div>').attr('data-id', i).attr('class', 'divGroup active').html('click me to add questionin this group');
    var g = $('<input>').attr('name', 'group[' + i + ']').attr('class', 'group').attr('placeholder','Enter Group name here');
    div.append(g);
    var ul = $('<ul>').attr('class', 'sortable');
    $(ul).sortable({
      connectWith: ".sortable"
    }).disableSelection();
    var newLi = $('<li><input type="text" placeholder="Question here" class="question" name="question['+ i+  '][]"/></li>').draggable(draggable_opts);
    ul.append(newLi);
    div.append(ul);
    $('#form').append(div);
    i++; // global index incremented
});

我认为使组文本框可拖动是一个坏主意，所以我只是将问题排序。现在问题是如果问题从一个组拖到另一个组，问题索引必须改变。我们可以使用以下代码实现这一目标：

$( "#form" ).on( "sortstop",'.sortable', function( event, ui ) { 
       var divId = $(ui.item).closest('div.divGroup').attr('data-id');
       $(ui.item).attr('name','question['+divId+'][]'); 
} );

我在这里做的是重命名文本框的name属性以匹配组索引。组索引存储在div的自定义属性名称data-id中，您可以在代码中看到它。

现在从服务器，即使组的索引不连续，您也可以按如下方式获取组和问题：

<?php
  $groups = $_POST['group'];
  $question = $_POST['question'];
  foreach($groups as $key=>$val){
    echo "Questions for Group : $val are ";
    print_r($questions[$key]); 
  }
?> 

您可以找到脚本here

的工作示例

Answer 2

你需要两个mysql表

• 组 ID |基团的名称

• 问题 ID | GroupID |问题

让它可以排序。最简单的是每个组的列表，以及每个组下面的“添加问题”按钮。

Answer 3

因为这个项目是可排序的

<input type="text" name="question[]">
<input type="text" name="group[]">

我需要知道谁先来，所以我做的就是命名他们

<input type="text" name="fields[][0]"><!--0 is for group-->
<input type="text" name="fields[][1]"><!--1 is for question-->

通过这样做，我们知道谁先来，PHP做条件

所以这是我的PHP和示例$ _POST数组

Array
(
    [0] => Array([1] => Q1)
    [1] => Array([0] => group abc)
    [2] => Array([1] => Q4)
    [3] => Array([1] => Q3)
    [4] => Array([1] => Q4)
    [5] => Array([0] => Group qwe)
    [6] => Array([1] => Q2)
    [7] => Array([1] => Q6)
)

$questionType = $this->input->post('fields');
    $group = "";
for($i = 0; $i < count($questionType); $i++){
    if(isset($questionType[$i][0])){ 
        $group  = $questionType[$i][0];
    }
    if(isset($questionType[$i][1])){
        $this->model->insertQuestion($group,$questionType[$i][1]); //save to db
    }
}