最近公司要用easyui，这里自己看了官网几篇文章，遇到些问题，大多数的问题都是敲代码的时候笔误，其他有些地方确实需要注意一下，这里做些笔记。

1.在mysql中建好表之后修改id字段为递增字段，发现这个奇怪的mysql语法，如下

alter table student change id id int auto_increment;

这句是在student表已经建好的情况下来修改字段id为自增列，奇怪的是为嘛change id id，并且后面还要带上id的类型int？

2.html5标记

如何申明自己这个html文档是html5标准的呢，<!DOCTYPE html>就这句，根据w3c上的解释，只能是这一句

3.定义一个 表格的语法如下

<!--定义一个表格-->

    <table id="dg" title="My User" class="easyui-datagrid" style="width:700px;height:250px"

    url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">

        <thead>

            <tr>

                <th field="firstname" width="50">First Name</th>

                <th field="lastname" width="50">Last Name</th>

                <th field="phone" width="50">Phone</th>

                <th field="email" width="50">Email</th>

            </tr>

        </thead>

    </table>

注意这里很多的标签元素是不符合html4的规范的url="get_users.php"这个，在html5里面才有用，在html4里面是不规范的，没有这个元素，toolbar="#toolbar"这个表示表格的工具栏，就是新加，删除，修改的操作。另外easyui自己定义了一套样式 class="easyui-datagrid"这一句是easyui里面自定义的样式，在easyui里面还有很多风格的样式。

　　定义表格的工具栏如下：

<div id="toolbar">

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>

</div>

这里面也有自定义标签，例如iconCls="icon-add"这个表示新增按钮。注意这里id="toolbar"这个不是随便定义的，要和上面的toolbar="#toolbar"保持一致。

　　点击新增和修改的时候要打开一个对话框，代码如下：

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">

        <div class="ftitle">User Information</div>

        <form id="fm" method="post" novalidate>

            <div class="fitem">

                <label>First Name:</label>

                <input name="firstname" class="easyui-validatebox" required="true" />

            </div>

            <div class="fitem">

                <label>Last Name:</label>

                <input name="lastname" class="easyui-validatebox" required="true" />

            </div>

            <div class="fitem"><label for="">Phone:</label>

                <input name="phone" />

            </div>

            <div class="fitem">

                <label for="">Email:</label><input type="" name="email" class="easyui-validatebox" validType="email" />

            </div>

        </form>

 </div>

这里class="easyui-dialog"表示这个是一个对话框来着，buttons="#dlg-buttons"表示这个对话框下面的两 个确认，取消按钮，这一这个名字也不是随便定义的。注意<div class="ftitle">User Information</div>这个其实原理很简单，就是定义了一个div，然后给了一个border-bottom: 1px solid #CCCCCC;

因为要和后台交互，在这个对话框里面装了一个form，里面的input元素有些需要进行验证，required="true"表示必须填写元素，validType="email"表示验证类型是emai验证，这里不知道能不能重写这个验证规 则，class="easyui-validatebox"定义了验证失败后的提示

　　在对话框中的按钮定义在外面，代码如下：

 <div id="dlg-buttons">

        <a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-ok" onclick="saveUser()">Save</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-cancel" onclick="javascript:$('#dlg').dialog('close');">Cancel</a>

    </div>

这里id="dlg-buttons"名字要和对话框中的buttons="#dlg-buttons"保持一致的，icon- Cls="icon-ok" ，icon-Cls="icon-cancel"和上面的icon-Cls="icon-add"，icon-Cls="icon- edit"，icon-Cls="icon-remove"意思类似，都是按钮的样式。

以上全部都是html的定义。

4.js函数解析

和后台php交互需要使用javascript函数，这里也有很多地方需要注意，代码如下：

<script type="text/javascript">

    var urls;

    function newUser(){

        $('#dlg').dialog('open').dialog('setTitle','New User');

        $('#fm').form('clear');

        urls = 'save_user.php';//为saveUser方法准备访问url，注意是全局变量

    }

    function editUser(){

        var row = $("#dg").datagrid("getSelected");

        if(row){

            $("#dlg").dialog("open").dialog("setTitle","Edit User");

            $("#fm").form("load",row);

            urls = "update_user.php?id="+row.id;//为editUser方法准备访问url，注意是全局变量

        }

    }

    function saveUser(){

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

            url:urls,                     //使用参数

            onSubmit:function(){

                return $(this).form("validate"); //提交前验证

            },

            success:function(result){

                var result = eval('('+result+')');

                if(result.errorMsg){

                    $.messager.show(

                    {

                        title:"Error",

                        msg:result.errorMsg

                    });

                }

                else{

                    $("#dlg").dialog("close");

                    $("#dg").datagrid("reload")

                }

            }

        });

    }

    function destroyUser()

    {

        var row = $("#dg").datagrid("getSelected");

        if(row)

        {

            $.messager.confirm("Confirm","Are you sure you want to destory this.user?",function(r)

            {

                if(r)

                {

                    $.post('destory_user.php',{id:row.id},function(result){

                        if (result && result.success){

                            $('#dg').datagrid('reload');    //重新加载数据

                        } else {

                            $.messager.show({    //显示错误信息

                                title: 'Error',

                                msg: result.msg

                            });

                        }

                    },'json');

                }

            });

        }

    }

    </script>

