最近公司要用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不能识别输出的结果,造成截止,不能显示正确的结果。

easyui学习笔记1—增删改操作的更多相关文章

  1. 【.NET-EF】Entity Framework学习笔记2 - 增删改(没查询)

    学习描述:用EF就像是省略了做实体类和DAL类,感觉是很方便,废话不多说,直接写步骤: 1.创建EF的edmx文件 这个其实在笔记1已说过,不过有些细节也要说,所以再说一遍,这里使用的是EF 6.1版 ...

  2. 3、MyBatis.Net学习笔记之增删改

    增删改之前先说一下笔记1里提到的一个无法创建ISqlMapper对象的问题. <resultMaps> <resultMap id="FullResultMap" ...

  3. 【转载】ASP.NET MVC Web API 学习笔记---联系人增删改查

    本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查.目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的.下面我们通过创建一个简单的Web API来管理联系 ...

  4. EF学习笔记——通用增删改查方案

    http://blog.csdn.net/leftfist/article/details/25005307 我刚接触EF未久,还不知道它有什么强大之处,但看上去,EF提供了一般的增删改查功能.以往用 ...

  5. ASP.NET MVC Web API 学习笔记---联系人增删改查

    本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查. 目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的. 下面我们通过创建一个简单的Web API来管理 ...

  6. MongoDB学习笔记,基础+增删改查+索引+聚合...

    一 基础了解 对应关系 -> https://docs.mongodb.com/manual/reference/sql-comparison/ database -> database ...

  7. Mybatis学习笔记3 - 增删改查示例

    1.接口定义 package com.mybatis.dao; import com.mybatis.bean.Employee; public interface EmployeeMapper { ...

  8. MongoDB学习笔记—03 增删改查操作

    MongoDB的CURD操作分别通过函数insert().update().find().remove()进行 MongoDB文档新增与删除 MongoDB中关于文档的新增与删除比较简单.主要通过in ...

  9. PHP操作xml学习笔记之增删改查(2)—删、改、查

    xml文件 <?xml version="1.0" encoding="utf-8"?><班级>    <学生>       ...

随机推荐

  1. selenium自动化测试用例需要关注的几点(二)

    注:原文地址 UI映射 一个UI映射是一种机制,它存储所有的定位器的测试套件在一个地方,方便修改UI元素的路径标识符或改变在AUT.测试脚本,然后使用UI地图定位以被测试的元件.基本上,UI地图是一个 ...

  2. flyway-Maven插件-configuration节点配置详解

    <configuration> <driver>org.hsqldb.jdbcDriver</driver> <url>jdbc:hsqldb:file ...

  3. Java TCP/IP与HTTP协议个人总结(原创)

    首先举个例子方便理解: 1.应用层(http.ftp)就类似:淘宝.京东.易购等网购网站,主要用来负责选择购买商品(制定协议). 2.传输层(TCP.UDP)就类似:中通.申通等物流公司,主要负责传送 ...

  4. Java设计模式之适配器模式(Adapter)

    转载:<JAVA与模式>之适配器模式 这个总结的挺好的,为了加深印象,我自己再尝试总结一下 1.定义: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法 ...

  5. java文件在没有安装jdk的windows下运行。

    1.首先该工程最好是gui的,使用swing或者awt的都行. 2.使用eclipse打包jar文件. 项目名字上面点右键,选择Export,在选择java\JAR file.    选择src文件夹 ...

  6. Xcode日常使用

    1.构建输出目录(Preferences->Locations->Locations)当选择为Default时,Derived Data的目录为~/Library/Developer/Xc ...

  7. show_space1

    CREATE OR REPLACE PROCEDURE show_space1(p_segname IN VARCHAR2, p_owner IN VARCHAR2 DEFAULT 'NTSUSER0 ...

  8. Javascript屏蔽鼠标的右键的两种方法。

    方法一:利用鼠标button的键值 <script language="javascript"> function blockright(oEvent) { var o ...

  9. golang的xml、json解析

    xml golang的xml处理主要应用Unmarshal.Marshal方法实现,解析一个xml到struct如下,首先是xml文件: <?xml version="1.0" ...

  10. 使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

    TCP 三次握手 示意图 Wireshark 抓包注意事项 为了演示一个TCP三次握手建立连接的过程,我们通过 Chrome 访问一个网页. 已知 HTTP 协议就是建立在TCP链接上的 比如访问以下 ...