新增、修改

                                      新增、修改

在做项目之前，对于新增、修改的学习，我一直是用模态框来完成的。但是当自己开始做项目的功能的时候，我才发现，原来还可以搭配监听事件来完成。
一、新增
1、之前的新增步骤是：首先点击页面的新增按钮，弹出新增模态框；其次输入数据；再次点击模态框中的保存按钮，保存数据；最后刷新表格，生成新数据，新增完成。
2、思路是：在页面布局中写好模态框的整体代码；在控制器里写新增的内容的查询方法和新增方法；在< script> </ script>中写新增按钮的点击事件。而点击事件中要包含有重置表单的点击事件和模态框的弹出。如图所示：

在模态框中的保存按钮的点击事件里，写对新增的判断及表格的重载。在模态框中的关闭按钮的点击事件里，写模态框的关闭。这样新增就完成了。
3、我在做项目的新增功能的步骤是：首先点击页面中的新增按钮，在元素输入框中输入新的数据；其次点击页面上的保存按钮保存数据；最后刷新表格，生成新数据，数据新增完成。
4、思路是：在页面布局中写好页面的整体代码；在控制器里写新增的内容的查询方法和新增方法；在< script> </ script>中写新增按钮的点击事件。而点击事件中有编辑事件的监听。如图所示：

在页面中的保存按钮的点击事件里，写对新增的判断及表格的重载。这样新增就完成了。
二、修改
1、之前的修改步骤是：首先点击页面中的修改按钮，弹出修改模态框；其次数据回填到指定的元素中；再次在元素中改变回填的数据，生成新数据；最后点击页面上的保存按钮，保存数据，刷新表格，数据修改完成。
2、思路是：在页面布局中写好模态框的整体代码；在控制器里写修改的内容的查询方法和修改方法；在< script> </ script>中的表格渲染方法中，写自定义列模板的方法。然后在自定义列方法中写修改按钮。如图所示：

在修改按钮的点击事件的方法（如图中的openUpdate（）方法）里写具体的修改代码。例如：数据回填的代码及弹出修改模态框的代码。如图所示：

在模态框中的保存按钮的点击事件里，写对修改的判断及表格的重载。在模态框中的关闭按钮的点击事件里，写模态框的关闭。这样修改就完成了。
3、我在做项目的修改功能的步骤是：首先点击页面中的修改按钮，数据回填到指定的元素中；其次在元素中改变回填的数据，生成新数据；最后点击页面上的保存按钮保存数据，刷新表格，数据修改完成。
4、思路是：在页面布局中写好页面的整体代码；在控制器里写修改的内容的查询方法和修改方法；在< script> </ script>中写修改按钮的点击事件。而点击事件中有选中行事件的监听和表格的重载。如图所示：

在页面中的保存按钮的点击事件里，写对修改的判断及表格的重载。这样修改就完成了。
三、总结
1、世界上的知识有很多，但是我们要学会把它们灵活的结合起来，从而使我们的项目的思路更合理、代码更简洁、效果更美观。
2、因此，我们要严格执行“活到老学到老”、“灵活搭配”；不要不动脑筋，只学不用。
3、总的来说，就是我们要“学以致用”。