EasyUI-增删改操作
最近公司要用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" οnclick="newUser()">New User</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="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" οnclick="saveUser()">Save</a><a href="javascript:void(0)" class="easyui-linkbutton" icon-Cls="icon-cancel" οnclick="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
转载于:https://www.cnblogs.com/dekevin/p/3863844.html
EasyUI-增删改操作相关推荐
- dom对html增删改操作,6.DOM对HTML元素的增删改操作
节点的增删改操作 function createNode(){ //创建一个li元素 var li = document.createElement("li"); li.inner ...
- MySQL——数据库的增删改操作
数据库的增删改操作 数据库的增操作 数据库的增操作主要涉及数据库的增加.数据表的增加.表记录增加以及表字段增加等.数据库的增加非常简单,就是新创建一个数据库:表记录的增加指的就是新增表的数据行,可以是 ...
- Oracle 原理: 视图,对视图进行增删改操作
Oracle的视图和SQLServer的视图基本一样. 视图,是一个虚拟的表,不会给视图分配存储空间.视图的建立需要依赖于单个或多个普通表,被依赖的普通表就成为"基表".可以就像 ...
- easyui增删改查前段代码
easyui增删改查前段代码 <script>var url;//添加用户窗体 function newUser(){$('#dlg').dialog('open').dialog('se ...
- PHP操作MySQL数据库(连接、增删改操作)
MySQL 是跟 PHP 配套使用的最流行的开源数据库系统,我们知道MySQL是PHP的最佳搭档,下面是系统的总结PHP与MySQL联合使用的方法.主要是使用MySQL扩展,下面就通过归纳总结来提升. ...
- 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式
一. 背景 说起EF的增删改操作,相信很多人都会说,有两种方式:① 通过方法操作 和 ② 通过状态控制. 相信你在使用EF进行删除或修改操作的时候,可能会遇到以下错误:" The obj ...
- Oracle数据库的增删改操作介绍
前面的博文介绍了Oracle的简单查询操作,博客地址:http://blog.csdn.net/weixin_36380516/article/details/65935879 这里再对Oracle的 ...
- mysql 编辑数据库内容_详解mysql数据库增删改操作
插入数据 insert into 表名(列名1,列名2,列名3) values(值1,值2,值3); insert into user(user_id,name,age) values(1,'nice ...
- 20190602:JDBC的增删改操作实践
实现JDBC的增删改操作 JDBC的增删改操作 测试 JDBC的增删改操作 首先紧接昨天的JDBC的第一个程序,进行简单的修改即可做到增删改操作: public void insert_test() ...
- Java连接数据库通用的增删改操作
通用增删改的写法: ①获取数据库的连接 ②预编译sql语句,返回PreparedStatement的实例 ③填充占位符 ④执行 ⑤资源的关闭 注:这里的数据库连接以及资源的关闭的方法封装到了Utils ...
最新文章
- 海南医学院计算机,海南医学院医学信息学院
- 微信红包的架构设计简介
- 在html中横坐标是纵坐标,excel 作图中次横坐标及次纵坐标的调试,以及excel自定义轴标签的步骤方法...
- Statues(三维bfs)
- php转译html,使用php转义输出HTML到JavaScript
- 我的学习开发环境,呵呵!
- 如何使用window.btoa base64对接口数组进行加密处理
- 微型计算机中的数据总线用来,微型计算机技术及应用(戴梅萼4)练习题答案.doc...
- jquery判断对象是否存在
- 虚拟机VM10装Mac OS X 10.9.3
- 我发现我对人类活动的认识开始有一点点变化了
- vmware虚拟机安装CentOS8提示错误:section %package does not end with %end(可用)
- MinIO之Windows环境的搭建
- Android下基于UVC的UsbCam的开发
- DPDK - flow Haripin
- 水泵smart200编程_第453期丨PLC梯形图编程很low?星三角启动,转换角型时电机反转是真的吗?...
- 行为识别论文笔记|ARTNet|Appearance-and-Relation Networks for Video Classification
- 关于大学生睡眠时间及质量的问卷调查
- 原来MAC地址还是要购买的
- (三十三 :2021.01.12)MICCAI 2016 追踪之论文纲要
热门文章
- 翻译spring4.2官方文档(3)
- 『C#基础』C#调用存储过程
- Name Mangling and extern “C” in C++
- 如何让你的Android SDK下载或者升级快如闪电
- cl_salv_table
- 正在使用的文件如何删除?
- StringBuilder 使用方法
- Windows Server 2008 计划任务配置(任务计划程序)每分钟执行BAT
- Submitting Applications
- 你还在用HTTP吗?HTTP/3都来了。。。