动态添加和编辑行 [英] Dynamically adding and Editing Rows

问题描述

我的代码做什么:

• 添加项目"按钮将弹出一个包含表单的弹出窗口(#addquoteitem)
• 提交该表单1.从模板中在表格中创建新行，并2.创建隐藏的输入(在jsfiddle中未隐藏)，因为我认为这是将数据提交到服务器的最简单方法
• 提交报价"按钮，然后通过隐藏输入"表单分别将这些行中的每行提交给服务器

  What my code does:

  • An "Add Item" button brings up a popup (#addquoteitem) that contains a form
  • submission of that form 1. creates a new row in a table, from a template and 2. creates hidden inputs (not hidden in jsfiddle) because I thought this was easiest way to submit the data to server
  • A "submit quote" button then submits each of these rows individually to the server via the "hidden input" form

    直到完成后我才意识到(我正在做我的第一个大项目)，用户无法编辑他们的个人项目！！！

    我应该怎么做:

    • 为每行添加一个编辑按钮，以弹出一个弹出窗口，该窗口将使用jquery更改相应行的值
    • 然后更改它，以便在按下最后一个提交报价"按钮之前不创建隐藏的输入".

    JSFIDDLE http://jsfiddle.net/SteveRobertson/XHuVS/1/ JSFIDDLE

    我的问题:我的方法正确吗?我之所以问是因为我不认为这是事实，而是觉得自己已经把自己编入了一个角落.我不知道该怎么做.如果不.以可以将行提交到服务器的方式动态编辑行的正确方法是什么?当我为模板调用此函数时，我假设我必须添加某种类型的计数器来为每一行赋予唯一的ID，或者可以用另一种方式来标识该行吗?

    My Question: Is my approach the correct method? I only ask because I do not think it is, but feel as though I have coded myself into a corner. I have no idea what to do. if not. What is the correct method for dynamically editing rows in a manner they can be submitted to a server? When I call this function for the template, I assume I have to add a counter of some sort to give each row a unique ID, or can the row be identified in another manner?

      function template(row, quoteItem) {
        row.find('.item_num').text(quoteItem.number);
        row.find('.item_desc').text(quoteItem.description);
        row.find('.item_price').text(quoteItem.price);
        return row;
      }
    

    尽管我不知道如何精确地执行我的方法所需要的大多数方法，但我只要求正确的方向.我知道这既是冗长的问题，又是冗长的代码.感谢您抽出宝贵的时间阅读本文档以及任何建议或建议.谢谢.

    Although I do no know how exactly to do most of the methods my approach entails I only ask for a point in the right direction. I understand this is a lengthy question as well as lengthy code. I appreciate you taking the time to read this and any suggestions or advice. Thank You.

    推荐答案

    我同意您的计划方法，请在提交时生成表单数据.这样可以省去保持隐藏字段更新的麻烦.

    I agree with your planned approach, generate the form data at the time of submission. This will save you the trouble of keeping the hidden fields updated.

    隐藏字段:

    您当前的代码生成具有相同ID testid的元素.您可以删除该ID，因为它们将不会用于任何用途.如果确实需要ID，请确保它们是唯一的.

    Your current code generates elements with the same ID testid. You can remove the ID since they are not going to be used for anything. If you do require the IDs, make sure they are unique.

    所生成元素的命名并不表示它们之间的任何关系，我建议使用如下命名方案:

    The naming of the element generated do not indicate any relationship between them, I'd suggest a naming scheme like:

    items[0].name
    items[0].description
    items[0].price
    items[1].name
    items[1].description
    items[1].price
    ...
    

    您还可以考虑通过 AJAX 提交表单.在这种情况下，您可以在提交时构造表单数据对象.它可能看起来像:

    You can also consider submitting the form via AJAX. In this case you can construct the form data object on submission. It could look like:

    [ 
      {name: 'Item 1', description: 'first item', price: '123'},
      {name: 'Item 2', description: 'second item', price: '234'},
      ...
    ]
    

    这是一个问题，其中显示了如何处理此问题在服务器端使用PHP.

    Here's a question that shows how to handle this on the server-side with PHP.

    行生成:

    您可以在要生成的行中添加唯一的ID，但前提是您需要分别处理这些行.使用计数器生成附加到字符串的值将可用于生成唯一ID.

    You could add a unique ID to the rows being generated, but only if you need to address the rows individually. Using a counter to generate a value which is appended to a string will work for generating the unique IDs.

    edit选项的一种解决方案是将表上的click事件绑定并使用函数上的rel ="nofollow noreferrer">.

    One solution for the edit option would be to bind the click event on the table and check for the edit link using the on function.

    $('#quote').on('click', '.edit-link', function (e) {
      e.preventDefault();
      //$(this) - edit link
      //$(this).closest('tr') - parent table row
      //$(this).closest('tr').find('.item_num') - span containing number of items
      //$(this).closest('tr').find('.item_num').text() - number of items
      ...
    });
    

    表格行

    <tr>
        <td><span class="item_num">1</span></td>
        <td><span class="item_desc">rt</span></td>
        <td><span class="item_price">asd</span></td>
        <td><a href="#" class="edit-link">Edit</a></td>
    </tr>
    

    在编辑完成后，存储父级(TR)的引用(ID或对象)以更新值.

    Store the parent's (TR's) reference (ID or object) to update the values once the editing is complete.

    这不是一个全面的解决方案，但我希望它能为您带来一些可循的线索.

    This isn't a comprehensive solution, but I hope it gives you a few leads to follow.

    这篇关于动态添加和编辑行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！