2、easyUI-创建 CRUD可编辑dataGrid（表格）

在介绍这节之前，我们先看一下效果图：

双击可以进入编辑

2、easyUI-创建 CRUD可编辑dataGrid（表格）

点击添加可以在下一行显示

2、easyUI-创建 CRUD可编辑dataGrid（表格）

应用场景，一般不用于这种用户添加（此处只是示例），一般用于多记录，如学历信息，工作经历等

在这之前，我们要在index.php中引入jquery.edatagrid.js文件，可以去网站下载，稍后也会附出文件以代码的形式；

在前一节中，我们需要修改的有两个地方（优化后的代码基础上）,第一index.php页面，第二稍稍增加或者改动userAction和userModel文件；

首先附上index.php代码，然后解释以下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>dataGrid</title>
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../js/crud/jquery.edatagrid.js"></script>
    <script src="../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <!--<script src="../js/crud/bus_pubuser.js"></script>-->
    <script>
    $(function(){
        $('#dg').edatagrid({
            url: './data/crud/userAction.php?flag=list',
            saveUrl: './data/crud/userAction.php?flag=add',
            updateUrl: './data/crud/userAction.php?flag=modify',
            destroyUrl: './data/crud/userAction.php?flag=delete'
        });
    });
    </script>
</head>
<body>
    <!--
        作者：ethancoco
        时间：2016-07-10
        描述：list
    -->
    <table >
        <thead>
            <tr>
                <th field="fname" width="50" editor="{type:'validatebox',options:{required:true}}">名</th>
                <th field="lname" width="50" editor="{type:'validatebox',options:{required:true}}">姓</th>
                <th field="sex" width="50" editor="{type:'validatebox',options:{required:true}}">性别</th>
                <th field="phone" width="50" editor="{type:'validatebox',options:{required:true}}">联系电话</th>
                <th field="email" width="50" editor="{type:'validatebox',options:{required:true}}">邮件</th>
            </tr>
        </thead>
    </table>
    <div >
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a>
    </div>
    <!--
        作者：ethancoco
        时间：2016-07-10
        描述：dialog
    -->
    <!--<div >
        <div class="ftitle">基本信息</div>
        <hr />
        <form >
            <div class="fitem">
                <p>
                    <label>First Name:</label>
                    <input name="fname" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Last Name:</label>
                    <input name="lname" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Sex:</label>
                    <input name="sex" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Phone:</label>
                    <input name="phone">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Email:</label>
                    <input name="email" class="easyui-validatebox" validType="email">
                </p>
            </div>
        </form>
    </div>
    <div >
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
    </div>-->
</body>
<html>

页面中table属性要更改，加入属性idField="id" 去除url属性，idField表示指明哪一个字段是标识字段。其中form表单可以去掉不需要弹出形式了；

/***********************/

在table的列中添加如下代码：editor="{type:'validatebox',options:{required:true}}"，

editor属性指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性：
type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options：对象，object, 该编辑器属性对应于编辑类型。

/***********************/

在head头部中可以看到，添加了如下代码：

<script>
    $(function(){
        $('#dg').edatagrid({
            url: './data/crud/userAction.php?flag=list',
            saveUrl: './data/crud/userAction.php?flag=add',
            updateUrl: './data/crud/userAction.php?flag=modify',
            destroyUrl: './data/crud/userAction.php?flag=delete'
        });
    });
</script>

指定url表示获取用户列表信息list

saveUrl表示新增用户保存动作（支持批量保存）

updateUrl表示更新保存用户动作

destroyUrl表示删除用户动作

在toolbar的按钮变成了onclick="javascript:$('#dg').edatagrid('addRow')"等，这些addRow,destroyRow等你可以去js中看或者修改，不然就记住直接使用；

 

准备好之后，还是启用原来的后台代码，list,delete,update,都没用问题，但是add出现了错误，

跟踪代码知道，在add新增的时候，提交post表单的时候有一个新的属性isNewRecord等于true的也被提交过去了（ps,如果在之前的代码中，如果我使用每一个字段都去匹配的话，就不会出现这个问题，但是考虑到如果有很多的字段，你每个都去匹配的话，将会很耽误时间，所以就直接使用$_POST当做数组直接过去了），所以我们需要变更代码；

有两种解决方法，一是，我们直接重新加个flag,比如把saveUrl改成这样， saveUrl: './data/crud/userAction.php?flag=add_special',add_special作为一个新的flag传到后台，如后台userAction.php在switch下条件添加case "add_special" : $user->add_special($_POST);  break; 然后在userModel.php新增add_special方法；

