easyui学习笔记1—增删改操作

来源:互联网 时间:1970-01-01

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



相关阅读:
Top