posts - 99,  comments - 22,  trackbacks - 0

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

posted on 2018-06-08 12:39 剽悍一小兔 阅读(...) 评论(...) 编辑 收藏