19.1 添加用户修改的按钮

打开userManage.html，找到新增按钮的地方：

我们不难发现，编辑按钮就差不多应该在新建用户的右边。

那么，假如我现在是新人，对这个项目本身就不太熟悉，那么我得先找到这个页面，然后再去对应的页面找到新增按钮，然后在新增按钮的右边加上对应的代码。代码怎么写，我先不管，第一个事情就是去找到这个页面在哪。

方法：在这个页面上右键，点击 查看框架源代码

这个userManage.html就是该网页的地址。

打开userManage.html，ctrl + F一下，搜索新建用户这几个字。

找到了这个地方以后，可以发现，原来，这个新增的按钮就是一个a标签，于是，我们依葫芦画瓢。

这边和之前的代码相比，做一个修改，新建用户的按钮，绑定的函数名称改为openAddDialog。

函数代码：

//打开新增窗口
function openAddDialog(){

$("#dialog0").dialog("setTitle","新增用户").dialog("open");

}

//打开修改窗口
function openModifyDialog(){

$("#dialog0").dialog("setTitle","编辑用户").dialog("open");
}

再来看一下保存方法：

发现一个问题，之前的保存，因为只有新增，所以是不带ID的。那如果现在我们要求这个保存方法既可以新增，也可以修改。就需要动态地变更一下url。

新增： url = save.php
修改：： url = save.php?id=XXX
代码：

var url = null;
//打开新增窗口
function openAddDialog(){
url = "save.php";
$("#dialog0").dialog("setTitle","新增用户").dialog("open");

}

//打开修改窗口
function openModifyDialog(){

//编辑用户的时候，只允许用户勾选一条数据
var rows = $("#grid0").datagrid("getSelections");

if(rows.length != 1){
$.messager.alert("系统提示","请勾选一条数据！");
return;
}

//将勾选的数据填充到窗口中
$("#form0").form("load",rows[0]);

url = "save.php?id=" + rows[0].id;

$("#dialog0").dialog("setTitle","编辑用户").dialog("open");

}

打开save.php，加上如下代码：

注意，因为ID是拼接在url后面的，所以是get方式，需要用$_GET去接受，不能用$_POST。

源码获取：https://www.jianshu.com/p/4977bd0073d5