想完成一个EasyUI+PHP的完整示例，主要针对一个数据表记录的增加、删除和修改，方便以后写类似的程序。
经过一天多的努力，差不多算完成了，只是后台数据操作部分了。
初始界面：
添加记录：
正确提交后的提示：
双击一条记录进行修改：
正确修改后的提示：
删除一条记录：
成功删除后提示信息：
多条记录选择后可以一起删除，这里就是直接删除了，没有做询问窗口，做询问窗口同删除一条记录一样。
完整前端代码：
网络设备信息
确定 重置
资产编号
MAC地址
IP地址
网关地址
子网掩码
区域
具体位置
类型
使用人
管理交换机
端口
设备状态
//新增信息记录的窗口设置
$("#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');
添加删除选中记录
选择
资产编号
MAC地址
IP地址
网关掩码
子网掩码
区域
具体位置
类型
使用人
管理交换机
端口
设备状态
第一次采集时间
上一次采集时间
最后采集时间
操作
//设置信息记录列表的属性
$("#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
删除多条记录：