方法如下：

function add_special($arr){
            $medoo = new medoo();
            $fname = $arr["fname"]==null?"":$arr["fname"];
            $lname = $arr["lname"]==null?"":$arr["lname"];
            $sex = $arr["sex"]==null?"":$arr["sex"];
            $phone = $arr["phone"]==null?"":$arr["phone"];
            $email = $arr["email"]==null?"":$arr["email"];
            $sql = $sql = "insert into eui_user(fname,lname,sex,phone,email) values('$fname','$lname','$sex','$phone','$email')";
            $result = $medoo->query($sql);
            if($result){
                echo json_encode(array('success'=>true));
            }else{
                echo json_encode(array('errorMsg'=>'操作过程出现错误！'));
            }
        }

我这里直接每个赋值获取，由于字段比较少的原因（如果字段比较多，大家可以想想其他方法，$_POST提交过来的第一个是isNewRecord，思路是可以去除第一个）;

还有一种方法就是，把这个方法直接写在save_user方法下，如下：

function save_user($arr){
            $medoo = new medoo();
            //var_dump($arr);
            if(isset($arr['isNewRecord'])){//可编辑列表
                $fname = $arr["fname"]==null?"":$arr["fname"];
                $lname = $arr["lname"]==null?"":$arr["lname"];
                $sex = $arr["sex"]==null?"":$arr["sex"];
                $phone = $arr["phone"]==null?"":$arr["phone"];
                $email = $arr["email"]==null?"":$arr["email"];
                $sql = $sql = "insert into eui_user(fname,lname,sex,phone,email) values('$fname','$lname','$sex','$phone','$email')";
                $result = $medoo->query($sql);
                if($result){
                    echo json_encode(array('success'=>true));
                }else{
                    echo json_encode(array('errorMsg'=>'操作过程出现错误！'));
                }
            }else{
                $result = $medoo->insert("eui_user",$arr);
                if($result){
                    echo json_encode(array('success'=>true));
                }else{
                    echo json_encode(array('errorMsg'=>'操作过程出现错误！'));
                }
            }
        }

这节就完成了，这节代码。其中medoo.php附加了（看上一节）。

所需代码文件（index.php,medoo.php,jquery.edatagrid.js,userAction.php,userModel.php）bus_pubuser.js可以去掉；

index.php

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>dataGrid</title>
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../js/crud/jquery.edatagrid.js"></script>
    <script src="../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <!--<script src="../js/crud/bus_pubuser.js"></script>-->
    <script>
    $(function(){
        $('#dg').edatagrid({
            url: './data/crud/userAction.php?flag=list',
            saveUrl: './data/crud/userAction.php?flag=add',
            updateUrl: './data/crud/userAction.php?flag=modify',
            destroyUrl: './data/crud/userAction.php?flag=delete'
        });
    });
    </script>
</head>
<body>
    <!--
        作者：ethancoco
        时间：2016-07-10
        描述：list
    -->
    <table >
        <thead>
            <tr>
                <th field="fname" width="50" editor="{type:'validatebox',options:{required:true}}">名</th>
                <th field="lname" width="50" editor="{type:'validatebox',options:{required:true}}">姓</th>
                <th field="sex" width="50" editor="{type:'validatebox',options:{required:true}}">性别</th>
                <th field="phone" width="50" editor="{type:'validatebox',options:{required:true}}">联系电话</th>
                <th field="email" width="50" editor="{type:'validatebox',options:{required:true}}">邮件</th>
            </tr>
        </thead>
    </table>
    <div >
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a>
    </div>
    <!--
        作者：ethancoco
        时间：2016-07-10
        描述：dialog
    -->
    <!--<div >
        <div class="ftitle">基本信息</div>
        <hr />
        <form >
            <div class="fitem">
                <p>
                    <label>First Name:</label>
                    <input name="fname" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Last Name:</label>
                    <input name="lname" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Sex:</label>
                    <input name="sex" class="easyui-validatebox" required="true">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Phone:</label>
                    <input name="phone">
                </p>
            </div>
            <div class="fitem">
                <p>
                    <label>Email:</label>
                    <input name="email" class="easyui-validatebox" validType="email">
                </p>
            </div>
        </form>
    </div>
    <div >
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
    </div>-->
</body>
<html>
View Code

相关文章：

  • 2022-12-23
  • 2021-04-21
  • 2022-12-23
  • 2021-09-18
  • 2022-12-23
  • 2022-12-23
  • 2021-11-05
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-14
  • 2022-12-23
  • 2021-07-01
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode