正常情况下,在一个部门管理页面,不仅仅需要展示列表数据,还需要基本的增删改操作,所以,我们先把之前写好的新增功能集成进来。

在toolbar中,添加一个新增按钮。

<div id="toolbar" style="padding:10px 12px;">

	<a href="javascript:openDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增部门</a>

	<br><br>

	请输入部门名称:<input type="text" name="deptname" id="deptname" />

	<button onclick="search();" id="submit" style="float:right;">查询</button>

</div>

然后,编写其点击事件:

function openDialog(){
alert();
}

测试一下,在页面中点击这个新增按钮,能不能成功的alert,如果不能,那么就去仔细查看是不是哪里写错了,比如少了个括号什么的。

在body区域加上dialog的div标签块。

<div id="dialog0" class="easyui-dialog" style="width:500px;height:300px;padding:10px 20px;" closed="true"
data-options="title:'部门新增'" buttons="#dialog0-buttons">
<!-- 在对话框中画一个简单的表达组件 -->
<form id="form0" method="post">
<table cellspacing="5px;" cellpadding="0px">
<tr> <td>部门编号:</td>
<td><input type="text" id="deptid" name="deptid" class="easyui-validatebox" required="true"/></td>
</tr> <tr> <td>部门名称:</td>
<td><input type="text" id="deptname" name="deptname" class="easyui-validatebox" required="true"/></td>
</tr> </table> </form> </div> <div id="dialog0-buttons">
<a href="javascript:save();" class='easyui-linkbutton' iconCls="icon-ok">保存</a>
</div>

别忘了修改openDialog方法的内容:

function openDialog(){
$("#dialog0").dialog("open");
}

效果:

当我们点击保存按钮,回去调用一下save方法, 因为这个保存按钮:

<a href="javascript:save();" class='easyui-linkbutton' iconCls="icon-ok">保存</a>

它拥有一个save的点击事件。

Save函数:

function save(){

  $("#form0").form("submit",{

  	//提交的目标服务器地址
url : "saveDept.php" , //验证表单内元素是否有效?
onSubmit : function(){
return $(this).form("validate");
} , //如果服务器成功返回数据,就会启动这个方法
//参数data就是服务器返回的数据
success : function(data){
$.messager.alert("系统提醒","保存成功!");
$("#dialog0").dialog("close");
} }); }

表单提交的地址是saveDept.php.

<?php

	//建立MYSQL数据库连接
$conn = mysql_connect("localhost","root","");
//选择test数据库
$db = mysql_select_db("test",$conn);
//设置编码格式为UTF-8,以便支持中文
mysql_query("set names utf8"); $deptid = $_POST["deptid"];
$deptname = $_POST["deptname"]; //echo "部门编号:$deptid<br>";
//echo "部门名称:$deptname"; //编写sql语句 $sql = "INSERT INTO tm_dept (id, deptid, deptname, createtime, updatetime) VALUES (NULL, '$deptid', '$deptname', now(), now());"; //执行sql语句
mysql_query($sql) or die(mysql_error()); echo "success"; ?>

如果你希望在新增成功后,默认刷新列表,就在回调函数中加一个search方法的调用即可:

后台错误返回

正常情况下,后台代码的运行不会一帆风顺,可能会发生一些错误,这个时候我们就需要告诉页面有没有错,发生了什么错。在企业里面,一般会设置一个错误对象,包含错误信息和错误码。

php:

在执行sql之前,定义一个通用的返回对象,包含错误码和错误信息

$resultData = array();
$resultData['errCode'] = 0; //默认错误码为0,表示没有错误
$resultData['errMsg'] = ""; //默认错误信息为空

然后,执行sql语句的时候,调用err函数:

//编写sql语句

	$sql = "INSERT INTO tm_dept (id, deptid, deptname, createtime, updatetime) VALUES (NULL, '$deptid', '$deptname', now(), now());";

	//执行sql语句
mysql_query($sql) or die( err() ); function err(){
$resultData['errCode'] = -1;
$resultData['errMsg'] = mysql_error();
echo json_encode($resultData);
}

前台接收的方式:

$("#form0").form("submit",{

  	//提交的目标服务器地址
url : "saveDept.php" , //验证表单内元素是否有效?
onSubmit : function(){
return $(this).form("validate");
} , //如果服务器成功返回数据,就会启动这个方法
//参数data就是服务器返回的数据
success : function(data){ data = eval("("+data+")"); if(data.errCode < 0){
$.messager.alert("系统提醒","后台程序发生错误,原因是:<br><font style='color:red;'>"+data.errMsg+"</font>");
return;
} $.messager.alert("系统提醒","保存成功!");
$("#dialog0").dialog("close");
search();
} }); }

PS:如果sql语句成功执行,就应该把resultData输出到页面。

