持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

上一篇我们完善编写了后端代码和前端处理逻辑，实现选项类型的属性修改的提交。这一篇我们在这个表格上方实现按钮来添加数据。

我已经设置了公开权限，大家都可以访问，项目每天的进度基本上是和文章更新一致的，或者略快于文章，我也是边写边发的，有些代码在后续版本说不定就更改了。代码的字数意义不大，有需要的都可以去项目上直接看，这里我都换成了图片。

一、实现步骤

(一) 在html中加入按钮

要把按钮加到表格里的搜索框边上，而不是出现在搜索框上面，需要在表格绘制选项里加上

toolbar: '#toolbar', //工具按钮用哪个容器

其中的toolbar会在外面定义，表格绘制选项就是我们表格列信息的前面那些。

定义好了之后页面才能找到他的位置，没有toolbar选项的是在search上面出现的，会和表格分离。

此时的按钮就会出现在表格顶部的左侧了。

增加按钮事件的实现与表格内的编辑功能的实现形式一致。步骤都是弹出对话框，渲染内部的数据。然后对话框可以提交。

在提交后根据服务器返回的信息进行处理。最后刷新表格。

增删改查的基本功能中增改查到这里已经实现了，那么我们再实现下这个删的功能。

同样在表格里加一个字段。再通过按钮点击指向删除数据的处理函数，将这个请求提交给服务器，服务器处理后返回信息。

这里直接删除可能有误操作，增加一个JS中的确认提示框语句，待用户确认才删除。

同时考虑到管理员有帮他人重置密码的需求，所以这里增加将他人的密码重置的功能。

新增的服务器处理主要逻辑

删除的服务器处理主要逻辑

重置密码的主要逻辑

具体可以查看github上的提交记录。