Как я могу сохранить порядок сортировки элементов в моей базе данных и обновить их при повторной сортировке - PullRequest
Новая
       3

Как я могу сохранить порядок сортировки элементов в моей базе данных и обновить их при повторной сортировке

0 голосов
/ 18 декабря 2018

У меня есть список категорий, в которые я могу добавлять вопросы под каждой категорией, а также я могу добавлять новые категории.У каждой категории есть идентификатор, который представляет собой число с -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.Этот идентификатор - это то, что я хочу сохранить в базе данных вместе с категорией, удаляя часть -order.

В моей таблице categories я уже публикую все категории с правильным tid (идентификатор шаблона)и иметь столбец 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, но я не уверен, как связать это с правильной категорией.

Может быть, мне нужно сохранить все идентификаторы в объекте и опубликовать это на моем phpсценарий

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...