最近公司要用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. PHP、JSP、.NET各自的真正优势是什么

    PHP的优势在于, 跨平台, 极易部署, 易维护, 为Web而生, 开源社区强大, 文档丰富.至于说3足鼎立, 谈不上, 全球前100万的sites中, 70%是PHP. JSP和Asp..net 也 ...

  2. 在ubuntu12.0.4上搭建samba服务器以实现文件共享

    在安装之前samba服务器之前,先进行以下配置和测试. <壹> 准备工作 一.NAT联网方式 (1)硬件连接 无需网线,无需路由器 (2)虚拟机选择NAT连接方式 (3)测试网络通不通 在 ...

  3. 定位 - MapKit - 基本使用

    /** *  Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Co ...

  4. Mac下获取AppStore安装包文件路径

    通过远在大洋彼岸的苹果服务器下载东西,确实有够慢啊!AppStore更甚:甚至都经常提示连不上服务器,而有些软件呢,还必须从AppStore下载安装,所以没办法,谁让上了苹果的贼船呢!公司的网速更是不 ...

  5. IP工具类——IpAddress.java

    根据IP地址获取详细的地域信息,也可通过 http://whois.pconline.com.cn/ 获取地址信息. 源码如下:(点击下载  IpAddress.java) import java.i ...

  6. 意犹未尽而来的第一篇Android 逆向

    游戏:咕噜王国大冒险 平台:android 目标: 1. 去除乱七八糟提示(本篇目标) 2. 去除google弹窗 3. 破解“all stages” 破文开始: 1. 使用APKIDE反编译:搜索字 ...

  7. 【技术贴】note8 N5100刷机 双清 落雨

    双清模式:开机键 + [音量+] + HOME键 刷机模式:开机键 + [音量- ]+ HOME键 1.双清步骤: 关机时.长按音量上键+home键+开机键,直到进入recovery模式,然后选择wi ...

  8. [LeetCode] Super Ugly Number (Medium)

    Super Ugly Number 最后WA没做出来. typedef long long int64; #define MAXBOUND 10000000 class Solution { publ ...

  9. ASP.NET MVC 解决LINQ表达式中的SqlMethods 未找到命名空间问题

    右键项目属性下的引用: 添加引用: 搜索寻找——System.Data.Linq,然后添加成功,即可解决LINQ表达式中的SqlMethods 未找到命名空间问题

  10. C#程序集使用强名字(Strong Name)签名/强名称签名

    强名称签名的方法: 强签名: 1. 可以将强签名的dll注册到GAC,不同的应用程序可以共享同一dll. 2. 强签名的库,或者应用程序只能引用强签名的dll,不能引用未强签名的dll,但是未强签名的 ...