Question

我非常感谢有关最有效方法的建议。

我正在构建一个简单的javascript应用程序，它显示一个记录列表，并允许用户通过单击记录行中的“编辑”链接来编辑记录。用户还可以单击“添加”链接弹出一个对话框，允许他们添加新记录。

您会注意到，如果单击“编辑”，会弹出一个带有某些预设值的对话框。并且，如果单击“添加”，将弹出一个包含空值的对话框。

我需要有关如何处理两个问题的帮助

我认为我们需要将索引传递给编辑对话框并引用JSON中的值，但我不确定在用户点击编辑时如何传递索引。
令我困扰的是编辑和添加div内容非常相似（编辑只是预先填充值）。我觉得有一种更有效的方法可以做到这一点，但我不知所措。

这是我的参考代码

$(document).ready( function(){

// Our JSON (This would actually be coming from an AJAX database call)
people = {
    "COLUMNS":["DATEMODIFIED", "NAME","AGE"],
    "DATA":[
    ["9/6/2012", "Person 1","32"],
    ["9/5/2012","Person 2","23"]
    ]
} 


// Here we loop over our JSON and build our HTML (Will refactor to use templating eventually)
members = people.DATA;  

var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>';

for(var i=0;i<members.length;i++)
{
    newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>';
    newcontent+= '<td>' + members[i][1] + '</td>';
    newcontent+= '<td>' + members[i][2] + '</td>';
    newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>';
}
newcontent += "</table>";
$("#result").html(newcontent);

// Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");

    // Not sure the most efficient way to change our dialog field values
    $("#name").val() // ???

    alert($());
    return false;
});

// Bind a dialog to the add link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#add").dialog("open");

    return false;
});

// Bind a dialog to our edit DIV
$("#edit").dialog();

// Bind a dialog to our add DIV
$("#add").dialog(); 

});

这是HTML

<h1>People</h1>

<a href="#" class="add">Add a new person</a>

<!-- Where results show up -->
<div id="result"></div>

<!-- 
Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values.
-->
<div id="edit">
<form>
    <p>Name:<br/><input type="text" id="name" value="foo"></p> 
    <p>Age:<br/><input type="text" id="age" value="33"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>

<!-- 
Here's our add DIV - This layout is so similiar to our edit dialog. What is the
most efficient way to handle a situation like this?
-->
<div id="add">
<form>
    <p>Name:<br/><input type="text" id="name"></p>
    <p>Age:<br/><input type="text" id="age"></p>
    <input type="submit" value="Save" id="submitEdit">
</form>
</div>

Answer 1

1）索引可以通过隐藏值或通过更改表单URL来传递。如果您使用表单的模板，您可以即时填写表单并重新呈现它。如果您的网站是RESTful，则网址更改可能是更合适的选择。

然后，您可能还需要为URL编写帮助程序。辅助函数将帮助确定适当的URL，具体取决于它是“新”还是“编辑”。接下来，您可以使用“序列化”http://api.jquery.com/serialize/来获取表单中的所有字段，并在需要时将其转换为$ .POST的键值对。

2）您有2个选项：尝试制作1个表单，或使用模板。如果您在开始时只有一个表单，那么您唯一的选择是使用.val（）来更改表单的值。

如果您使用模板方法，您可以只在页面上嵌入模板，也可以在服务器上使用$ .GET提取最终表单。一个不错的方法可能是使用haml或jade作为模板语言。然后，您可以混合和匹配方法。我的意思是你实际上可以在你的页面上创建一个模板标签，并在页面最初渲染时加载模板，并仅使用部分表单填充它。然后，您可以在其他各个页面上使用该表单，包括不在对话框中的基本编辑页面。

Answer 2

我对你的演示做了一些重要的编辑，并提出了不少评论。 http://jsfiddle.net/FfRcG/1/

首先，我将数据从数组数组重新映射到对象数组。当你可以编写像'<td>'+item.name+'</td>' VS '<td>'+item[5]+'</td>'这样的字符串时，解析html通常会容易得多。阅读什么是什么和调试更简单。以这种方式从服务器获取数据并不是要在服务器上添加更多代码。

我为原始数据中的每个成员添加了一个ID，这有助于与服务器通信和存储数据。这个id也被添加到编辑按钮中，作为html data-属性，可以使用jQuery data（）方法轻松读取（参见小提琴示例）

现在可能更容易担心本地存储数据，并且每次添加/编辑时只需使用ajax调用更新服务器。出于这个原因，我设置了一个行解析器来在编辑按钮被clciked时更新您的编辑表单。为每列添加类有助于简化表单更新过程。我对存储本地的思考是现在只需要少一步，服务器将保持与页面保持同步。

请记住，元素ID在页面中必须是唯一的，因此需要更改表单中的重复项。

至于两个表单之间的视觉效果，我在对话框中添加了标题选项，并稍微更改了“保存”按钮文本。如果您想知道对话框的css来自哪里，它会在小提琴的“管理资源”面板中设置，并来自Google CDN。

这些想法应该有所帮助。祝你好运。

Answer 3

使用clone方法查看，并在用户点击添加/编辑链接时动态创建（如果您有多个编辑）。然后，您可以通过选择输入并设置其val属性来动态设置值。

至于传递编辑的ID，您可以使用：

<input type="hidden" name="index" value="" />

或者你可以像这样在div中添加一个属性：

<div id="edit" data-index="1">

然后用

引用它

$('#edit').click(function() {
    $(this).attr('data-index');
});

点击处理程序中的

以获取ID。

Answer 4

我尝试了一些输入值。您可以使用.attr（）来更改输入值。在这里工作（只从jSON调用第一个人。）复制http://jsfiddle.net/serkanalgur/zs3tW/

我添加了什么;

    // Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");
    $('input#name').attr('value', people.DATA[0][1]); // for name
    $('input#age').attr('value', people.DATA[0][2]); // for age. but needed dynamic ids
    return false;
});

构建我的第一个Javascript应用程序（jQuery），在某些方面挣扎

4 个答案: