Отображение временных данных на стороне клиента в таблице

Question

Пожалуйста, обратитесь к этому изображению, чтобы я мог объяснить проблему лучше. У меня есть форма Master / Detail (в данном случае ведомость материалов), в которой данные хранятся в 2 таблицах базы данных.

Верхняя часть формы (Продукт, Количество) хранится в основной таблице, а со вставленным идентификатором (в виде FK) в таблицу «Сведения» заполняется столько компонентов и количества, сколько указано ниже.

Но до тех пор, пока не будет нажата последняя команда SAVE (отправить), я сохраняю идентификатор компонента (значение из раскрывающегося списка) и количество (из поля ввода) в объекте JavaScript в массиве:

var products = [];
        $("#add").click(function(){

            var prodname_fk = $("select").val();
            var prodname = $("select option:selected").text();
            var quantity = $("#quantity").val();

                //Checks if the product or quantity has not been selected
                if (quantity == '' || prodname_fk == '')
                {
                    alert("Please select product and quantity!");
                    return false;
                }
            //Pushes the Objects(products [id,quantity,prodname,uom]) into the Array    
            products.push({id:prodname_fk,prodname:prodname,quantity:quantity});

                //Test Purpose CONSOLE output
                var i = 0;
                $.each(products, function(){
                        console.log(products[i].id + " --> " + products[i].prodname + " --> " + products[i].quantity);
                        i++;

                });

            //Emptys the product and quantity
            $("select").val("");
            $("#quantity").val(""); 
        });

Я также получаю название продукта (текст из выпадающего списка) для отображения в таблице ниже.

Итак, мой вопрос:

• Как вывести компонент и количество в таблицу с надписью «Нет записей!» После каждого нажатия кнопки ADD? (ДОБАВИТЬ не передает и не обновляет страницу)

• Как добавить функцию «удалить» в одну таблицу для каждого объекта из массива?

• Как я могу проверить, существует ли уже компонент в массиве, и просто сложить количество?

Это моя форма:

Заранее большое спасибо!

p.s. Я пытаюсь добиться чего-то вроде этого: Как сохранить временные данные на стороне клиента и затем отправить их на сервер

Answer 1

Чтобы добавить значения в вашу таблицу, посмотрите на $.append() и $.appendTo().Создайте новую строку с помощью $("<tr />") и добавьте ее в свою таблицу с помощью $.appendTo():

var newRow = $("<tr />").appendTo("#myTable");

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

var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
    .appendTo("#myTable")
    .append("<td class=\"code\" />")
    .append("<td class=\"component\">" + prodname + "</td>")
    .append("<td class=\"quantity\">" + quantity + "</td>")
    .append("<td class=\"uom\" />")
    .append("<td><span class="deleteButton">delete</span></td>");

Удалить строку следующим образом:

$("#myTable .deleteButton").click(function(e) {
    $(this).closest("tr").remove();
});

Для хранения данных я бы использовал объект, а не массив:

var products = {};
$("#add").click(function() {

    ...

    if (prodname_fk in products) {
        products[prodname_fk].quantity += quantity;
        $("#myTable tr[productId='" + prodname_fk + "'] .quantity").text(products[prodname_fk].quantity)
    }
    else {
        products[prodname_fk] = { prodname:prodname, quantity:quantity };
        var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
            ... // append to table and append cells
        $(".delete", newRow).click(function(e) {
            delete products[$(this).closest("tr").attr("productId")];
            $(this).closest("tr").remove();
        });
    }

    ...

});

Не проверено, поэтому, пожалуйста, простиопечаток.Понятия верны.

Answer 2

один из возможных способов - поместить ваши временные данные в скрытые поля рядом с обычными видимыми полями, например, вы можете легко получить значения этих скрытых полей с помощью javascript и отправить их на сервер, а также потому, что скрытые поля являются входными тегами, если вы отправить форму, вы можете получить значения со стороны сервера, как любой другой тег ввода.

Answer 3

при условии, что вы хотите отобразить это в html-таблице с компонентами thead и tbody, вы можете написать что-то подобное в событии click вашего метода add

$('<tr>').append($('<td>').text(prodname))
             .append($('<td>').text(quantity))
             .append($('<td>').append($('<button>').text('Delete').addClass('Delete').attr('id', CurrentIDHere)))
             .appendTo('tbody');

вы можете поместить этот код в событие click кнопки addпосле вашей проверки логики.Вы можете добавить обработчик щелчков для класса удаления, где вы получите идентификатор подробного раздела и удалите соответствующую запись из вашего массива.хотя код не проверен

Answer 4

Поскольку вы пометили его Ajax, вот как вы делаете вызов ajax и возвращаете обработанные данные

Вам нужно сделать запрос XML Http к сервлету, для чего вам нужно создать объект XML Http в javascript на вашей странице HTML

var myxmlhttpobj=new GetXmlHttpObject();
function GetXmlHttpObject()
    {
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            return new XMLHttpRequest();
        }
        if (window.ActiveXObject)
        {
            // code for IE6, IE5
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }

Теперь вам нужно сделать запрос к Серверу из JavaScript

var url="urlofPHPpage";
var para="parmeter1=prodname_fk&parameter2=prodname&parameter3=quantity;
myxmlhttpobj.open("POST",url,true);
myxmlhttpobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myxmlhttpobj.setRequestHeader("Content-length", para.length);
myxmlhttpobj.setRequestHeader("Connection", "close");
myxmlhttpobj.onreadystatechange=ajaxComplete;
myxmlhttpobj.send(para);

На сервере вам нужно обработать результат и отправить его обратно в виде строки:

Обработка ввода, подготовка добавленного оглавления и отправка его обратно

Ввести строку в виде строки

Когда возвращается запрос myxmlhttpobj.onreadystatechange = ajaxComplete; будет называться

function ajaxComplete(){


    if(myxmlhttpobj.readyState==4){

      ///Display the result on the HTML Page 

    }
}

Это должно помочь ...

Также взгляните на jQuery Ajax API .