easyui学习笔记3—在展开行内的增删改操作
这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便。
1.先看引用的资源
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css"/>
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.5/plugins/datagrid-detailview.js"></script>
这里又要吐槽一下了,在我下载的easyui源文件D:\Serious\phpdev\easyui\jquery-easyui-1.3.5中根本就没有datagrid-detailview.js这个文件,这是作死呢,没办法只能在官网上找这个文件,复制路径http://www.jeasyui.com/easyui/datagrid-detailview.js从IE浏览器中现在这个文件保存到自己目录中。这个不知道是不是因为我下载的是一个免费版本,收费版本里面才有这个文件,很想问一下这个团队的人。
2.在看表格的定义
<table id="dg" title="My User" style="width:700px;height:250px"
url="get_users.php" toolbar="#toolbar" pagination="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>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destory</a>
</div>
和前面几篇的差不多,这里也给表格定义了工具栏。注意这里没有给表格定义class="easyui-datagrid",不知何解。url="get_users.php"这句可以用来查找数据。
3.看js定义
<script type="text/javascript">
//创建一个匿名方法并立即执行
$(function(){
$("#dg").datagrid({
view:detailview,
detailFormatter:function(index,row){ //返回一个空的div,展开行的时候将展开内容放到这个div中
return "<div class='ddv'></div>";
},
onExpandRow:function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv'); //在这一行中找到class="ddv"的div
ddv.panel({
border:false,
cache:true,
href:'show_form.php?index='+index, //展开行访问的路径及传递的参数
onLoad:function(){
$("#dg").datagrid('fixDetailRowHeight',index);//固定高度
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row); //将行的数据加载,这里可能要把列名和show_form.php文件中的name对应起来
}
});
$('#db').datagrid('fixDetailRowHeight',index);//加载之后固定高度
}
});
}); //保存
function saveItem(index){
var row = $("#dg").datagrid('getRows')[index]; //找到当前行
var url = row.isNewRecord?'save_user.php':'update_user.php?id='+row.id;//根据条件设置访问url
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{ //发送数据
url:url,
onSubmit:function(){
return $(this).form('validate'); //发送请求数据之前验证
},
success:function(data){
data = eval('('+data+')');
data.isNewRecord = false;
$('#dg').datagrid('collapseRow',index); //收缩
$('#dg').datagrid('updateRow',{ //用请求数据更新编辑的哪一行的数据
index:index,
row:data
});
}
})
} //取消
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if(row.isNewRecord){ //如果是新增直接删除这一行,包括展开内容,否则是更新则收缩
$('#dg').datagrid('deleteRow',index);
}
else{
$('#dg').datagrid('collapseRow',index);
}
} //删除
function destroyItem(){
var row = $('#dg').datagrid('getSelected');
if(row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if(r){
var index = $('#dg').datagrid('getRowIndex',row); //为destory_user.php传递参数id
$.post('destory_user.php',{id:row.id},function(){
$('#dg').datagrid('deleteRow',index);
}); }
});
}
} //点击新加
function newItem(index){
$('#dg').datagrid('appendRow',{isNewRecord:true});
var index = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('expandRow',index);
$('#dg').datagrid('selecteRow',index);
}
</script>
这个js有点复杂,我在每个方法中都注释了。我在这里犯了一个错误将 $('#dg').datagrid('getRows')错误的写成了 $("#db").datagrid('getRows') 会报错TypeError: e is undefined,笔误。
4.最后还有一个文件show_form.php如下:
<form method="post">
<table class="dv-table" style="width:100%;border:1px solid #ccc;background:#fafafa;padding:5px;margin-top:5px;">
<tr>
<td>First Name</td>
<td><input name="firstname" class="easyui-validatebox" required="true"></input></td>
<td>Last Name</td>
<td><input name="lastname" class="easyui-validatebox" required="true"></input></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone"></input></td>
<td>Email</td>
<td><input name="email" class="easyui-validatebox" validType="email"></input></td>
</tr>
</table>
<div style="padding:5px 0;text-align:right;padding-right:30px">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<?php echo $_REQUEST['index'];?>)">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<?php echo $_REQUEST['index'];?>)">Cancel</a>
</div>
</form>
这是一个php文件,可以看到使用<?php echo $_REQUEST['index'];?>接受参数。
好了就写到这里。
easyui学习笔记3—在展开行内的增删改操作的更多相关文章
- Mysql学习笔记(三)对表数据的增删改查。
正文内容. 这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mys ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- 【EF6学习笔记】(二)操练 CRUD 增删改查
本篇原文链接: Implementing Basic CRUD Functionality 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根 ...
- EF6 学习笔记(二):操练 CRUD 增删改查
EF6学习笔记总目录 ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 接上篇: EF6 学习笔记(一):Code First 方式生成数据库及初始化数据库实际操作 本篇原文链接: I ...
- mongodb的学习笔记一(集合和文档的增删改查)
1数据库的增删改查 一.增加一个数据库: use blog-----切换到指定的数据库,如果数据库不存在,则自动创建该数据库(新建的数据库,如果没有存储对应的集合,是不会显示出来的) 二.删除一个数据 ...
- Mysql学习笔记(二)对表结构的增删改查
有将近一个星期都没有更新mysql了.相反linux的东西倒是学习不少.可能我个人情感上对linux更感兴趣一点.但mysql我也不烦,只是一旦将精力投入到了一样事情上去,就很难将精力分散去搞其他的东 ...
- oracle学习笔记系列------oracle 基本操作之表的增删改查
--创建一个表 CREATE TABLE employee_souvc( id ), name ), gender ), birth DATE, salary ,), job ), deptno ) ...
- EasyUI----DataGrid行明细增删改操作
http://blog.csdn.net/huchiwei/article/details/7787947 本文实现的是EasyUI-DataGrid行明细的增删改操作.具体参考来自以下文章: 官 ...
随机推荐
- 【随笔】nginx下的301跳转,两个域名指向同一个服务器ip
301跳转 页面永久性移走,通常叫做301跳转,也叫301重定向,301转向. 指的是当用户点击一个网址时,通过技术手段,跳转到指定的一个网站. 用以解决两个域名指向同一个服务器ip,当访问m.xxx ...
- Android使用7牛云存储
第一次使用这个云存储,话说7牛云存储大有来头!区别于国内外其他云存储,七牛自行研发的全分布式架构解决了其他云存储单一数据中心架构可能存在的风险,同时首创双向加速特性对数据上传下载均加速,使得数据访问速 ...
- ES6内容
iterator 遍历器iterator makeIterator是个遍历器,生成遍历器对象it var it = makeIterator(['a', 'b']); it.next() // { v ...
- HDU 5695 ——Gym Class——————【贪心思想,拓扑排序】
Gym Class Time Limit: 6000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- 第四章使用java实现面向对象-接口
一.接口 1.接口可以看作是一种特殊的“抽象类”. 2.接口有比抽象类更好的特性 3.可以被多继承 4.设计和实现完全分离 5.更自然的使用多态 二.接口约定 1.接口表示一种约定:体现在接口名称和注 ...
- Eclipse自定义启动画面和状态栏图标以及各种小图标的含义
一. 启动画面自定义 第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...
- Java 基础 内部类
Java 基础 内部类 内部类(嵌套类) nested class 目的为外围类enclosing class提供服务. 四种: 静态成员类 static member class 非静态成员类 no ...
- Redis(什么是Redis?)
Redis是一个开源的内存数据库,可以作为缓存也可以作为消息队列.它支持的数据结构有:字符串.哈希表.列表.集合.有序集合. Redis:Redis是Remote Dictionary Server( ...
- python 2.7支持中文
在代码的第一行加上#coding=utf-8 return render_template('index.html',message=u"小明小明")print u'你要打印的字符 ...
- react+javascript前端进阶
组合1: react技术栈(react(阮一峰react入门,官网教程).redux(阮一峰redux入门,官网教程).saga)+JS(ES6)+antd+you don`t know JS(上中下 ...