我非常感谢关于解决此问题的最有效方法的建议。
我正在构建一个简单的 javascript 应用程序,它显示记录列表,并允许用户通过单击记录行中的"编辑"链接来编辑记录。用户还可以单击"添加"链接弹出一个对话框,允许他们添加新记录。
这是它的工作原型: http://jsfiddle.net/FfRcG/
您会注意到,如果单击"编辑",则会弹出一个对话框,其中包含一些预设值。而且,如果单击"添加",则会弹出一个包含空值的对话框。
我需要有关如何解决两个问题的帮助
-
我相信我们需要将索引传递给我们的编辑对话框并引用 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>
1) 索引可以通过隐藏值或更改表单 url 来传递。如果对表单使用模板,则可能只需动态填写表单并重新呈现即可。如果您的网站是 RESTful,则更改网址可能是更合适的选择。
然后,您可能还需要为 URL 编写帮助程序。辅助函数将帮助找出适当的 url,具体取决于它是"新的"还是"编辑的"。接下来,您可以使用"序列化"http://api.jquery.com/serialize/来获取表单中的所有字段,并将其转换为 $ 的键值对。如果需要,开机自检。
2)您有2个选择:尝试制作1个表单,或使用模板。如果你一开始只有 1 个表单,那么你唯一的选择是使用 .val() 来更改表单的值。
如果使用模板方法,则可以只将模板嵌入到页面上,也可以使用 $ 拉取最终表单。在服务器上获取。一个不错的方法可能是使用 haml 或 jade 作为您的模板语言。然后,您可以混合和匹配这些方法。我的意思是,您实际上可以在页面上创建一个模板标签,并在页面最初呈现时加载模板,并仅用部分表单填充它。然后,您可以在其他各种页面上使用该表单,包括不在对话框中的基本编辑页面。
我对你的演示进行了一些重要的编辑,并发表了很多评论。 http://jsfiddle.net/FfRcG/1/
首先,我将数据从数组数组重新映射到对象数组。当您可以编写像 '<td>'+item.name+'</td>'
VS '<td>'+item[5]+'</td>'
这样的字符串时,解析 html 通常要容易得多。 阅读什么是什么和调试更简单。以这种方式从服务器获取数据并不是要在服务器上添加更多的代码。
我在原始数据中为每个成员添加了一个ID,这将有助于与服务器通信和存储数据。这个 id 也作为 html data-
属性添加到编辑按钮中,使用 jQuery data() 方法可以轻松读取(参见小提琴示例)
现在不用担心在本地存储数据可能会更容易,并且每次进行添加/编辑时只需使用 ajax 调用更新服务器。出于这个原因,我设置了一个行解析器,以便在编辑按钮被选中时更新您的编辑表单。为每列添加类有助于简化表单更新过程。我对本地存储的想法是现在只少了一步,服务器将与页面保持同步。
请记住,元素 ID 在页面中必须是唯一的,因此需要更改表单中的重复项。
至于 2 个表单之间的视觉效果,我在对话框中添加了标题选项,并稍微更改了"保存"按钮文本。如果你想知道对话框的css来自哪里,它在小提琴的"管理资源"面板中设置,来自谷歌CDN。
这些想法应该会有所帮助。 祝你好运。
研究如何使用克隆方法,并在用户单击添加/编辑链接时动态创建它(如果您有多个编辑)。 然后,您可以通过选择输入并设置其val
属性来动态设置值。
至于传递编辑的 id,您可以使用:
<input type="hidden" name="index" value="" />
或者你可以像这样向div 添加一个属性:
<div id="edit" data-index="1">
然后用
$('#edit').click(function() {
$(this).attr('data-index');
});
在单击处理程序中获取 ID。
我尝试一些关于输入值的东西。您可以使用 .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;
});