EasyUI(2)：PHP+EasyUI的增、删、改操作的完整示例

admin • 2021-11-17 20:45 • 前端

　　想完成一个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);
?>

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

EasyUI Json和Xml php 前端

二维码

独立开发一个javaweb项目2：实现登陆开发

< <上一篇

全站开发好用vue库、API、框架等好用网站合集

下一篇>>

搜索内容

EasyUI(2)：PHP+EasyUI的增、删、改操作的完整示例

最新文章

分类

标签云