//执行sql语句
mysql_query($sql) or die( err() ); echo json_encode($resultData);

下载地址:https://pan.baidu.com/s/1OXvqQwAmz7usgD4KqiUXLw

【php增删改查实例】第十节 - 部门管理模块(新增功能)的更多相关文章

  1. 【php增删改查实例】第九节 - 部门管理模块(模糊查询)

    给datagrid添加一个工具栏. 效果: 模糊查询部门名称. 接下来,在工具栏区域画一个input框: <div id="toolbar" style="padd ...

  2. 【php增删改查实例】第八节 - 部门管理模块(编写PHP程序)

    首先,在同级目录新建一个query.php文件: 接着,去刷新页面,打开F12,NetWork,看看当前的请求能不能走到对应的php文件? 这就说明datagrid确实能够访问到query.php 只 ...

  3. 【php增删改查实例】 第二节 - MYSQL环境配置

    安装好xampp后,会自带一个mysql,也就是说,正常情况下,你直接这样: 就可以启动mysql了. 如果你了,下面的步骤就别看了哈. if( 启动成功 ){ return; } 如果你的电脑上已经 ...

  4. 【php增删改查实例】第一节 - PHP开发环境配置

    最近需要使用PHP,于是把平时的积累整理一下,就有了这个教程. 首先是环境配置: 1.操作系统:windos7 2.后台:PHP 3.前台:Html + js + css 4.数据库:MYSQL 5. ...

  5. python链接oracle数据库以及数据库的增删改查实例

    初次使用python链接oracle,所以想记录下我遇到的问题,便于向我这样初次尝试的朋友能够快速的配置好环境进入开发环节. 1.首先,python链接oracle数据库需要配置好环境. 我的相关环境 ...

  6. java:JSP(JSPWeb.xml的配置,动态和静态导入JSP文件,重定项和请求转发,使用JSP实现数据库的增删改查实例)

    1.JSP的配置: <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  7. yii2.0增删改查实例讲解

    yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `textur ...

  8. SpringBoot JPA实现增删改查、分页、排序、事务操作等功能

    今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...

  9. 【php增删改查实例】第十四节 - 用户管理模块(起步)

    从这一节开始,开始着手开发部门管理模块. 之后的内容就在此基础上进行增加. 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块. 打开这个文件,新建一个userManage.html ...

随机推荐

  1. ITU-T Technical Paper: 测量QoS的基本网络模型

    本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...

  2. SpriteBuilder中的CCB Node尺寸

    当你创建一个类型为Layer的CCB文件时,你将注意到它的默认尺寸大小为568x384. 568个点是4英寸iphone的宽度,同时iPad屏幕只有512个点宽,更准确的说--SpriteBuilde ...

  3. JFinal开发环境搭建,JFinal开发案例

     JFinal  是基于 Java  语言的极速  WEB  + ORM  开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java 语言所 ...

  4. solr研磨之游标分页

    普通分页 当需要深度分页的时候,比如查询第10000页数据,每页显示10条,意味着需要提取前10000 x 10 页的数据,并将这100000条数据缓存在内存中,然后在内存中进行排序.最后返回最后10 ...

  5. Implement int sqrt(int x).

    自己设计函数,实现求根号.x是非负整数. Input: 8 Output: 2 当开出根号后有小数,则省略小数部分.. 思路:只要找到一个数a,a*a<=x而且(a+1)*(a+1)>x, ...

  6. List内存分配

    当采用默认构造函数List<int> value = new List<int>();实例化一个List<T>对象时,.Net Framework只是在内存中申请了 ...

  7. JeeSite中Excel导入导出

    在各种管理系统中,数据的导入导出是经常用到的功能,通常导入导出以Excel.CSV格式居多.如果是学习的过程中,最好是自己实现数据导入与导出的功能,然而在项目中,还是调用现成的功能比较好.近期一直使用 ...

  8. 网易面经(Java开发岗)

    网易面经(Java岗) 网易两面面经整理 岗位:我投递的是杭研所的Java开发岗位.行程:半天的时间南京=杭州之间穿行,单程2个小时,从杭州东站=网易大厦,单程1个小时(如果能买到城站高铁动车票可以从 ...

  9. QQ connect client request's parameters are invalid, invalid openid 问题的解决

    很多人的这个问题是POST的时候发生,我的也恰好在POST的时候发生.后来我发现可能是因为QQ的这个后端是采用类PHP的语言开发,在动态语言的获取参数时POST参数和GET参数是可以分开读取的,也就是 ...

  10. Android hybrid App项目构建和部分基本开发问题

    1.首先是选型:Cordova+Ionic Framework,调试测试环境是Ripple Emulator.开发环境其实可以随便选,我个人选择了Eclipse,当然Android SDK+ADT也是 ...