想完成一个EasyUI+PHP的完整示例，主要针对一个数据表记录的增加、删除和修改，方便以后写类似的程序。
经过一天多的努力，差不多算完成了，只是后台数据操作部分了。
初始界面：
? 添加记录：
? 正确提交后的提示：
? 双击一条记录进行修改：
? 正确修改后的提示：
? 删除一条记录：
? 成功删除后提示信息：
? 多条记录选择后可以一起删除，这里就是直接删除了，没有做询问窗口，做询问窗口同删除一条记录一样。
完整前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络设备信息</title>
<link rel="stylesheet" type="text/css" href="themes/default.css"/>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 增加设备记录的按钮组-->
<div id="recordAddToolBar">
<a href="#">确定</a> <a href="#">重置</a>
</div>
<div id="recordAdd" align="center">
<form id="frmAdd" action="operatOneRecord.php" method="post">
<input type="hidden" name="opType" value="新增">
<table>
<tr>
<td>资产编号</td>
<td><input type="text" name="assetId" id="assetId"></td>
</tr>
<tr>
<td>MAC地址</td>
<td><input type="text" name="macAddr" id="macAddr"></td>
</tr>
<tr>
<td>IP地址</td>
<td><input type="text" name="ipAddr" id="ipAddr"></td>
</tr>
<tr>
<td>网关地址</td>
<td><input type="text" name="gatewayAddr" id="gatewayAddr"></td>
</tr>
<tr>
<td>子网掩码</td>
<td><input type="text" name="subnetMask" id="subnetMask"></td>
</tr>
<tr>
<td>区域</td>
<td><input type="text" name="regionName" id="regionName"></td>
</tr>
<tr>
<td>具体位置</td>
<td><input type="text" name="specificLocation" id="specificLocation"></td>
</tr>
<tr>
<td>类型</td>
<td><input type="text" name="equipmentType" id="equipmentType"></td>
</tr>
<tr>
<td>使用人</td>
<td><input type="text" name="userName" id="userName"></td>
</tr>
<tr>
<td>管理交换机</td>
<td><input type="text" name="switchName" id="switchName"></td>
</tr>
<tr>
<td>端口</td>
<td><input type="text" name="portName" id="portName"></td>
</tr>
<tr>
<td>设备状态</td>
<td><input type="text" name="equipmentStatus" id="equipmentStatus"></td>
</tr>
</table>
</form>
</div>
<script>
//新增信息记录的窗口设置
$("#recordAdd").dialog({
width:250,
title:"",
iconCls:"",
closed:true,//初始状态是关闭的
buttons:"#recordAddToolBar",
});
$("#recordAddToolBar>a:contains(确定)").linkbutton({
iconCls:"icon-ok",
onClick:function () {
//设置数据操作类型为更改
// $("input:hidden[name='opType']").attr('value',"update");
//将表单数据进行提交
$("#frmAdd").form('submit');
//如果表单数据提交成功，将数据列表重新加载
},
});
$("#recordAddToolBar>a:contains(重置)").linkbutton({
iconCls:"icon-cancel",
onClick:function() {
$("#recordAdd").form('clear');
},
});
$("#frmAdd").form({
success:function (data) {
// console.log(data);
var json=JSON.parse(data);
console.log(data);
$.messager.show({
title:"操作提示",
msg:json.msg,
});
//关闭添加窗口
$("#recordAdd").form('clear');
$("#recordAdd").dialog({
closed:true,//初始状态是关闭的
});
//重新加载显示列表
$("#dataGridNetInfo").datagrid('reload');
}
});
$("#recordAddToolBar").css("width","240px").css("text-align",'center');
</script>
<!-- 设备信息列表的按钮组-->
<div id="dataGridToolBar">
<a href="#">添加</a><a href="#">删除选中记录</a>
</div>
<table id="dataGridNetInfo">
<thead>
<tr>
<th data-options="field:'C16',width:30,checkbox:true">选择</th>
<th data-options="field:'C01',width:120,sortable:true">资产编号</th>
<th data-options="field:'C02',width:120">MAC地址</th>
<th data-options="field:'C03',width:110,sortable:true">IP地址</th>
<th data-options="field:'C04',width:110">网关掩码</th>
<th data-options="field:'C05',width:110">子网掩码</th>
<th data-options="field:'C06',width:90">区域</th>
<th data-options="field:'C07',width:80">具体位置</th>
<th data-options="field:'C08',width:80">类型</th>
<th data-options="field:'C09',width:80">使用人</th>
<th data-options="field:'C10',width:100">管理交换机</th>
<th data-options="field:'C11',width:100">端口</th>
<th data-options="field:'C12',width:80">设备状态</th>
<th data-options="field:'C13',width:120">第一次采集时间</th>
<th data-options="field:'C14',width:120">上一次采集时间</th>
<th data-options="field:'C15',width:120">最后采集时间</th>
<th data-options="field:'other',width:85,formatter:operateButton">操作</th>
</tr>
</thead>
</table>
<script>
//设置信息记录列表的属性
$("#dataGridNetInfo").datagrid({
title:"网络设备表",
iconCls:"icon-save",
height:544,
checkOnSelect:true,
url:'GetInfoFromMySql.php',//加载数据URL
toolbar:"#dataGridToolBar",
rownumbers:true,
checkOnSelect:true,
fitColumns:true,//列宽自适应
onLoadSuccess:function () { //datagrid数据加载完毕之后执行的代码
$(".opDel").linkbutton({
iconCls:"icon-cancel",
onClick:function() {
$.messager.confirm('提示', '确定要删除该记录吗?',function(r){
if (r){
$.ajax({
url:"delSingleRecord.php",
type:"post",
data:$('#dataGridNetInfo').datagrid('getSelected').C02,
dataType:"json",
success:function (json) {
$("#dataGridNetInfo").datagrid('reload');
//根据返回值，提示操作信息
$.messager.show({
title:"操作提示",
msg:json.msg,
});
},
});
}
}
)
},
});
},
pagination:true,//出现分页工具栏
onDblClickRow:function(index,row){//在行上双击时执行，参数：index->点击的行索引（从0开始）；row->点击行的记录。
$("input:hidden[name='opType']").attr('value',"修改");
console.log("111");
$("#assetId").attr('value',row.C01);
$("#macAddr").attr('value',row.C02);
$("#ipAddr").attr('value',row.C03);
$('#recordAdd').dialog({ //弹出对话框
iconCls:"icon-redo",
title: "修改设备信息",
closed:false,
modal:true,
});
},
});
//最上面的按钮
$("#dataGridToolBar>a:contains(添加)").linkbutton({
iconCls:"icon-add",
onClick:function() {
$("input:hidden[name='opType']").attr('value',"新增");//添加记录
$("#assetId").attr('value','');
$("#macAddr").attr('value','');
$("#ipAddr").attr('value','');
$("#recordAdd").dialog({
title: "新增设备信息",
closed: false,
modal:true,
});
},
});
$("#dataGridToolBar>a:contains(删除选中记录)").linkbutton({
iconCls:"icon-cancel",
onClick:function() {
// event.stopPropagation();
//获取选中的记录
var isChecked=$("#dataGridNetInfo").datagrid('getChecked');
var strSelected="";
for(var i=0;i<isChecked.length;i++){
if(i==0){
strSelected="c02="+isChecked[i].C02;
}else{
strSelected=strSelected+"&c02="+isChecked[i].C02;
}
}
//使用AjAX方式发送
$.ajax({
url:"delMultRecords.php",
type:"post",
data:strSelected,
dataType:"json",
success:function (json) {
$("#dataGridNetInfo").datagrid('reload');
//根据返回值，提示操作信息
$.messager.show({
title:"操作提示",
msg:json.msg,
});
}
});
},
});
function operateButton(value,row,index) {
return ' <a class="opDel" href="#">删除</a>'
};
</script>
</body>
</html>后台数据库操作比较简单：
删除和修改为一个文件：
<?php
$action = $_POST['opType'];
//获取数据
$C01 = $_POST['assetId'];
$C02 = $_POST['macAddr'];
$C03 = $_POST['ipAddr'];
$C04 = $_POST['gatewayAddr'];
$C05 = $_POST['subnetMask'];
$C06 = $_POST['regionName'];
$C07 = $_POST['specificLocation'];
$C08 = $_POST['equipmentType'];
$C09 = $_POST['userName'];
$C10 = $_POST['switchName'];
$C11 = $_POST['portName'];
$C12 = $_POST['equipmentStatus'];
switch ($action) {
case "add":
//添加记录
break;
case "update":
//修改记录
break;
}
$returnArr=array();
$returnArr['code']="200";
$returnArr['msg']=$action."操作成功！";
echo json_encode($returnArr);
?>
删除一条记录：
<?php
//根据ID删除一条记录
$returnArr=array();
$returnArr['code']="200";
$returnArr['msg']="删除记录成功！";
echo json_encode($returnArr);
?>
删除多条记录：
<?php
//根据给定的ID数组删除多条记录
$returnArr=array();
$returnArr['code']="200";
$returnArr['msg']="删除多条记录成功！";
echo json_encode($returnArr);
?>