Использование только одной функции для обновления разных столбцов таблицы в базе данных - PullRequest
Новая
       24

Использование только одной функции для обновления разных столбцов таблицы в базе данных

0 голосов
/ 27 февраля 2012 
id  car         make          sales
 1  panamera    porsche       100 
 2  italia      ferrari       200
 3  volante     astonmartin   300
 4  avantador   lamborghini   400
 5  slk         mercedes      500

Итак, ребята, у меня есть эта простая таблица в моей базе данных. И я собираюсь повторить эту таблицу в цикле. 

<ul>
<?php  
$query = "SELECT * FROM inplace LIMIT 0, 6";    
$result = mysql_query($query) or die ('Query couldn\'t be executed');  
while ($row = mysql_fetch_assoc($result)) {
echo '<li class="editable" id="'.$row['id'].'">'.$row['car'].'</li>';
echo '<li class="editable2" id="'.$row['id'].'">'.$row['make'].'</li>'; 
}
?>
</ul>

Идея состоит в том, чтобы обновить эту таблицу с помощью редактора на месте jQuery. Так вот код- 

$(document).ready(function() 
{
$(".editable").bind("dblclick", replaceHTML);
$(".editable2").bind("dblclick", replaceHTML2);
$(".btnSave, .btnDiscard").live("click", handler);

function handler()
    {

        if ($(this).hasClass("btnSave"))
            {

                var str = $(this).siblings("form").serialize();
                $.ajax({
                        type: "POST",
                        async: false,
                        url: "handler.php",
                        data: str,
                }); 

            }

    } 

function replaceHTML()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type=\"text\" name=\"car\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   


    }

    function replaceHTML2()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type=\"text\" name=\"make\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   


    }

}
);

Это код редактирования на месте, я получил его из интернета, и я просто разорвал его до базового уровня, чтобы понять коды. Не беспокойтесь о запросе на обновление, он находится в "handler.php". Проблема здесь в том, что я должен написать отдельную функцию для каждого столбца. В этом случае мне нужно написать отдельную функцию для обновления столбца 'car', отдельную функцию для обновления столбца 'make' и так далее. Я не думаю, что это правильный метод. Потому что здесь у меня просто 3 столбца. Что если бы у меня было от 10 до 15 столбцов? Я не думаю, что написание 15 функций является правильным методом. И «$ (this) .html ()» принимает значение только одной формы. Пожалуйста, помогите.

1 Ответ

1 голос
/ 27 февраля 2012

Измените свой PHP-скрипт, чтобы генерировать HTML, подобный следующему: 

<table>
<tbody>
    <tr data-id="1">
        <td data-col="car">panamera</td>
        <td data-col="make">porsche</td>
        <td data-col="sales">100</td>
    </tr>
</tbody>
</tbody>

id строки базы данных, соответствующей каждой строке таблицы HTML, указывается с data-id в каждом tr.И каждый td указывает, какому столбцу БД он соответствует, используя data-col.

. Используя эту информацию, вы можете передать достаточно информации обратно в скрипт PHP, который обновляет базу данных.Таким образом, по существу, когда щелкают ячейку, вы можете получить имя ее столбца, используя: 

$(this).data('col')

И вы можете получить идентификатор для ее строки, используя: 

$(this).parent('tr').data('id')

Затем вы можете передать этина страницу PHP, которая обновляет БД.

РЕДАКТИРОВАТЬ 1:

Вы можете использовать ul/li вместо table/tr/td.Вы также можете использовать class=car, class=make, etc. вместо data-col='car', data-col='make', etc., если используете старую версию jQuery, которая не поддерживает атрибуты data- в стиле HTML5.

РЕДАКТИРОВАТЬ 2: Полное решение

Измените ваш цикл while следующим образом: 

while ($row = mysql_fetch_assoc($result)) {
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="car">'.$row['car'].'</li>';
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="make">'.$row['make'].'</li>'; 
}

Как вы можете видеть, мы храним идентификатор строки базы данных в data-id и имя столбца базы данных в data-col.

Теперь сдля этой настройки вам понадобится только один обработчик: 

function replaceHTML()
{
    var rowId   = $(this).data('id');
    var colName = $(this).data('col');
    var buff = $(this).html().replace(/"/g, "&quot;"); // Are you sure you need this?
    $(this).addClass("noPad")
            .html("<form><input type=\"text\" name=\"" + colName + "\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + rowId + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
            .unbind('dblclick', replaceHTML);   
}

$(".editable").bind("dblclick", replaceHTML);

Наконец , всегда старайтесь писать читаемый код!Пожалуйста!:)

РЕДАКТИРОВАТЬ 3: JSFiddle

Пожалуйста, смотрите это живое решение .Он показывает, как вы можете получить имя столбца и идентификатор строки.Вам просто нужно адаптировать его для работы с вашим PHP-скриптом.

...