easyui学习笔记1—增删改操作【转载】

最近公司要用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—增删改操作【转载】

时间: 2024-10-11 06:24:52

easyui学习笔记1—增删改操作【转载】的相关文章

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

本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查.目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的.下面我们通过创建一个简单的Web API来管理联系人 说明:为了方便数据不使用真正的数据库,而是通过内存数据模拟 1.       Web API中包含的方法 Action HTTP method Relative URI GetAllContact GET /api/contact GetContact GET /api/contact /id

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

增删改之前先说一下笔记1里提到的一个无法创建ISqlMapper对象的问题. <resultMaps> <resultMap id="FullResultMap" class="TUSER"> <result property="UID" column="U_ID" dbType="Int"/> <result property="UName"

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

http://blog.csdn.net/leftfist/article/details/25005307 我刚接触EF未久,还不知道它有什么强大之处,但看上去,EF提供了一般的增删改查功能.以往用过一些ORM方法,尽管有代码生成器,但代码量总的 来说比较多.这次采用EF,我就想,能不能尽量写出一些通用的方法,以后添加表.实体类,只需做很少的改动,就能拥有基本的增删改查功能呢? 方案如下: 1. 分为几个部分:BLL.DAL.Model.Interface.其中,EF生成的代码放在Model.

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo

Winform操作Access数据库增删改操作学习笔记

此程序是本人学习Winform操作Access数据库时学习笔记. 程序源码来源于:<Visual C# 2008 程序开发入门与提高 >赵增敏 编著 操作方法: 1.新建一个Winform项目,并将该项目设置为启动项目: 2.复制数据库文件到程序根目录下. 3.添加3个Label.两个TextBox.一个ListBox,四个Button控件. 4.窗体底部Label修改名称为“labelMsg”,两个文本框修改名称为:textboxSurname,textboxName. 5.列表框命名为Li

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

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js

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

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.

Jquery easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了 主要有三种方式实现编辑模式增删改操作 1.直接双击选中编辑 2.选中行点击修改按钮编辑 3.右键选择相关的操作 可能中间有部分功能没有实现 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!-- 引入自定义的js文件 --> <script type="t

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin