如何将元素的排序顺序存储在数据库中，并在对元素进行重新排序时进行更新

Question

我有一个类别列表，可以在每个类别下添加问题，也可以添加新类别。每个类别都有一个ID，该ID是后面带有-order的数字，例如4-order。我可以使用有效的jQuery sort()对类别进行排序，排序时的HTML输出也正是我想要的。

现在我需要将该订单存储到我的数据库中。

这是我的html设置示例：

<form id="lijstform">
    <div class="row">
        <div class="col-md-8">
            <label class="lijstnaamtitle">Lijst naam</label>
            <label class="displaynonecoid" id="coid">57</label>
            <input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
        </div>
    </div>
    <div id="dynamic_field" class="ui-sortable">
        <div class="row sortwrap ui-sortable-handle" id="2-order">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="2. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap ui-sortable-handle" id="1-order" style="">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">
                <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
        <div class="row sortwrap" id="4-order" style="">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="4. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="3-order">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="3. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="5-order">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="5. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
    </div>
</form>

我使用AJAX将数据发布到一个php脚本中，该脚本已将所有类别/问题存储到我的数据库中。除类别的排序顺序外，所有作品。

这是我的jquery / ajax：

const template =
'<div class="row sortwrap">'+
'  <div class="col-md-8">'+
'    <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />'+
'    <i class="mdi mdi-sort dragndrop"></i>'+
'    <div class="questionlist questionwrap">'+
'      <div class="row">'+
'        <div class="col-md-8">'+
'          <button class="btn btn-success questionbutton">Extra vraag</button>'+
'          <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />'+
'        </div>'+
'        <div class="col-md-4">'+
'        </div>'+
'      </div>'+
'      </div>'+
'    </div>'+
'    <div class="col-md-4"> '+
'    <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>'+
'  </div> '+
'</div>';
const vraagTemplate =
  '<div class="row" id="question">' +
  '  <div class="col-md-8">' +
  '    <input type="text" name="question[]" class="form-control name_list questioninput" />' +
  '  </div>' +
  '  <div class="col-md-4">' +
  '    <button class="btn btn-danger btn_remove">X</button>' +
  '  </div>' +
  '</div>';

// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
  $('#input-field-id').val($('#input-field-id').val() + 'more text');
  // Sortable code
  let df = $('#dynamic_field');
  df.find('input[name^=cat]').each(function(i) {
    // Als id niet bestaat doe het volgende (anders worden alle ids opnieuw geupdate)
    if (!this.placeholder)
      $(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
  });
  df.find('.sortwrap').each(function(i) {
    // Als id niet bestaat doe het volgende (anders worden alle ids opnieuw geupdate)
    if (!this.id)
      $(this).attr("id", i + 1 + "-order");
  });
  df.find('.questionlist').each(function() {
    $(this).find('input[name^=qu]').each(function(i) {
      $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
    });
  });
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
  let $ql = $(this).closest('.questionlist');
  $ql.append($(vraagTemplate));
  updatePlaceholders();
});

// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
  $(this).closest('.row').remove();
  updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
  $('#dynamic_field').append(t);
  updatePlaceholders();
});

$(function() {
  $('#addcategory').trigger('click');
  $('#question').sortable({
    connectWith: '#question'
  });
  $('#dynamic_field').sortable({
    cancel: '.questionwrap, input',
    placeholder: "ui-state-highlight"
  });
});

$('form').submit(false);

$('#send').click(function() {
  output.textContent = "";
  var entries = new FormData(document.forms[0]).entries();
  for (var pair in entries) {
  output.textContent += pair + "\n";
  }
});




$( ".lijstbutton" ).on( "click", function( event ) {
    event.preventDefault();
    // file that data is posted to:
    url = 'includes/createlist.php';
    // Serialized form
    $lijst = $( '#lijstform' ).serializeArray();
    // Id of company list is from
    $companyid = $( '#coid' ).text();
    // post the data
    var posting = $.post(url, {
      lijst: $lijst,
      companyid: $companyid
    });
    // show result in div
    posting.done(function( data ) {
     $( ".lijstresult" ).empty().slideDown('fast').append( data );
    });
});

在上面的代码中，我可以创建新的类别和问题，并在每个类别后添加id，-order。该ID是我要与类别一起存储在数据库中的内容，剥离了-order部分。

在我的categories表中，我已经发布了所有带有正确的tid（模板ID）的类别，并且有一个order列，此刻什么也没有存储。

这是我目前使用PHP存储所有内容的方式：

$conn = new Connection;

$arr = $_POST['lijst'];

$companyid = $_POST['companyid'];

$store = [];

// pull off first arr element
$title = array_shift($arr);
// save title to store
$store['title'] = $title['name'];

// Insert template title and companyid
$inserttemplate = '
INSERT INTO templates (title, id_company) VALUES ("'.$conn->real_escape_string($title["value"]).'","'.$conn->real_escape_string($companyid).'")';
$inserttemplatecon = $conn->query($inserttemplate);
$lastinserted = $conn->inserted_id();

$currCat = '';

foreach($arr as $a) {
  $val = $a['value'];
  // handle category
  if($a['name'] == 'category[]') {
    // save cat name
    $currCat = $val;
    // init questions array
    $store[$currCat] = [];
  }else {
    // add question to question array
    $store[$currCat][] = $val;
  }
}

array_shift($store);

foreach($store as $cat => $question){
    $insertcats = '
    INSERT INTO questioncat (title, tid) VALUES ("'.$conn->real_escape_string($cat).'", "'.$conn->real_escape_string($lastinserted).'")';
    $insertcatscon = $conn->query($insertcats);
    $lastinserted1 = $conn->inserted_id();

    foreach($question as $q){
        $insertquestions = '
        INSERT INTO questions (question, catid) VALUES ("'.$conn->real_escape_string($q).'", "'.$conn->real_escape_string($lastinserted1).'")';
        $insertquestionscon = $conn->query($insertquestions);
    }
}

如果我打印$store数组，则输出为：

Array
(
    [Category 1] => Array
        (
            [0] => Question 1
            [1] => Question 2
        )

    [Category 2] => Array
        (
            [0] => Question 1
        )

    [Category 3] => Array
        (
            [0] => question 1
        )

)

如您所见，关键是问题，如果要将排序顺序存储在该数组中该怎么办？

我尝试仅通过ajax发布ID，但不确定如何将其与正确的类别相结合。

也许我需要将所有id存储在一个对象中并将其发布到我的php脚本中？