1

我非常感谢有关解决此问题的最有效方法的建议。

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

这是一个工作原型：http: //jsfiddle.net/FfRcG/

您会注意到，如果您单击“编辑”，则会弹出一个对话框，其中包含一些固定值。而且，如果您单击“添加”，则会弹出一个包含空值的对话框。

我需要有关如何解决两个问题的帮助

  1. 我相信我们需要将索引传递给我们的编辑对话框并引用 JSON 中的值，但我不确定当用户单击编辑时如何传递索引。

  2. 令我困扰的是 Edit 和 Add div 的内容是如此相似（Edit 只是预先填充了值）。我觉得有一种更有效的方法可以做到这一点，但不知所措。

这是我的代码供参考

$(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>
4

4 回答 4

1

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

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

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

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

于 2012-06-25T03:13:05.697 回答
1

我对您的演示进行了一些重要的修改，并发表了很多评论。 http://jsfiddle.net/FfRcG/1/

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

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

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

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

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

其中一些想法应该会有所帮助。祝你好运。

于 2012-06-25T04:22:46.187 回答
0

我尝试了一些关于输入值的事情。您可以使用 .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;
});
于 2012-06-25T04:20:22.537 回答
0

研究使用克隆方法，并在用户单击添加/编辑链接时动态创建它（如果您有多个编辑）。然后，您可以通过选择输入并设置它们的val属性来动态设置值。

至于传递 id 进行编辑，您可以使用：

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

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

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

然后用

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

在点击处理程序中获取 id。

于 2012-06-25T03:16:39.677 回答