还有后台的php代码这里就不贴出来了，在这里犯了几个错误。

$conn = mysql_connect("localhost","host","Ctrip07185419") or die("can not connect to server");

这句是php中连接服务器的语句，但是报错 Access denied for user 'host'@'localhost' (using password: YES)，很明显应该吧"host"换成"root"

$sql = "delete from student where id='$id'";这句是定义sql语句，但是也报错，其实应该这样写：

$sql = "delete from student where id=$id";

还有在执行完删除之后一直没有重新加载数据，怎么看都没有错误，返回值也是对的{"success":true}，最后返现在 destory_user.php里面有一个echo mysql_error()这句是用来调试的，但是会影响输出结果，后面还要输出执行语句的结果，如果语句中执行两次echo就会造成easyui不能识 别输出的结果，造成截止，不能显示正确的结果。

via：http://www.cnblogs.com/tylerdonet/p/3514680.html

EasyUI-增删改操作的更多相关文章

  1. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  2. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  3. EasyUI----DataGrid行明细增删改操作

    http://blog.csdn.net/huchiwei/article/details/7787947   本文实现的是EasyUI-DataGrid行明细的增删改操作.具体参考来自以下文章: 官 ...

  4. C# winform窗体设计-对数据库执行增删改操作

    对于学习数据库的人来说,数据库的增删改可谓是最基本的了(小编其实也只是一个小白=-=),这篇文章,小编将于大家讲解数据库增删改操作 在执行数据库增删改的时候主要使用的:Command 类       ...

  5. OracleHelper(对增删改查分页查询操作进行了面向对象的封装，对批量增删改操作的事务封装)

    公司的一个新项目使用ASP.NET MVC开发,经理让我写个OracleHelper,我从网上找了一个比较全的OracleHelper类,缺点是查询的时候返回DataSet,数据增删改要写很多代码(当 ...

  6. [ruby on rails] 跟我学之(3)基于rails console的查增删改操作

    本章节展开对model的介绍:包括查增删改操作.紧接着上面一节<[ruby on rails] 跟我学之HelloWorld> 创建模型 使用命令创建模型 创建表post,默认自带两栏位 ...

  7. JavaScript--DOM增删改操作

    JavaScript使用DOM操作节点来进行增删改操作 <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. Linq to SQL 简单的增删改操作

    Linq to SQL 简单的增删改操作. 新建数据库表tbGuestBook.结构如下: 新建web项目,完成相应的dbml文件.留言页面布局如下 <body> <form id= ...

  9. Hibernate双向关联的增删改操作的属性

    双向关联关系下的增删改操作的属性                    1.cascade属性:  eg:<set name = "emps" cascade="s ...

  10. 【2017-05-02】winform弹出警告框是否进行增删改操作、记事本制作、对话框控件和输出输入流

    一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮, ...

随机推荐

  1. ECMall注册机制简要分析

    ecmall的注册流程index.php?app=member&act=register. 首先app是member,act是register方法. index.php中.通过ecmall的s ...

  2. Android 模拟器上的127.0.0.1 localhost

    调试中通过android simulator模拟器链接localhost或者127.0.0.1,因为我在电脑上面建立了apache,我的代码大概就是URL url = new URL(urlStrin ...

  3. Jquery IE 缓存问题

    jQuery IE缓存问题 解决方法: 1.在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上t=Math.random() 例如这样:URL+”& ...

  4. 【poj3693】Maximum repetition substring（后缀数组+RMQ）

    题意:给定一个字符串,求重复次数最多的连续重复子串. 传说中的后缀数组神题,蒟蒻真的调了很久才对啊.感觉对后缀数组和RMQ的模版都不是很熟,导致还是会有很多各种各样的小错误= = 首先,枚举重复子串的 ...

  5. qt 原子操作 QAtomicInt（++和--都不是原子操作：都包含三条机器指令）

    ++和--都不是原子操作:都包含三条机器指令 http://sroply.blog.163.com/blog/static/17092651920106117251539/

  6. Navicate使用注意事项

    2.      Navicat如何连接数据库:点击连接——>输入连接名,然后如果是本机不用更改localhost,如果是别的主机,要将对方 的ip地址输入,端口号3306不变,用户名root,密 ...

  7. 【HDOJ】2206 IP的计算

    题目很简单,情况有很多种. #include <stdio.h> #include <string.h> ]; int isIPaddr(char buf[]) { int i ...

  8. POJ ---2531

    Network Saboteur Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8751   Accepted: 4070 ...

  9. Can't initialize OCI. Error -1

    今天使用Toad连接Oracle时出现"Can't initialize OCI. Error -1" 解决方法 因为是刚做的windows 7系统,所以没有设置更改通知的时间 把 ...

  10. web测试方面的知识

    web测试 软件测试体系架构设计 一.体系架构 1.C/S:客户端+服务器端,如QQ.单机版记事本.office等,所用语言:VB.C++.C.C#.JAVA.PB.D…等数组语言,C和S都是自己测, ...